Pereiti prie turinio
Simplio logoSIMPLIO
Išbandykite nemokamai
Grįžti į tinklaraštį
wordpresselementortutorialwoocommerce

Kaip naudoti „Simplio3D WordPress“ įskiepį Elementor

Simplio3D·
Kaip naudoti „Simplio3D WordPress“ įskiepį Elementor

Simplio3D WordPress įskiepis neturi atskirų Elementor valdiklių ir jiems jų nereikia. Kiekvienas Simplio3D blokas taip pat yra trumpasis kodas, kurį įterpiate naudodami paties Elementor Shortcode valdiklį – po vieną valdiklį kiekvienam blokui. Trumpasis kodas pateikia lygiai tą patį, ką ir blokas, todėl produkto konfigūratorius Elementor aplinkoje veikia taip pat, kaip sukurtas WordPress blokų rengyklėje: viena tiesioginė konfigūracija, bendrinama visuose valdikliuose, 3D įrankių juosta, matmenys, AR, tiesioginė kaina, suvestinė, kainos pasiūlymų užklausos ir WooCommerce krepšelis.

Šiame vadove pateikiamas trumpiausias kelias: raskite savo ID, sukurkite išdėstymą, pridėkite į krepšelį ir ištaisykite įprastas klaidas. Jis skirtas 2.0.3 įskiepio versijai ir veikia su nemokama Elementor versija.

Publikuotas spintos konfigūratorius: 3D vaizde rodomos pločio, aukščio ir gylio etiketės, o šalia pasirenkamas durų stilius, durų skaičius, dydis ir medžiaga
Visi valdikliai naudoja vieną tiesioginę konfigūraciją: pakeiskite dydį, durų stilių ar medžiagą, ir 3D vaizdas bus atnaujintas iš karto.

Prieš pradedant

  • Simplio3D įskiepis, 2.0.3 ar naujesnė versija, iš WordPress.org įskiepių katalogo, veikiantis Simplio3D v3 režimu. Nauji diegimai pradedami šiuo režimu. Iš 1.x versijos atnaujinta svetainė lieka Legacy režime, kol nepersijungsite per Simplio3D → Migration.
  • Prijungta jūsų Simplio3D paskyra: WordPress eikite į Simplio3D → Log in to Simplio3D.
  • Paskelbtas projektas: Simplio3D atidarykite Share, įjunkite bendrinimo nuorodą ir palikite ją be slaptažodžio. Jei ribojate įterpimo domenus, pridėkite savo svetainės domeną.
  • Elementor. Pakanka nemokamos versijos.
  • Funkcijai Add to Cart: WooCommerce ir paprastas produktas su kaina.
Simplio3D paskyros ir nustatymų langas WordPress platformoje, kuriame rodoma prijungta paskyra, puslapio „Sukurti konfigūratorių“ kontrolinis sąrašas ir mygtukas „Naujas puslapis: peržiūros priemonė + šoninė juosta“
Simplio3D → Paskyra ir nustatymai: čia prijunkite savo paskyrą. „Naujas puslapis: peržiūros priemonė + šoninė juosta“ sukuria juodraštį, iš kurio nukopijuosite trumpuosius kodus.

Penki trumpieji kodai

Kiekvieną įterpkite į atskirą Elementor Shortcode valdiklį. Pakeiskite PROJECT-ID ir OPTION-ID savo ID; toliau pateikti veiksmai parodys, kur juos rasti.

Simplio3D trumpieji kodai, skirti Elementor
BlokasTrumpasis kodasKą jis rodo
Peržiūros priemonė[simplio3d block="viewer" project="PROJECT-ID"]Interaktyvus 3D vaizdas su įrankių juosta, AR ir matmenimis
Parinktys[simplio3d block="options" project="PROJECT-ID" option="OPTION-ID"]Viena parinktis, pavyzdžiui, medžiaga, dydis arba jungiklis. Kiekvienai parinkčiai naudokite po vieną valdiklį.
Kaina[simplio3d block="price" project="PROJECT-ID"]Dabartinė kaina
Santrauka[simplio3d block="summary" project="PROJECT-ID"]Konfigūracija paprastais žodžiais
Pateikti / Įdėti į krepšelį[simplio3d block="action" project="PROJECT-ID"]Pasiūlymo užklausos forma arba mygtukas „Įdėti į krepšelį“ (žr. toliau)

Sukurkite produkto konfigūratorių naudodami Elementor

Nuo tuščio puslapio iki veikiančio konfigūratoriaus.

  1. Raskite savo projekto ID

    Projekto ID – tai 36 simbolių kodas, esantis po /share/ jūsų bendrinimo nuorodoje arba po /project/ adreso juostoje, kai projektas atidarytas Simplio3D redaktoriuje. Jei projektas naujas arba ką tik paskelbtas, vieną kartą spustelėkite Simplio3D → Diagnostika → Tikrinti ryšį WordPress, kad jūsų svetainė apie jį sužinotų.

  2. Leiskite blokų redaktoriui sukurti trumpuosius kodus

    Parinkčių ID nerodomi Simplio3D, todėl leiskite papildiniui sukurti trumpuosius kodus už jus. Eikite į Simplio3D → Paskyra ir nustatymai → Naujas puslapis: peržiūros priemonė + šoninė juosta – bus sukurtas juodraštinis puslapis su visais blokais reikiamose vietose. Peržiūros priemonėje pasirinkite savo projektą, kiekviename parinkčių bloke pasirinkite parinktį ir sukonfigūruokite juos pagal poreikį. Tada kiekviename bloke naudokite Kopijuoti trumpąjį kodą (bloko nustatymai → išplėstiniai Simplio3D): jame bus įtraukti visi pakeisti nustatymai. Palikite juodraštį nepaskelbtą kaip savo ID sąrašą.

  3. Pridėkite dviejų stulpelių išdėstymą

    Atidarykite savo puslapį naudodami „Edit with Elementor“ ir pridėkite konteinerį su dviem stulpeliais – maždaug 60 % ir 40 %. Senesnėse Elementor svetainėse naudokite Section su dviem stulpeliais.

  4. Įdėkite 3D peržiūros priemonę

    Elements skydelyje suraskite Shortcode, nutempkite valdiklį į kairįjį stulpelį ir įklijuokite Viewer trumpąjį kodą. Po akimirkos redaktoriaus peržiūroje pasirodys veikiantis 3D vaizdas.

  5. Pridėkite parinktis, kainą, suvestinę ir mygtuką

    Dešiniajame stulpelyje pridėkite po vieną Shortcode valdiklį kiekvienai parinkčiai, tada po vieną – Price, Summary ir Submit arba Add to Cart. Visi valdikliai, susieti su tuo pačiu projektu, naudoja vieną bendrą veikiančią konfigūraciją, o atskiri valdikliai leidžia keisti kiekvienos dalies eiliškumą, tarpus ir matomumą naudojant Elementor valdiklius.

  6. Paskelbkite ir išbandykite

    Paskelbkite, atidarykite puslapį ir pakeiskite kiekvieną parinktį: 3D vaizdas, kaina ir suvestinė turėtų būti atnaujinami kartu. Taip pat patikrinkite Elementor mobiliąją peržiūrą ir tikrą telefoną – valdikliai bus sudėti vienas po kitu, o peržiūros priemonė persijungs į mobiliesiems skirtą aukštį.

WordPress blokų redaktorius su Simplio3D Viewer ir Options blokais spintos konfigūratoriui bei Options bloko nustatymai, skirti pasirinkti parinktį ir jos išdėstymą
2 veiksmas: sukonfigūruokite kiekvieną bloką blokų redaktoriuje, tada nukopijuokite jo trumpąjį kodą.
Elementor redaktorius su Simplio3D trumpųjų kodų valdikliais: 3D spintos konfigūratorius ir jo parinktys rodomi tiesiogiai puslapio peržiūroje
3–5 veiksmai: įklijuokite kiekvieną trumpąjį kodą į atskirą Elementor trumpojo kodo valdiklį.

Pridėjimas į krepšelį su WooCommerce

Blokų rengyklėje pasirinkus produktą Add to Cart bloke, jis susiejamas su jūsų projektu. Trumpasis kodas to padaryti negali, todėl pirmiausia susiekite produktą patys:

  1. Skiltyje Products redaguokite paprastą produktą su įprasta kaina.
  2. Atidarykite Product data → Simplio3D, nustatykite Simplio3D project į savo projektą ir Cart price į Simplio3D calculated price (verified server-side) arba į paties produkto WooCommerce kainą. Spustelėkite Update.
  3. Įsidėmėkite produkto ID: užveskite pelės žymeklį ant produkto Products sąraše arba redagavimo ekrano adreso juostoje perskaitykite post=123.
  4. Submit valdiklį pakeiskite į [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Pridėkite quantity_mode="selector", kad pirkėjai galėtų pasirinkti kiekį, ir after_add="cart", kad jie būtų nukreipti į krepšelį.

Tada krepšelyje, atsiskaitymo puslapyje, užsakymų el. laiškuose ir WooCommerce → Orders bus rodoma konfigūracija, jos paveikslėlis ir patvirtinta kaina.

Produktą, susietą su Simplio3D kaina, galima įsigyti tik per konfigūratorių, todėl įprastas WooCommerce mygtukas Add to cart produkto puslapyje prašo pirkėjų pirmiausia jį sukonfigūruoti. Naudodami nemokamą Elementor versiją, laikykite konfigūratorių atskirame puslapyje ir pateikite į jį nuorodą iš produkto puslapio, pavyzdžiui, trumpame aprašyme įdėkite nuorodą „Sukonfigūruokite savąjį“. Naudodami Elementor Pro galite sukurti Single Product šabloną, kuriame vietoje Elementor Add to Cart valdiklio naudojami Simplio3D Shortcode valdikliai; prieš paskelbdami būtinai peržiūrėkite šią sąranką.

Dažniausiai naudojami nustatymai

Nustatymus pridėkite trumpajame kode, naudodami tiesias kabutes ir apatinius brūkšnius. Kopijuojant iš Word, Google Docs ar Slack, kabutės gali tapti riestinės, todėl WordPress nustatymą ignoruos.

  • height="620px" mobile_height="400px" Viewer valdiklyje nustato jo aukštį staliniuose kompiuteriuose ir ekranuose, kurių plotis iki 781 px.
  • loading="eager" Viewer valdiklyje puslapio viršuje jį įkelia iš karto, o ne tada, kai jis patenka į matomą sritį slenkant puslapį.
  • layout="dropdown" Options valdiklyje pasirinkimus pakeičia į išskleidžiamąjį sąrašą. Taip pat veikia grid, list ir buttons, priklausomai nuo parinkties tipo.
  • columns="4" thumbnails="small" leidžia sutalpinti daugiau pasirinkimų kiekvienoje eilutėje.
  • prefix="From" tax_display="exclude" Price valdiklyje prideda tekstą prieš kainą ir rodo kainą be mokesčių, taip kaip WooCommerce krepšelyje.
  • summary_mode="compact" hide_defaults="yes" Summary valdiklyje kiekvieną parinktį pateikia vienoje eilutėje ir praleidžia tas, kurioms palikta numatytoji reikšmė.
  • display="hosted" Viewer valdiklyje viename valdiklyje parodo visą Simplio3D konfigūratorių, įskaitant parinktis, todėl nereikia parinkčių ID.
  • instance="oak" kiekviename rinkinio valdiklyje atskiria du konfigūratorius viename puslapyje. Valdikliai su tuo pačiu egzemplioriumi bendrina vieną konfigūraciją.
Simplio3D kainos bloko nustatymai blokų redaktoriuje su etiketės, valiutos, priešdėlio ir priesagos laukais, šalia Eames kėdės konfigūratoriaus ir jo mygtuko „Įdėti į krepšelį“
Kainos bloko nustatymai blokų redaktoriuje. Kiekvienas jų turi trumpojo kodo atributą, o parinktis „Kopijuoti trumpąjį kodą“ įtraukia ir jūsų pakeistus atributus.

Priderinkite prie savo Elementor dizaino

  • Kiekvieno Shortcode valdiklio skirtuke Advanced nustatomi tarpai išorėje, viduje, fonas, kraštinė ir matomumas skirtinguose įrenginiuose. Peržiūros valdiklis užpildo savo stulpelį, todėl norėdami jį praplatinti ar susiaurinti nustatykite stulpelio arba konteinerio plotį.
  • Blokai perima šriftą ir teksto spalvą iš puslapio. Akcento spalva (pasirinkta parinktis, fokusavimo kontūras ir mygtukai) klasikinėse temose, pvz., Hello Elementor, pagal numatytuosius nustatymus būna beveik juoda, todėl nustatykite ją kaip Elementor akcento spalvą per Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
  • Kitos ypatybės apima --s3d-radius kampams, --s3d-thumb miniatiūrų dydžiui ir --s3d-button-bg mygtukui. Jei norite stilizuoti tik vieną valdiklį, į jo trumpąjį kodą pridėkite class="my-finish" ir CSS kode taikykite .my-finish.

Trikčių šalinimas

Papildinys nėra aktyvus arba neteisingas trumpojo kodo pavadinimas. Naudokite [simplio3d …], o ne [simplio3d_configurator …], kuris yra senasis trumpasis kodas.

Parduodate per WooCommerce?

Kaip Simplio3D perduoda nustatytą kainą, konfigūraciją ir jos vaizdą į WooCommerce krepšelį.

WooCommerce konfigūratorius →

Pirmiausia kuriate konfigūratorių?

Kaip projektas nuo 3D modelio pereina prie parinkčių, sąlyginės logikos ir kainodaros, prieš pasiekdamas jūsų svetainę.

Kaip kuriamas konfigūratorius →

Iš tinklaraščio

Vadovai, pamokos ir naujienos iš Simplio3D komandos.

Visi įrašai

Kurkite, diekite ir plėskite 3D prekybą.

Naudokite 3D produktų konfigūratorių, kad didintumėte pardavimus ir generuotumėte pasiūlymus tiesiai iš savo svetainės

Išbandykite nemokamaiUžsisakykite demonstraciją

Susiję straipsniai

Vertiname jūsų privatumą

Naudojame slapukus, kad ši svetainė veiktų, įsimintume jūsų nuostatas ir, gavę jūsų sutikimą, matuotume srautą, kad galėtume tobulinti Simplio3D. Priimkite visus, atmeskite nebūtinus arba pasirinkite, kuriuos slapukus leisti. Slapukų politika.