Entwicklerhandbuch — PrestaShop

Ein 3D-Konfigurator
auf PrestaShop.
2 Zeilen Code.

<viewer-3dvue> ist ein natives Web Component. Es lässt sich in jedes Smarty-Template integrieren — product.tpl, Modul-Override oder benutzerdefinierter Hook. Kein zusätzliches PrestaShop-Modul erforderlich.

Kein Modul zu installieren

Kompatibel PS 1.7 / 8.x

Smarty-Templates .tpl

Native PrestaShop-Hooks

{* Im <head> oder Ihrem Hauptlayout *}
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

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

{* Das ist alles. *}

Skript über einen Hook laden

Die empfohlene Methode ist, den Hook displayHeader aus einem benutzerdefinierten Modul oder direkt in Ihrem Template zu verwenden. Sie können es auch über product.tpl einbinden, wenn Sie auf Theme-Ebene arbeiten.

Das CDN-Skript oben ist öffentlich — es muss nicht gehostet werden. Das src-Attribut der Komponente ist die spezifische URL Ihres Konfigurators, die 3DVue bei der Projektlieferung bereitstellt.

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

// Oder direkt in Ihrem Smarty-Template:
{* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}

Komponente in product.tpl platzieren

Fügen Sie das Tag in Ihr Smarty-Produkttemplate ein, in der linken Spalte oder in einem dedizierten Bereich. Sie können die Anzeige mit {if} konditionieren, um es nur bei bestimmten Kategorien oder Referenzen anzuzeigen.

PrestaShop 8 verwendet ein neues Template-System. Das Tag funktioniert in beiden Kontexten — altes product.tpl und neue Hummingbird-Abschnitte.

{* Bei Bedarf nach Produkt-ID filtern *}
{if $product.id == 42}
<viewer-3dvue
  name="meinViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>
{/if}

{* Oder mit aktiviertem Debug *}
<viewer-3dvue
  name="meinViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>

PrestaShop-Kombinationen verbinden

PrestaShop generiert Kombinations-Selects dynamisch. Fügen Sie die viewer-3dvue-Attribute über Smarty auf Ihren Kombinations-Selects hinzu, oder verwenden Sie die JS-API, um das native updateProduct-Ereignis von PrestaShop abzuhören.

{* Über HTML-Attribute auf Selects *}
{foreach $product.groups as $group}
<select
  viewer-3dvue="meinViewer"
  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 bei Klick — Farb-Swatches

Verbinden Sie jeden von Smarty generierten Button oder Swatch. Mehrere Materialien können mit einem einzigen Klick geändert werden.

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

Abhören über das PS-updateProduct-Ereignis

Für Fälle, in denen PrestaShop Kombinationen per AJAX neu lädt, hören Sie das native updateProduct-Ereignis ab und synchronisieren den Viewer.

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

// PS-Kombinationsänderungen abhören
document.addEventListener(
  'updateProduct',
  (e) => {
    const idMat = e.detail.id_material;
    viewer.setMaterial({"1": idMat});
  }
);

setMaterial() Materialien anwenden — gleiche API wie für Shopify oder WooCommerce

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

// Mehrere Materialien auf einmal ändern
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Auf einem bestimmten Segment
viewer.setMaterial({ "1": "1a" }, 1);

captureToBase64() Rendering aufnehmen und mit der PrestaShop-Bestellung übertragen

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64 } = e.detail;
  // In ein verstecktes Feld des PS-Formulars einfügen
  document.querySelector('#add-to-cart-or-refresh input[name="config_img"]').value = base64;
});

exportSVG() — BAT Produktion Generiert die SVG-Datei des konfigurierten Produkts, produktionsbereit

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

Ein 3D-Konfigurator
auf PrestaShop.
2 Zeilen Code.

In 3 Schritten bereit. Kein Modul zu erstellen.

Kein JavaScript.
Alles über HTML-Attribute.

Für erweiterte Anwendungsfälle.

Bereit zur Integration?
Wir kümmern uns um die 3D-Modelle.

Ein 3D-Konfigurator auf PrestaShop. 2 Zeilen Code.

In 3 Schritten bereit. Kein Modul zu erstellen.

Kein JavaScript.Alles über HTML-Attribute.

Für erweiterte Anwendungsfälle.

Bereit zur Integration?Wir kümmern uns um die 3D-Modelle.

Ein 3D-Konfigurator
auf PrestaShop.
2 Zeilen Code.

Kein JavaScript.
Alles über HTML-Attribute.

Bereit zur Integration?
Wir kümmern uns um die 3D-Modelle.