É necessário instalar um módulo no PrestaShop?

Não. A integração é feita diretamente nos ficheiros do seu tema através de hooks nativos do PrestaShop. Não há nenhum módulo para instalar nem ativar no back-office.

É compatível com PrestaShop 1.7 e 8.x?

Sim, o componente funciona com PrestaShop 1.7 e 8.x. A integração utiliza hooks e templates Smarty padrão, sem dependências de versão específicas.

Como conecto as combinações do PrestaShop ao visualizador?

Através do evento JavaScript nativo updateProduct do PrestaShop. Quando o cliente muda uma combinação, o visualizador recebe o evento e atualiza o modelo 3D em tempo real.

Posso mostrar o visualizador apenas em certos produtos?

Sim, usando uma condição Smarty {if $product.id == 42} em product.tpl para mostrar o componente apenas nos produtos que têm um configurador 3D associado.

Guia para programadores — PrestaShop

Um configurador 3D
no PrestaShop.
2 linhas de código.

<viewer-3dvue> é um Web Component nativo. Integra-se em qualquer template Smarty — product.tpl, override de módulo, ou hook personalizado. Sem módulo PrestaShop adicional.

Sem módulo para instalar

Compatível PS 1.7 / 8.x

Templates Smarty .tpl

Hooks nativos PrestaShop

{* Em <head> ou no seu layout principal *}
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

<viewer-3dvue
  name="meuVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

{* É tudo. *}

Carregar o script através de um hook

O método recomendado é usar o hook displayHeader a partir de um módulo personalizado ou diretamente no seu template. Também pode incluí-lo em product.tpl se trabalhar diretamente sobre o tema.

O script CDN é público — não é necessário alojá-lo. O atributo src do componente é o URL específico do seu configurador, fornecido pela 3DVue na entrega do projeto.

public function hookDisplayHeader()
{
  return '<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>';
}

// Ou diretamente no seu template Smarty:
{* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}

Colocar o componente em product.tpl

Cole a etiqueta no seu template de produto Smarty, na coluna esquerda ou numa zona dedicada. Pode condicionar a visualização com {if} para mostrá-la apenas em certas categorias ou referências.

O PrestaShop 8 usa um novo sistema de templates. A etiqueta funciona em ambos os contextos — antigo product.tpl e novas secções Hummingbird.

{* Condicionar por ID de produto se necessário *}
{if $product.id == 42}
<viewer-3dvue
  name="meuVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>
{/if}

{* Ou com debug ativado *}
<viewer-3dvue
  name="meuVisor"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>

Ligar as combinações do PrestaShop

O PrestaShop gera os selects de combinações dinamicamente. Adicione os atributos viewer-3dvue através do Smarty nos seus selects de combinações, ou use a API JS para escutar o evento updateProduct nativo do PrestaShop.

{* Via atributos HTML nos selects *}
{foreach $product.groups as $group}
<select
  viewer-3dvue="meuVisor"
  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 ao clicar — swatches de cor

Conecte qualquer botão ou swatch gerado pelo Smarty. Podem ser alterados vários materiais num único clique.

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

Escuta via o evento updateProduct do PS

Para os casos em que o PrestaShop recarrega as combinações em AJAX, escute o evento nativo updateProduct e sincronize o visualizador.

const viewer =
  document.querySelector(
    'viewer-3dvue[name="meuVisor"]'
  );

// Escutar as mudanças de combinação PS
document.addEventListener(
  'updateProduct',
  (e) => {
    const idMat = e.detail.id_material;
    viewer.setMaterial({"1": idMat});
  }
);

setMaterial() Aplica materiais — a mesma API que para Shopify ou WooCommerce

const viewer = document.querySelector('viewer-3dvue[name="meuVisor"]');

// Mudar vários materiais ao mesmo tempo
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Num segmento específico
viewer.setMaterial({ "1": "1a" }, 1);

captureToBase64() Captura a renderização para enviar com a encomenda do PrestaShop

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64 } = e.detail;
  // Injetar num campo oculto do formulário PS
  document.querySelector('#add-to-cart-or-refresh input[name="config_img"]').value = base64;
});

exportSVG() — Prova de produção Gera o ficheiro SVG do produto configurado, pronto para produção

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

Um configurador 3D
no PrestaShop.
2 linhas de código.

Pronto em 3 passos. Sem módulo para criar.

Zero JavaScript.
Tudo com atributos HTML.

Para os casos avançados.

Pronto para integrar?
Nós tratamos dos modelos 3D.

Um configurador 3D no PrestaShop. 2 linhas de código.

Pronto em 3 passos. Sem módulo para criar.

Zero JavaScript.Tudo com atributos HTML.

Para os casos avançados.

Pronto para integrar?Nós tratamos dos modelos 3D.

Um configurador 3D
no PrestaShop.
2 linhas de código.

Zero JavaScript.
Tudo com atributos HTML.

Pronto para integrar?
Nós tratamos dos modelos 3D.