<viewer-3dvue> is a native Web Component. It integrates into any Smarty template — product.tpl, a module override, or a custom hook. No additional PrestaShop module required.
{* In <head> or your main layout *} <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {* That's it. *}
A native Web Component compatible with PrestaShop 1.7 and 8.x Smarty templates. No PHP dependency, no module to submit on the Addons Marketplace.
The recommended approach is to use the displayHeader hook from a custom module or directly in your template. You can also include it via product.tpl if you are working at the theme level.
src attribute on the component is the URL specific to your configurator, provided by 3DVue when your project is delivered.
public function hookDisplayHeader() { return '<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>'; } // Or directly in your Smarty template: {* <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> *}
Paste the tag in your Smarty product template, in the left column or a dedicated area. You can conditionally display it with {if} to show it only for specific categories or product references.
product.tpl and new Hummingbird sections.
{* Condition by product ID if needed *} {if $product.id == 42} <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> {/if} {* Or with debug enabled *} <viewer-3dvue name="monViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
PrestaShop generates combination selects dynamically. Add the viewer-3dvue attributes via Smarty on your combination selects, or use the JS API to listen to the native PrestaShop updateProduct event.
{* Via HTML attributes on the selects *} {foreach $product.groups as $group} <select viewer-3dvue="monViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > {foreach $group.attributes as $attr} <option value="{$attr.id_material}"> {$attr.name} </option> {/foreach} </select> {/foreach}
The component automatically listens to click and change events on any element carrying the right attributes. Compatible with native PrestaShop combination selects and swatch modules.
{foreach $colours as $c} <button viewer-3dvue="monViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{{"1":"{$c.id_mat}"}}' > {$c.name} </button> {/foreach}
updateProduct event and sync the viewer.const viewer = document.querySelector( 'viewer-3dvue[name="monViewer"]' ); // Listen for PS combination changes document.addEventListener( 'updateProduct', (e) => { const idMat = e.detail.id_material; viewer.setMaterial({"1": idMat}); } );
Full programmatic control — useful for syncing the viewer with PrestaShop's AJAX combination system, or for image capture and proof export.
const viewer = document.querySelector('viewer-3dvue[name="monViewer"]'); // Change multiple materials at once viewer.setMaterial({ "1": "0n", "3": "2b" }); // On a specific segment viewer.setMaterial({ "1": "1a" }, 1);
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64 } = e.detail; // Inject into a hidden field of the PS form 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("SVG proof:", path); });
API reference, HTML attributes, events, Smarty PrestaShop examples. Everything is documented.
View documentationNo automated ticketing. You speak directly with Matthieu, the developer who designed the API. Response within 24 hours.
Book a callTest the configurator before integrating. See exactly what your customers will see on your PrestaShop store.
View demoYou manage the code on the PrestaShop side, we handle everything else — modelling, materials, configuration. In 30 minutes, we'll show you what we can do.