¿Hace falta instalar un módulo en PrestaShop?

No. La integración se hace directamente en los archivos de tu tema mediante hooks nativos de PrestaShop. No hay ningún módulo que instalar ni activar en el back-office.

¿Es compatible con PrestaShop 1.7 y 8.x?

Sí, el componente funciona con PrestaShop 1.7 y 8.x. La integración usa hooks y plantillas Smarty estándar, sin dependencias de versión específicas.

¿Cómo conecto las combinaciones de PrestaShop al visor?

Mediante el evento JavaScript nativo updateProduct de PrestaShop. Cuando el cliente cambia una combinación, el visor recibe el evento y actualiza el modelo 3D en tiempo real.

¿Puedo mostrar el visor solo en ciertos productos?

Sí, usando una condición Smarty {if $product.id == 42} en product.tpl para mostrar el componente únicamente en los productos que tienen un configurador 3D asociado.

Guía para desarrolladores — PrestaShop

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.

Sin módulo que instalar

Compatible PS 1.7 / 8.x

Plantillas Smarty .tpl

Hooks nativos PrestaShop

{* 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. *}

Cargar el script mediante un hook

El método recomendado es usar el hook displayHeader desde un módulo personalizado o directamente en tu plantilla. También puedes incluirlo en product.tpl si trabajas directamente sobre el tema.

El script CDN es público — no hace falta alojarlo. El atributo src del componente es la URL específica de tu configurador, proporcionada por 3DVue al entregar el proyecto.

public 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> *}

Colocar 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 — antiguo product.tpl y nuevas secciones Hummingbird.

{* 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>

Conectar las combinaciones de PrestaShop

PrestaShop genera los selects de combinaciones dinámicamente. Añade los atributos viewer-3dvue mediante Smarty en tus selects de combinaciones, o usa la API JS para escuchar el evento updateProduct nativo de PrestaShop.

{* 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}

setMaterial al hacer clic — swatches de color

Conecta cualquier botón o swatch generado por Smarty. Se pueden cambiar varios materiales en un solo clic.

{foreach $colores as $c}
<button
  viewer-3dvue="miVisor"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}'
>
  {$c.name}
</button>
{/foreach}

Escucha via el evento updateProduct de PS

Para los casos en que PrestaShop recarga las combinaciones en AJAX, escucha el evento nativo 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});
  }
);

setMaterial() Aplica materiales — la misma API que para Shopify o WooCommerce

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);

captureToBase64() Captura el renderizado para enviarlo con el pedido de PrestaShop

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;
});

exportSVG() — BAT de producción Genera el archivo SVG del producto configurado, listo para producción

viewer.exportSVG();
viewer.addEventListener("onSVGExportComplete", (e) => {
  const { path, error } = e.detail;
  if (!error) console.log("BAT SVG:", path);
});

Un configurador 3D
en PrestaShop.
2 líneas de código.

Listo en 3 pasos. Sin módulo que crear.

Cero JavaScript.
Todo con atributos HTML.

Para los casos avanzados.

¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.

Un configurador 3D en PrestaShop. 2 líneas de código.

Listo en 3 pasos. Sin módulo que crear.

Cero JavaScript.Todo con atributos HTML.

Para los casos avanzados.

¿Listo para integrar?Nosotros nos ocupamos de los modelos 3D.

Un configurador 3D
en PrestaShop.
2 líneas de código.

Cero JavaScript.
Todo con atributos HTML.

¿Listo para integrar?
Nosotros nos ocupamos de los modelos 3D.