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.
{* 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. *}
Erstellen Sie Ihren Konfigurator selbst.
Die obige Anleitung richtet sich an Entwickler, die einen von 3DVue individuell erstellten Konfigurator einbinden. Wenn Sie bereits über die 3D-Dateien Ihrer Produkte verfügen und Ihren Konfigurator selbst erstellen und veröffentlichen möchten, ohne Code zu schreiben, nutzen Sie die 3DVue-Software. Für jedes Produkt erzeugt sie:
- Einen direkten Link: die URL des Konfigurators, zum Einfügen auf einer Seite, in einer E-Mail oder einem sozialen Netzwerk.
- Einen iFrame-Code: zum Einfügen in ein HTML-Block-Modul, in der Produktbeschreibung oder auf einer PrestaShop-CMS-Seite.
- Ein Widget: ein Skript, das einmalig über dasselbe HTML-Block-Modul im Theme-Header eingefügt wird und einen Button „In 3D ansehen" auf Ihren Produktseiten hinzufügt.
14 Tage kostenlos, danach ab 49 € zzgl. MwSt. pro Monat, ohne Provision auf Ihre Verkäufe.
In 3 Schritten bereit. Kein Modul zu erstellen.
Ein natives Web Component, kompatibel mit den Smarty-Templates von PrestaShop 1.7 und 8.x. Keine PHP-Abhängigkeiten, kein Modul auf dem Addons Marketplace einzureichen.
-
1Skript über einen Hook laden
Die empfohlene Methode ist, den Hook
displayHeaderaus einem benutzerdefinierten Modul oder direkt in Ihrem Template zu verwenden. Sie können es auch überproduct.tpleinbinden, wenn Sie auf Theme-Ebene arbeiten.Das CDN-Skript oben ist öffentlich : es muss nicht gehostet werden. Dassrc-Attribut der Komponente ist die spezifische URL Ihres Konfigurators, die 3DVue bei der Projektlieferung bereitstellt.MeinModul.php : über Hookpublic 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> *}
-
2Komponente 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 : altesproduct.tplund neue Hummingbird-Abschnitte.product.tpl{* 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>
-
3PrestaShop-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 nativeupdateProduct-Ereignis von PrestaShop abzuhören.product.tpl + JS : Kombinationen{* Ü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}
Kein JavaScript.
Alles über HTML-Attribute.
Die Komponente hört automatisch auf click- und change-Ereignisse auf jedem Element mit den richtigen Attributen. Kompatibel mit den nativen Kombinations-Selects von PrestaShop und Swatch-Modulen.
{foreach $farben as $f} <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{{"1":"{$f.id_mat}"}}' > {$f.name} </button> {/foreach}
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}); } );
Für erweiterte Anwendungsfälle.
Vollständige programmatische Steuerung : nützlich zur Synchronisation des Viewers mit dem AJAX-Kombinationssystem von PrestaShop oder für Bildaufnahme und BAT-Export.
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);
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; });
viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; if (!error) console.log("BAT SVG:", path); });
Häufige Fragen
Wie installiere ich den 3D-Konfigurator in PrestaShop?+
Ist er mit PrestaShop 1.7 und 8.x kompatibel?+
Wie verbinde ich die Kombinationsauswahlen?+
Kann ich den Konfigurator nur für bestimmte Produkte anzeigen?+
Was kostet ein 3D-Konfigurator für PrestaShop?+
À lire aussi
Dieser Konfigurator für Ihren Sektor
API-Referenz, HTML-Attribute, Ereignisse, Smarty PrestaShop-Beispiele. Alles dokumentiert.
Dokumentation ansehenKein automatisiertes Ticketing. Sie sprechen direkt mit Matthieu, dem Entwickler der API. Antwort innerhalb von 24h.
Termin buchenTesten Sie den Konfigurator vor der Integration. Sehen Sie, was Ihre Kunden in Ihrem PrestaShop-Shop sehen werden.
Demo ansehenBereit zur Integration?
Wir kümmern uns um die 3D-Modelle.
Sie verwalten den Code auf der PrestaShop-Seite, wir kümmern uns um alles andere : Modellierung, Materialien, Konfiguration. In 30 Minuten sagen wir Ihnen, was wir tun können.