De Simplio3D WordPress-plugin gebruiken in Elementor

De plugin Simplio3D WordPress heeft geen aparte Elementor-widgets nodig. Elk Simplio3D-blok is ook een shortcode, die je plaatst met Elementor’s eigen Shortcode-widget, één widget per blok. De shortcode toont precies wat het blok toont, dus een productconfigurator in Elementor werkt net als een configurator die is gebouwd in de WordPress-blokkeneditor: één live configuratie die door alle widgets wordt gedeeld, de 3D-werkbalk, afmetingen, AR, de liveprijs, de samenvatting, offerteaanvragen en de winkelwagen van WooCommerce.

Deze handleiding behandelt de korte route: je ID’s vinden, de lay-out bouwen, aan de winkelwagen toevoegen en de gebruikelijke fouten oplossen. Hij is geschreven voor pluginversie 2.0.3 en werkt met de gratis versie van Elementor.

Voordat je begint

• De plugin Simplio3D, versie 2.0.3 of nieuwer, uit de plugindirectory van WordPress.org, uitgevoerd in de modus Simplio3D v3. Nieuwe installaties starten hierin. Een site die is bijgewerkt vanaf versie 1.x blijft in de Legacy-modus totdat je overschakelt via Simplio3D → Migratie.
• Je gekoppelde Simplio3D-account: ga in WordPress naar Simplio3D → Inloggen bij Simplio3D.
• Een gepubliceerd project: open in Simplio3D Delen, schakel de deellink in en laat deze zonder wachtwoord. Beperk je embed-domeinen, voeg dan het domein van je site toe.
• Elementor. De gratis versie is voldoende.
• Voor Toevoegen aan winkelwagen: WooCommerce en een eenvoudig product met een prijs.

Toevoegen aan winkelwagen met WooCommerce

Wanneer je in de blokeditor een product kiest in het blok Toevoegen aan winkelwagen, wordt het aan je project gekoppeld. Een shortcode kan dat niet, dus koppel het product eerst zelf:

1. Bewerk in Producten een eenvoudig product met een reguliere prijs.
2. Open Productgegevens → Simplio3D, stel Simplio3D-project in op je project en Winkelwagenprijs op Simplio3D berekende prijs (geverifieerd aan de serverzijde), of op de eigen WooCommerce-prijs van het product. Klik op Bijwerken.
3. Noteer de product-ID: houd de muis boven het product in de lijst Producten of lees post=123 in de adresbalk van het bewerkscherm.
4. Vervang de Submit-widget door [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Voeg quantity_mode="selector" toe zodat klanten een aantal kunnen kiezen, en after_add="cart" om ze naar de winkelwagen te sturen.

De winkelwagen, het afrekenen, order-e-mails en WooCommerce → Bestellingen tonen vervolgens de configuratie, een afbeelding ervan en de geverifieerde prijs.

Een product dat is gekoppeld aan de prijs van Simplio3D kan alleen via de configurator worden gekocht. Daarom vraagt de normale knop Toevoegen aan winkelwagen van WooCommerce op de productpagina klanten om het eerst te configureren. Gebruik je de gratis versie van Elementor, plaats de configurator dan op een eigen pagina en link er vanaf het product naar, bijvoorbeeld met een link “Stel de jouwe samen” in de korte beschrijving. Met Elementor Pro kun je een Single Product-sjabloon maken die de Simplio3D Shortcode-widgets gebruikt in plaats van Elementor’s widget Toevoegen aan winkelwagen; bekijk die opzet vooraf voordat je live gaat.

Instellingen die je het meest gebruikt

Voeg instellingen toe binnen de shortcode, met rechte aanhalingstekens en underscores. Kopiëren vanuit Word, Google Docs of Slack kan aanhalingstekens gebogen maken, waarna WordPress de instelling negeert.

• height="620px" mobile_height="400px" op de Viewer bepaalt de hoogte op desktop en op schermen tot 781 px breed.
• loading="eager" op een Viewer bovenaan de pagina laadt deze direct in plaats van pas wanneer hij in beeld scrollt.
• layout="dropdown" op een Options-widget zet de keuzes om naar een dropdownmenu. grid, list en buttons werken ook, afhankelijk van het optietype.
• columns="4" thumbnails="small" plaatst meer keuzes op elke rij.
• prefix="From" tax_display="exclude" bij de Price voegt er tekst voor toe en toont de prijs exclusief belasting, wat overeenkomt met de winkelwagen van WooCommerce.
• summary_mode="compact" hide_defaults="yes" bij de Summary plaatst elke optie op één regel en slaat de opties over die op de standaardwaarde staan.
• display="hosted" op de Viewer toont de volledige configurator van Simplio3D, inclusief opties, in één widget, zonder dat optie-ID’s nodig zijn.
• instance="oak" op elke widget van een set houdt twee configuratoren op één pagina gescheiden. Widgets met dezelfde instantie delen één configuratie.

Stem af op je Elementor-ontwerp

• Het tabblad Geavanceerd van elke Shortcode-widget regelt marge, padding, achtergrond, rand en responsieve zichtbaarheid. De viewer vult zijn kolom, dus stel de breedte van de kolom of container in om hem breder of smaller te maken.
• De blokken nemen hun lettertype en tekstkleur over van de pagina. De accentkleur (de geselecteerde keuze, de focusring en de knoppen) valt bij klassieke thema’s zoals Hello Elementor terug op bijna zwart. Stel deze daarom in op je Elementor-accent via Weergave → Aanpassen → Extra CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Andere eigenschappen zijn onder meer --s3d-radius voor hoeken, --s3d-thumb voor de thumbnailgrootte en --s3d-button-bg voor de knop. Om slechts één widget op te maken, voeg je class="my-finish" toe aan de shortcode en richt je je in je CSS op .my-finish.