Ein 3D-Konfigurator
in WooCommerce.
2 Codezeilen.
<viewer-3dvue> ist eine native Web Component. Keine Abhängigkeiten, kein zusätzliches Plugin. Integriert in jede WooCommerce-Vorlage : single-product.php, einen Shortcode oder einen benutzerdefinierten Gutenberg-HTML-Block.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); });
<viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Fertig. -->
Bereit in 3 Schritten. Kein dediziertes Plugin.
Eine native Web Component : keine Abhängigkeit von React, Vue oder jQuery. Kompatibel mit allen WordPress-Themes und Page-Buildern (Elementor, Divi, Bricks).
-
1Skript registrieren
Verwenden Sie
wp_enqueue_script()in Ihrerfunctions.php, um die Komponente zu laden. Das abschließendetruelädt es im Footer : empfohlen, um das Rendering nicht zu blockieren.Das CDN-Skript ist öffentlich. Sie können es auch über ein Elementor-HTML-Widget oder WPCode einbinden : in allen Fällen ist dassrc-Attribut der Komponente die spezifische URL Ihres Konfigurators, die 3DVue bei der Lieferung bereitstellt.functions.phpadd_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); }); // Oder über WPCode : HTML-Snippet // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
-
2Komponente platzieren
Fügen Sie das Tag in Ihre Produktvorlage, einen PHP-Shortcode oder einen Gutenberg-HTML-Block ein. Zwei Pflichtattribute:
name(eindeutige Kennung) undsrc(die von 3DVue bereitgestellte Konfigurator-URL).Mit Elementor fügen Sie das Tag einfach in ein HTML-Widget ein. Da das Skript bereits global geladen wird, ist keine zusätzliche Konfiguration erforderlich.single-product.php oder HTML-Widget<viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Mit aktiviertem Debug --> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
-
3WooCommerce-Variationen verbinden
Fügen Sie die
viewer-3dvue-Attribute direkt zu Ihren nativen WooCommerce-Variations-<select>-Elementen oder Ihren benutzerdefinierten Mustern hinzu. Die Komponente hört automatisch zu : kein JS zu schreiben.variable.php : Farb-Variations-Select<!-- In einem bestehenden WooCommerce-Select --> <select name="attribute_pa_colour" viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Schwarz</option> <option value="1a">Weiß</option> <option value="2b">Natureiche</option> </select> <!-- Oder in einem benutzerdefinierten Muster-Button --> <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Natureiche / Schwarz</button>
Kein JavaScript.
Alles in HTML-Attributen.
Die Komponente hört automatisch auf click- und change-Events auf jedem Element mit den richtigen Attributen. Kompatibel mit nativen WooCommerce-Selects und Muster-Plugins (Variation Swatches, etc.).
<button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Grauer Samtstoff </button> // {"meshIndex": "materialId"} // Index 0 reserviert : beginnt bei 1
<select> hinzu. Der Viewer synchronisiert sich automatisch.<select name="attribute_pa_colour" viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Schwarz</option> <option value="1a">Weiß</option> </select> // viewer-3dvue-mesh="1,3" // wird auf Mesh 1 UND Mesh 3 angewendet
Für fortgeschrittene Anwendungsfälle.
Vollständige programmatische Kontrolle : nützlich zur Synchronisierung des Viewers mit WooCommerce-Variationen über JS oder für fortgeschrittene Anwendungsfälle wie Bilderfassung oder BAT-Export.
const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]'); // Mit WooCommerce-Variationen synchronisieren document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// Auf Objekt 0 (Standard) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Auf einem bestimmten Segment (mehrteiliges Produkt) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Anderes Modell laden (z.B. Formwechsel) viewer.loadModel("AB01-CD02"); // Komponente zum bestehenden Modell hinzufügen // Bsp: Armlehne, Regal, Bein hinzufügen viewer.addModel("EF03"); // Komponente entfernen (Index beginnt bei 0) viewer.removeModel(1); // ⚠ Das letzte verbleibende Segment kann nicht entfernt werden
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // In verstecktem Feld für WC-Bestellung speichern document.querySelector('input[name="config_preview"]').value = base64; });
Texte, Logos, Druckvorschauen.
Alles in SVG.
Die SVG-API ermöglicht es Ihnen, Text und Bilder direkt auf das 3D-Produkt über im Modell definierte Platzierungszonen hinzuzufügen. Sie wird für personalisierbare Produkte verwendet : Markierung, Logo-Upload, Textgravur.
| Methode | Beschreibung |
|---|---|
addSVGText(text, opts) |
Fügt Text zu einer Platzierungszone hinzu. Optionen: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Fügt ein Bild hinzu (File oder ArrayBuffer). Ohne Kopie via Transferable Objects. |
setSVGElementParam(param, value, id) |
Ändert einen Parameter eines SVG-Elements. Ohne 3. Argument: gilt für das ausgewählte Element. |
removeSVGElement(id) |
Entfernt ein SVG-Element (Text oder Bild). Ohne Argument: entfernt das ausgewählte Element. |
exportSVG() |
Generiert die SVG-Datei des konfigurierten Produkts : druckfertige Vorlage für die Produktion. |
// 1. Logo aus einem WooCommerce-Datei-Input laden const file = input.files[0]; viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Benutzerdefinierter Text (Gravur, Markierung) viewer.addSVGText("Mein Text", { fill: "#ffffff", fontFamily: "Arial" }); // 3. SVG-Druckvorlage für die Produktion exportieren viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL der druckfertigen SVG-Datei });
À lire aussi
Dieser Konfigurator für Ihren Sektor
API-Referenz, HTML-Attribute, Events, WooCommerce-PHP-Beispiele. Alles ist dokumentiert und wird aktuell gehalten.
Dokumentation ansehenKein automatisches Ticket-System. Sie sprechen direkt mit Matthieu, dem Entwickler, der die API entworfen hat. Antwort in weniger als 24 Stunden.
Einen Anruf buchenTesten Sie den Konfigurator unter realen Bedingungen, bevor Sie ihn integrieren. Sehen Sie genau, was Ihre Kunden in Ihrem WooCommerce-Shop sehen werden.
Demo ansehenBereit zur Integration?
Wir übernehmen die 3D-Modelle.
Sie verwalten den Code auf WooCommerce-Seite, wir übernehmen alles andere : Modellierung, Materialien, Konfiguration. In 30 Minuten zeigen wir Ihnen, was wir mit Ihrem Katalog tun können.