Un configurador 3D
en PrestaShop.
2 líneas de código.
<viewer-3dvue> es un Web Component nativo. Se integra en cualquier plantilla Smarty : product.tpl, override de módulo, o hook personalizado. Sin módulo PrestaShop adicional.
{* En <head> o en tu layout principal *} <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="miVisor" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {* Eso es todo. *}
Cree su configurador usted mismo.
La guía anterior está dirigida a desarrolladores que integran un configurador creado a medida por 3DVue. Si ya dispone de los archivos 3D de sus productos y quiere crear y publicar su propio configurador sin escribir código, utilice el software 3DVue. Para cada producto, genera:
- Un enlace directo: la URL del configurador, para incluir en una página, un correo o una red social.
- Un código iframe: para pegar en un módulo de bloque HTML, en la descripción del producto o en una página CMS de PrestaShop.
- Un widget: un script que se pega una sola vez en el encabezado del tema mediante ese mismo módulo de bloque HTML, que añade un botón «Ver en 3D» en sus páginas de producto.
Gratis durante 14 días, luego desde 49 € + IVA al mes, sin comisión sobre sus ventas.
Listo en 3 pasos. Sin módulo que crear.
Un Web Component nativo compatible con las plantillas Smarty de PrestaShop 1.7 y 8.x. Sin dependencia PHP, sin módulo que publicar en el Addons Marketplace.
-
1Cargar el script mediante un hook
El método recomendado es usar el hook
displayHeaderdesde un módulo personalizado o directamente en tu plantilla. También puedes incluirlo enproduct.tplsi trabajas directamente sobre el tema.El script CDN es público : no hace falta alojarlo. El atributosrcdel componente es la URL específica de tu configurador, proporcionada por 3DVue al entregar el proyecto.MiModulo.php : via hookpublic function hookDisplayHeader() { return '<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>'; } // O directamente en tu plantilla Smarty: {* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}
-
2Colocar el componente en product.tpl
Pega la etiqueta en tu plantilla de producto Smarty, en la columna izquierda o en una zona dedicada. Puedes condicionar la visualización con
{if}para mostrarlo solo en ciertas categorías o referencias.PrestaShop 8 usa un nuevo sistema de plantillas. La etiqueta funciona en ambos contextos : antiguoproduct.tply nuevas secciones Hummingbird.product.tpl{* Condicionar por ID de producto si es necesario *} {if $product.id == 42} <viewer-3dvue name="miVisor" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {/if} {* O con debug activado *} <viewer-3dvue name="miVisor" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
-
3Conectar las combinaciones de PrestaShop
PrestaShop genera los selects de combinaciones dinámicamente. Añade los atributos
viewer-3dvuemediante Smarty en tus selects de combinaciones, o usa la API JS para escuchar el eventoupdateProductnativo de PrestaShop.product.tpl + JS : combinaciones{* Via atributos HTML en los selects *} {foreach $product.groups as $group} <select viewer-3dvue="miVisor" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > {foreach $group.attributes as $attr} <option value="{$attr.id_material}"> {$attr.name} </option> {/foreach} </select> {/foreach}
Cero JavaScript.
Todo con atributos HTML.
El componente escucha automáticamente los eventos click y change en cualquier elemento con los atributos correctos. Compatible con los selects de combinaciones nativos de PrestaShop y los módulos de swatches.
{foreach $colores as $c} <button viewer-3dvue="miVisor" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}' > {$c.name} </button> {/foreach}
updateProduct y sincroniza el visor.const viewer = document.querySelector( 'viewer-3dvue[name="miVisor"]' ); // Escuchar los cambios de combinación PS document.addEventListener( 'updateProduct', (e) => { const idMat = e.detail.id_material; viewer.setMaterial({"1": idMat}); } );
Para los casos avanzados.
Control programático completo : útil para sincronizar el visor con el sistema de combinaciones AJAX de PrestaShop, o para captura de imagen y exportación de BAT.
const viewer = document.querySelector('viewer-3dvue[name="miVisor"]'); // Cambiar varios materiales a la vez viewer.setMaterial({ "1": "0n", "3": "2b" }); // En un segmento específico viewer.setMaterial({ "1": "1a" }, 1);
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64 } = e.detail; // Inyectar en un campo oculto del formulario PS document.querySelector('#add-to-cart-or-refresh input[name="config_img"]').value = base64; });
viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; if (!error) console.log("BAT SVG:", path); });
Preguntas frecuentes
¿Hace falta instalar un módulo en PrestaShop?+
¿Es compatible con PrestaShop 1.7 y 8.x?+
¿Cómo conecto las combinaciones de PrestaShop al visor?+
¿Puedo mostrar el visor solo en ciertos productos?+
¿Cuánto cuesta un configurador 3D para PrestaShop?+
Lectura recomendada
Este configurador en su sector
Referencia API, atributos HTML, eventos, ejemplos Smarty de PrestaShop. Todo está documentado.
Ver la documentaciónSin tickets automáticos. Hablas directamente con Matthieu, el desarrollador que diseñó la API. Respuesta en 24h.
Reservar una reuniónPrueba el configurador antes de integrarlo. Verás lo que tus clientes verán en tu tienda PrestaShop.
Ver la demo¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.
Tú gestionas el código en PrestaShop, nosotros nos ocupamos del resto : modelización, materiales, configuración. En 30 minutos te decimos qué podemos hacer.