Så använder du insticksprogrammet Simplio3D WordPress i Elementor

Insticksprogrammet Simplio3D WordPress har inga separata Elementor-widgetar, och behöver dem inte heller. Varje block i Simplio3D är även en shortcode, och du placerar det med Elementors egen Shortcode-widget, en widget per block. Shortcoden visar exakt samma sak som blocket, så en produktkonfigurator i Elementor fungerar precis som en som byggts i blockredigeraren WordPress: en livekonfiguration som delas av alla widgetar, 3D-verktygsfältet, mått, AR, livepriset, sammanfattningen, offertförfrågningar och kundvagnen WooCommerce.

Den här guiden går igenom den korta vägen: hitta dina ID:n, bygg layouten, lägg till i kundvagnen och åtgärda vanliga misstag. Den är skriven för insticksprogramversion 2.0.3 och fungerar med gratisversionen av Elementor.

Innan du börjar

• Insticksprogrammet Simplio3D, version 2.0.3 eller senare, från insticksprogramkatalogen WordPress.org, som körs i läget Simplio3D v3. Nya installationer startar i detta läge. En webbplats som uppdaterats från version 1.x förblir i Legacy-läge tills du byter under Simplio3D → Migration.
• Ditt Simplio3D-konto är anslutet: gå till Simplio3D → Logga in på Simplio3D i WordPress.
• Ett publicerat projekt: öppna Share i Simplio3D, aktivera delningslänken och lämna den utan lösenord. Om du begränsar inbäddningsdomäner lägger du till din webbplats domän.
• Elementor. Gratisversionen räcker.
• För Lägg till i kundvagn: WooCommerce och en enkel produkt med ett pris.

Lägg till i kundvagn med WooCommerce

I blockredigeraren länkas produkten till ditt projekt när du väljer en produkt i blocket Lägg till i kundvagn. En shortcode kan inte göra det, så länka först produkten själv:

1. Redigera en enkel produkt med ordinarie pris under Produkter.
2. Öppna Produktdata → Simplio3D, ställ in Simplio3D-projekt på ditt projekt och Kundvagnspris på Simplio3D beräknat pris (verifierat på serversidan), eller på produktens eget WooCommerce-pris. Klicka på Uppdatera.
3. Notera produkt-ID:t: håll muspekaren över produkten i produktlistan eller läs post=123 i adressfältet på redigeringssidan.
4. Ersätt Submit-widgeten med [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Lägg till quantity_mode="selector" så att kunderna kan välja antal, och after_add="cart" för att ta dem till kundvagnen.

Kundvagnen, kassan, ordermejlen och WooCommerce → Ordrar visar sedan konfigurationen, en bild av den och det verifierade priset.

En produkt som är länkad med priset Simplio3D kan endast köpas via konfiguratorn, så den vanliga knappen Lägg till i kundvagn från WooCommerce på produktsidan uppmanar kunderna att konfigurera den först. Med gratisversionen av Elementor bör du ha konfiguratorn på en egen sida och länka till den från produkten, till exempel med en länk som ”Konfigurera din” i den korta beskrivningen. Med Elementor Pro kan du skapa en mall för enskilda produkter som använder Shortcode-widgetarna Simplio3D i stället för Elementors widget Lägg till i kundvagn; förhandsgranska den här konfigurationen innan du publicerar.

Inställningar du använder mest

Lägg till inställningar i shortcoden med raka citattecken och understreck. Om du kopierar från Word, Google Docs eller Slack kan citattecknen bli typografiska, och då ignorerar WordPress inställningen.

• height="620px" mobile_height="400px" på Viewer anger dess höjd på datorer och på skärmar som är upp till 781 px breda.
• loading="eager" på en Viewer högst upp på sidan laddar den direkt i stället för när den skrollas in i vyn.
• layout="dropdown" på en Options-widget ändrar dess val till en rullgardinsmeny. grid, list och buttons fungerar också, beroende på alternativtyp.
• columns="4" thumbnails="small" ger plats för fler val på varje rad.
• prefix="From" tax_display="exclude" på Price lägger till text före priset och visar priset före skatt, vilket matchar kundvagnen WooCommerce.
• summary_mode="compact" hide_defaults="yes" på Summary placerar varje alternativ på en rad och utelämnar de som lämnas med standardvärdet.
• display="hosted" på Viewer visar hela konfiguratorn Simplio3D, inklusive alternativ, i en enda widget utan att några alternativ-ID:n behövs.
• instance="oak" på varje widget i en uppsättning håller isär två konfiguratorer på samma sida. Widgetar med samma instans delar en konfiguration.

Matcha din Elementor-design

• Fliken Avancerat i varje Shortcode-widget hanterar marginaler, utfyllnad, bakgrund, kantlinje och responsiv synlighet. Visaren fyller sin kolumn, så ange kolumnens eller behållarens bredd för att göra den bredare eller smalare.
• Blocken hämtar typsnitt och textfärg från sidan. Accentfärgen (det valda alternativet, fokusmarkeringen och knapparna) återgår till nästan svart i klassiska teman som Hello Elementor, så ställ in den på din Elementor-accent under Utseende → Anpassa → Ytterligare CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Andra egenskaper omfattar --s3d-radius för hörn, --s3d-thumb för miniatyrbildsstorlek och --s3d-button-bg för knappen. Om du vill utforma endast en widget lägger du till class="my-finish" i dess shortcode och riktar in .my-finish i din CSS.