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

Sem programador?

Crie o seu configurador você mesmo.

O guia abaixo destina-se a programadores que integram um configurador concebido à medida pela 3DVue. Se já tem os ficheiros 3D dos seus produtos e quer criar e publicar o seu configurador você mesmo, sem escrever código, utilize o software 3DVue. Para cada produto, gera :

Uma ligação direta : o URL do configurador, para colocar numa página, num email ou numa rede social.
Um código iframe : para colar num módulo de Bloco HTML, na descrição do produto ou numa página CMS do PrestaShop.
Um widget : um script para colar uma vez no cabeçalho do tema através desse mesmo módulo de Bloco HTML, que adiciona um botão « Ver em 3D » nas suas páginas de produto.

Grátis durante 14 dias, depois a partir de 49 € + IVA por mês, sem comissão sobre as suas vendas.

Experimentar gratuitamente Descobrir o software

+94%

de conversões em fichas com modelo 3D

Fonte: Shopify

-40%

de devoluções após visualização 3D do produto

Fonte: Shopify

66%

de compradores mais confiantes com configurador 3D

Fonte: Estudo 2023

82%

de visitantes ativam a vista 3D quando está disponível

Fonte: Cappasity

1

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.
MeuModulo.php : via hook
```
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> *}
```
2

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.
product.tpl
```
{* 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);
});

Perguntas frequentes

É 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. Sem programador? Com o software 3DVue, cole o código iframe do configurador num bloco HTML, na descrição de um produto ou numa página CMS.

É 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.

Quanto custa um configurador 3D para PrestaShop?+

Um configurador por medida começa nos 5 000 € + IVA, sob orçamento: modelação, interface com a sua identidade visual, integração, alojamento e suporte humano estão incluídos. Para experimentar por si, o software em self-service é gratuito durante 14 dias, sem cartão de crédito, e depois a partir de 49 € + IVA por mês.

Leitura adicional

FAQ Realidade Aumentada

Este configurador no seu setor

Joalheria & Luxo Mobiliário & Déco Têxtil & Moda Camisolas desportivas Artigos publicitários

Documentação completa

Referência da API, atributos HTML, eventos, exemplos Smarty do PrestaShop. Tudo está documentado.

Ver a documentação

Suporte técnico humano

Sem tickets automáticos. Fala diretamente com Matthieu, o programador que concebeu a API. Resposta em 24h.

Reservar uma reunião

Demo interativa

Experimente o configurador antes de o integrar. Verá o que os seus clientes verão na sua loja PrestaShop.

Ver a demo

Integremos juntos

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

Você gere o código no PrestaShop, nós tratamos do resto : modelação, materiais, configuração. Em 30 minutos dizemos-lhe o que podemos fazer.

Script entregue no final do projeto

IDs de modelos e materiais documentados por projeto

Suporte direto com o programador da API

Compatível PrestaShop 1.7 e 8.x

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

Crie o seu configurador você mesmo.

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

Zero JavaScript.
Tudo com atributos HTML.

Para os casos avançados.

Perguntas frequentes

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

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

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

Posso mostrar o visualizador apenas em certos produtos?+

Quanto custa um configurador 3D para PrestaShop?+

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

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

Crie o seu configurador você mesmo.

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

Zero JavaScript.Tudo com atributos HTML.

Para os casos avançados.

Perguntas frequentes

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

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

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

Posso mostrar o visualizador apenas em certos produtos?+

Quanto custa um configurador 3D para PrestaShop?+

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.