Un configuratore 3D
su PrestaShop.
2 righe di codice.
<viewer-3dvue> è un Web Component nativo. Si integra in qualsiasi template Smarty — product.tpl, override di modulo, o hook personalizzato. Senza modulo PrestaShop aggiuntivo.
{* In <head> o nel tuo layout principale *} <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {* Tutto qui. *}
Pronto in 3 passi. Senza modulo da creare.
Un Web Component nativo compatibile con i template Smarty di PrestaShop 1.7 e 8.x. Senza dipendenza PHP, senza modulo da pubblicare sull'Addons Marketplace.
Il metodo consigliato è usare l'hook displayHeader da un modulo personalizzato o direttamente nel tuo template. Puoi anche includerlo in product.tpl se lavori direttamente sul tema.
src del componente è l'URL specifico del tuo configuratore, fornito da 3DVue alla consegna del progetto.
public function hookDisplayHeader() { return '<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>'; } // O direttamente nel tuo template Smarty: {* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}
Incolla il tag nel tuo template di prodotto Smarty, nella colonna sinistra o in una zona dedicata. Puoi condizionare la visualizzazione con {if} per mostrarlo solo in certe categorie o riferimenti.
product.tpl e le nuove sezioni Hummingbird.
{* Condizionare per ID prodotto se necessario *} {if $product.id == 42} <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {/if} {* O con debug attivato *} <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
PrestaShop genera i select delle combinazioni dinamicamente. Aggiungi gli attributi viewer-3dvue tramite Smarty nei tuoi select di combinazioni, o usa l'API JS per ascoltare l'evento updateProduct nativo di PrestaShop.
{* Via attributi HTML nei select *} {foreach $product.groups as $group} <select viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > {foreach $group.attributes as $attr} <option value="{$attr.id_material}"> {$attr.name} </option> {/foreach} </select> {/foreach}
Zero JavaScript.
Tutto con attributi HTML.
Il componente ascolta automaticamente gli eventi click e change su qualsiasi elemento con gli attributi corretti. Compatibile con i select di combinazioni nativi di PrestaShop e i moduli di swatch.
{foreach $colori as $c} <button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}' > {$c.name} </button> {/foreach}
updateProduct e sincronizza il viewer.const viewer = document.querySelector( 'viewer-3dvue[name="mioViewer"]' ); // Ascoltare i cambi di combinazione PS document.addEventListener( 'updateProduct', (e) => { const idMat = e.detail.id_material; viewer.setMaterial({"1": idMat}); } );
Per i casi avanzati.
Controllo programmatico completo — utile per sincronizzare il viewer con il sistema di combinazioni AJAX di PrestaShop, o per la cattura dell'immagine e l'esportazione del BAT.
const viewer = document.querySelector('viewer-3dvue[name="mioViewer"]'); // Cambiare più materiali in una volta viewer.setMaterial({ "1": "0n", "3": "2b" }); // Su un segmento specifico viewer.setMaterial({ "1": "1a" }, 1);
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64 } = e.detail; // Iniettare in un campo nascosto del form PS 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); });
Per saperne di più
Questo configuratore nel vostro settore
Riferimento API, attributi HTML, eventi, esempi Smarty per PrestaShop. Tutto è documentato.
Vedere la documentazioneSenza ticket automatici. Parli direttamente con Matthieu, lo sviluppatore che ha progettato l'API. Risposta in 24h.
Prenotare un incontroProva il configuratore prima di integrarlo. Vedrai quello che vedranno i tuoi clienti nel tuo negozio PrestaShop.
Vedere la demoPronti a integrare?
Noi ci occupiamo dei modelli 3D.
Tu gestisci il codice in PrestaShop, noi ci occupiamo del resto — modellazione, materiali, configurazione. In 30 minuti ti diciamo cosa possiamo fare.