Guide développeur — PrestaShop

Un configurateur 3D
sur PrestaShop.
2 lignes de code.

<viewer-3dvue> est un Web Component natif. Il s'intègre dans n'importe quel template Smarty — product.tpl, override de module, ou hook personnalisé. Aucun module PrestaShop supplémentaire requis.

Aucun module à installer

Compatible PS 1.7 / 8.x

Templates Smarty .tpl

Hooks natifs PrestaShop

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

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

{* C'est tout. *}

Charger le script via un hook

La méthode recommandée est d'utiliser le hook displayHeader depuis un module custom ou directement dans votre template. Vous pouvez aussi l'inclure via product.tpl si vous intervenez au niveau du thème.

Le script CDN ci-dessus est public — pas besoin de l'héberger. L'attribut src du composant est l'URL spécifique à votre configurateur, fournie par 3DVue à la livraison du projet.

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

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

Placer le composant dans product.tpl

Collez la balise dans votre template produit Smarty, dans la colonne gauche ou dans une zone dédiée. Vous pouvez conditionner l'affichage avec {if} pour ne l'afficher que sur certaines catégories ou références.

PrestaShop 8 utilise un nouveau système de templates. La balise fonctionne dans les deux contextes — ancien product.tpl et nouvelles sections Hummingbird.

{* Conditionner par ID produit si besoin *}
{if $product.id == 42}
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>
{/if}

{* Ou avec debug activé *}
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>

Brancher les combinaisons PrestaShop

PrestaShop génère les selects de combinaisons dynamiquement. Ajoutez les attributs viewer-3dvue via Smarty sur vos selects de combinaisons, ou utilisez l'API JS pour écouter l'événement updateProduct natif de PrestaShop.

{* Via attributs HTML sur les selects *}
{foreach $product.groups as $group}
<select
  viewer-3dvue="monViewer"
  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 sur clic — swatches couleur

Branchez n'importe quel bouton ou swatch généré par Smarty. Plusieurs matériaux peuvent être changés en un seul clic.

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

Écoute via l'événement updateProduct PS

Pour les cas où PrestaShop recharge les combinaisons en AJAX, écoutez l'événement natif updateProduct et synchronisez le viewer.

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

// Écouter les changements de combinaison PS
document.addEventListener(
  'updateProduct',
  (e) => {
    const idMat = e.detail.id_material;
    viewer.setMaterial({"1": idMat});
  }
);

setMaterial() Applique des matériaux — même API que pour Shopify ou WooCommerce

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

// Changer plusieurs matériaux d'un coup
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Sur un segment spécifique
viewer.setMaterial({ "1": "1a" }, 1);

captureToBase64() Capture le rendu pour le transmettre avec la commande PrestaShop

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64 } = e.detail;
  // Injecter dans un champ caché du formulaire PS
  document.querySelector('#add-to-cart-or-refresh input[name="config_img"]').value = base64;
});

exportSVG() — BAT production Génère le fichier SVG du produit configuré, prêt pour la production

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

Un configurateur 3D
sur PrestaShop.
2 lignes de code.

Prêt en 3 étapes. Pas de module à créer.

Zéro JavaScript.
Tout en attributs HTML.

Pour les cas avancés.

Prêt à intégrer ?
On s'occupe des modèles 3D.

Un configurateur 3D sur PrestaShop. 2 lignes de code.

Prêt en 3 étapes. Pas de module à créer.

Zéro JavaScript.Tout en attributs HTML.

Pour les cas avancés.

Prêt à intégrer ?On s'occupe des modèles 3D.

Un configurateur 3D
sur PrestaShop.
2 lignes de code.

Zéro JavaScript.
Tout en attributs HTML.

Prêt à intégrer ?
On s'occupe des modèles 3D.