Sådan bruger du Simplio3D-pluginnet WordPress i Elementor

Simplio3D WordPress-pluginet har ingen separate Elementor-widgets, og det behøver dem ikke. Hver Simplio3D-blok er også en shortcode, og du placerer den med Elementors egen Shortcode-widget, én widget pr. blok. Shortcoden viser præcis det samme som blokken, så en produktkonfigurator i Elementor fungerer ligesom en, der er bygget i WordPress-blokeditoren: én livekonfiguration, der deles af alle widgets, 3D-værktøjslinjen, dimensioner, AR, liveprisen, oversigten, tilbudsanmodninger og WooCommerce-kurven.

Denne vejledning dækker den korte vej: Find dine id'er, opbyg layoutet, tilføj til kurv, og ret de typiske fejl. Den er skrevet til pluginversion 2.0.3 og fungerer med den gratis version af Elementor.

Før du går i gang

• Simplio3D-pluginet, version 2.0.3 eller nyere, fra pluginmappen på WordPress.org, der kører i tilstanden Simplio3D v3. Nye installationer starter i denne tilstand. Et website, der er opdateret fra version 1.x, forbliver i Legacy-tilstand, indtil du skifter under Simplio3D → Migration.
• Din Simplio3D-konto er tilsluttet: Gå i WordPress til Simplio3D → Log ind på Simplio3D.
• Et publiceret projekt: Åbn Share i Simplio3D, slå delelinket til, og lad det være uden adgangskode. Hvis du begrænser indlejringsdomæner, skal du tilføje dit websites domæne.
• Elementor. Den gratis version er tilstrækkelig.
• For Tilføj til kurv: WooCommerce og et simpelt produkt med en pris.

Tilføj til kurv med WooCommerce

I blokeditoren knytter valget af et produkt i blokken Tilføj til kurv det til dit projekt. En shortcode kan ikke gøre det, så du skal først selv knytte produktet:

1. Rediger et simpelt produkt med en almindelig pris under Produkter.
2. Åbn Produktdata → Simplio3D, angiv Simplio3D-projekt som dit projekt og Kurvpris som Simplio3D-beregnet pris (verificeret på serversiden) eller som produktets egen WooCommerce-pris. Klik på Opdater.
3. Notér produkt-id'et: Hold markøren over produktet på produktlisten, eller læs post=123 i adresselinjen på redigeringssiden.
4. Erstat Submit-widgetten med [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Tilføj quantity_mode="selector", så kunderne kan vælge et antal, og after_add="cart", så de føres til kurven.

Kurven, kassen, ordremails og WooCommerce → Ordrer viser derefter konfigurationen, et billede af den og den verificerede pris.

Et produkt, der er knyttet til Simplio3D-prisen, kan kun købes via konfiguratoren, så den normale Tilføj til kurv-knap på produktets side i WooCommerce beder kunderne om at konfigurere det først. Med gratis Elementor skal du beholde konfiguratoren på sin egen side og linke til den fra produktet, for eksempel med et link som “Konfigurer din egen” i den korte beskrivelse. Med Elementor Pro kan du opbygge en Single Product-skabelon, der bruger Simplio3D Shortcode-widgets i stedet for Elementors Tilføj til kurv-widget; forhåndsvis denne opsætning, før du går live.

Indstillinger, du bruger mest

Tilføj indstillinger i shortcoden med lige anførselstegn og understregninger. Kopiering fra Word, Google Docs eller Slack kan gøre anførselstegn krøllede, og så ignorerer WordPress indstillingen.

• height="620px" mobile_height="400px" på Viewer angiver højden på desktop og på skærme med en bredde på op til 781 px.
• loading="eager" på en Viewer øverst på siden indlæser den med det samme i stedet for, når den ruller ind i visningen.
• layout="dropdown" på en Options-widget skifter valgene til en rullemenu. grid, list og buttons fungerer også, afhængigt af indstillingstypen.
• columns="4" thumbnails="small" giver plads til flere valg på hver række.
• prefix="From" tax_display="exclude" på Price tilføjer tekst før den og viser prisen før skat, hvilket matcher WooCommerce-kurven.
• summary_mode="compact" hide_defaults="yes" på Summary placerer hver indstilling på én linje og springer dem over, der er efterladt med standardværdien.
• display="hosted" på Viewer viser den komplette Simplio3D-konfigurator, inklusive indstillinger, i én enkelt widget uden behov for indstillings-id'er.
• instance="oak" på alle widgets i et sæt holder to konfiguratorer på samme side adskilt. Widgets med samme instans deler én konfiguration.

Tilpas dit Elementor-design

• Hver Shortcode-widgets fane Advanced håndterer margen, indvendig afstand, baggrund, kant og responsiv synlighed. Vieweren fylder sin kolonne, så angiv kolonne- eller containerbredden for at gøre den bredere eller smallere.
• Blokkene overtager deres skrifttype og tekstfarve fra siden. Accentfarven (det valgte valg, fokusmarkeringen og knapperne) falder tilbage til næsten sort i klassiske temaer som Hello Elementor, så indstil den til din Elementor-accent under Udseende → Tilpas → Ekstra CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Andre egenskaber omfatter --s3d-radius for hjørner, --s3d-thumb for miniaturestørrelse og --s3d-button-bg for knappen. Hvis du kun vil style én widget, skal du tilføje class="my-finish" til dens shortcode og målrette .my-finish i din CSS.