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. *}
Crea il tuo configuratore da solo.
La guida qui sopra è rivolta agli sviluppatori che integrano un configuratore realizzato su misura da 3DVue. Se hai già i file 3D dei tuoi prodotti e vuoi creare e pubblicare il tuo configuratore da solo, senza scrivere codice, usa il software 3DVue. Per ogni prodotto, genera :
- Un link diretto : l'URL del configuratore, da inserire in una pagina, un'email o un social network.
- Un codice iframe : da incollare in un modulo Blocco HTML, nella descrizione del prodotto o in una pagina CMS di PrestaShop.
- Un widget : uno script da incollare una volta nell'header del tema tramite lo stesso modulo Blocco HTML, che aggiunge un pulsante « Vedi in 3D » sulle tue pagine prodotto.
Gratis per 14 giorni, poi a partire da 49 € + IVA al mese, senza commissioni sulle tue vendite.
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.
-
1Caricare lo script tramite un hook
Il metodo consigliato è usare l'hook
displayHeaderda un modulo personalizzato o direttamente nel tuo template. Puoi anche includerlo inproduct.tplse lavori direttamente sul tema.Lo script CDN è pubblico : non è necessario ospitarlo. L'attributosrcdel componente è l'URL specifico del tuo configuratore, fornito da 3DVue alla consegna del progetto.MioModulo.php : via hookpublic 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> *}
-
2Posizionare il componente in product.tpl
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.PrestaShop 8 usa un nuovo sistema di template. Il tag funziona in entrambi i contesti : il vecchioproduct.tple le nuove sezioni Hummingbird.product.tpl{* 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>
-
3Collegare le combinazioni di PrestaShop
PrestaShop genera i select delle combinazioni dinamicamente. Aggiungi gli attributi
viewer-3dvuetramite Smarty nei tuoi select di combinazioni, o usa l'API JS per ascoltare l'eventoupdateProductnativo di PrestaShop.product.tpl + JS : combinazioni{* 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); });
Domande frequenti
È necessario installare un modulo in PrestaShop?+
È compatibile con PrestaShop 1.7 e 8.x?+
Come collego le combinazioni di PrestaShop al viewer?+
Posso mostrare il viewer solo su certi prodotti?+
Quanto costa un configuratore 3D per PrestaShop?+
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.