Jätka sisule
Simplio logoSIMPLIO
Proovi tasuta
Tagasi blogi juurde
wordpresselementortutorialwoocommerce

Kuidas kasutada Elementor'is Simplio3D WordPress pluginat

Simplio3D·
Kuidas kasutada Elementor'is Simplio3D WordPress pluginat

Pluginil Simplio3D WordPress ei ole eraldi Elementori vidinaid ja neid polegi vaja. Iga plokk Simplio3D on ühtlasi lühikood ning lisate selle Elementori enda vidinaga Shortcode, ühe vidina iga ploki kohta. Lühikood kuvab täpselt sama, mida plokk, seega töötab Elementoris olev tootekonfiguraator samamoodi nagu plokiredaktoris WordPress loodud konfiguratsioon: üks reaalajas konfiguratsioon, mida jagavad kõik vidinad, 3D-tööriistariba, mõõtmed, AR, reaalajas hind, kokkuvõte, hinnapäringud ja ostukorv WooCommerce.

See juhend käsitleb kiiret teed: leidke oma ID-d, looge paigutus, lisage ostukorvi ja parandage levinud vead. See on kirjutatud plugina versiooni 2.0.3 jaoks ning töötab Elementori tasuta versiooniga.

Avaldatud garderoobikonfiguraator: 3D-vaates kuvatakse laiuse, kõrguse ja sügavuse märgised, samal ajal kui selle kõrval valitakse ukse stiil, uste arv, suurus ja materjal
Kõik vidinad jagavad üht reaalajas konfiguratsiooni: muutke suurust, ukse stiili või materjali ning 3D-vaade uueneb kohe.

Enne alustamist

  • Plugin Simplio3D, versioon 2.0.3 või uuem, mis on saadaval pluginate kataloogis WordPress.org ja töötab režiimis Simplio3D v3. Uued installid alustavad selles režiimis. Versioonilt 1.x uuendatud sait jääb pärandrežiimi, kuni lülitate selle ümber menüüs Simplio3D → Migration.
  • Ühendatud konto Simplio3D: minge jaotises WordPress menüüsse Simplio3D → Log in to Simplio3D.
  • Avaldatud projekt: avage jaotises Simplio3D Share, lülitage jagamislink sisse ning jätke see paroolita. Kui piirate manustamiseks lubatud domeene, lisage oma saidi domeen.
  • Elementor. Tasuta versioonist piisab.
  • Ostukorvi lisamiseks: WooCommerce ja hinnaga lihttoode.
Simplio3D konto- ja seadete vaade rakenduses WordPress, kus on ühendatud konto, lehe „Koosta konfiguraator” kontrollnimekiri ning uus leht: nupp „Vaatur + külgriba”
Simplio3D → Konto ja seaded: ühendage oma konto siin. Uus leht: „Vaatur + külgriba” loob mustandi, millest saate lühikoodid kopeerida.

Viis lühikoodi

Igaüks lisatakse oma Elementor Shortcode'i vidinasse. Asendage PROJECT-ID ja OPTION-ID oma ID-dega; allolevad juhised näitavad, kust need leida.

Simplio3D lühikoodid Elementori jaoks
PlokkLühikoodMida see kuvab
Vaatur[simplio3d block="viewer" project="PROJECT-ID"]Interaktiivne 3D-vaade koos tööriistariba, AR ja mõõtmetega
Valikud[simplio3d block="options" project="PROJECT-ID" option="OPTION-ID"]Üks valik, näiteks materjal, suurus või lüliti. Kasutage iga valiku jaoks ühte vidinat.
Hind[simplio3d block="price" project="PROJECT-ID"]Reaalajas hind
Kokkuvõte[simplio3d block="summary" project="PROJECT-ID"]Konfiguratsioon lihtsas keeles
Esita / lisa ostukorvi[simplio3d block="action" project="PROJECT-ID"]Hinnapäringu vorm või nupp „Lisa ostukorvi” (vt allpool)

Loo Elementoriga tootekonfiguraator

Tühjalt lehelt toimiva konfiguraatorini.

  1. Leia oma projekti ID

    Projekti ID on 36 tähemärgist koosnev kood, mis järgneb jagamislingis osale /share/ või aadressiribal osale /project/, kui projekt on avatud Simplio3D redaktoris. Kui projekt on uus või äsja avaldatud, klõpsa üks kord Simplio3D → Diagnostics → Test connection jaotises WordPress, et sinu sait selle ära tunneks.

  2. Lase plokiredaktoril lühikoodid kirjutada

    Valikute ID-sid Simplio3D ei kuvata, seega lase pluginil lühikoodid enda eest kirjutada. Ava Simplio3D → Account & Settings → New page: Viewer + sidebar, mis loob mustandlehe, kus kõik plokid on paigas. Vali Vieweris oma projekt, vali igas Optionsi plokis valik ja seadista need soovitud viisil. Seejärel kasuta igas plokis käsku Copy shortcode (ploki seaded → Simplio3D advanced): see sisaldab kõiki sinu muudetud seadeid. Hoia mustand avaldamata oma ID-de loendina.

  3. Lisa kahe veeruga paigutus

    Avage oma leht valikuga „Muuda Elementoriga“ ja lisage kahe veeruga konteiner, ligikaudu 60% ja 40%. Vanematel Elementori saitidel kasutage kahe veeruga jaotist.

  4. Paigutage 3D-vaatur

    Otsige elementide paneelilt Shortcode, lohistage vidin vasakusse veergu ja kleepige sinna Vieweri lühikood. Hetke pärast kuvatakse redaktori eelvaates reaalajas 3D-vaade.

  5. Lisage valikud, hind, kokkuvõte ja nupp

    Lisage paremasse veergu iga valiku jaoks üks Shortcode'i vidin ning seejärel üks hindade, kokkuvõtte ja nupu „Saada“ või „Lisa ostukorvi“ jaoks. Kõik sama projektiga vidinad jagavad üht reaalajas konfiguratsiooni ning eraldi vidinad võimaldavad teil Elementori enda juhtelementidega iga osa ümber järjestada, vahedega paigutada ja peita.

  6. Avaldage ja testige

    Avaldage leht, avage see ja muutke iga valikut: 3D-vaade, hind ja kokkuvõte peaksid koos uuenema. Kontrollige ka Elementori mobiilivaadet ja päris telefoni; vidinad paigutuvad üksteise alla ning vaatur lülitub mobiilikõrgusele.

WordPress plokiredaktor koos Simplio3D Vieweri ja valikute plokkidega garderoobi konfiguraatori jaoks ning valikute ploki seaded valiku ja selle paigutuse määramiseks
2. samm: seadistage iga plokk plokiredaktoris, seejärel kopeerige selle lühikood.
Elementor redaktor koos Simplio3D lühikoodi vidinatega: 3D-kapikonfiguraator ja selle valikud on lehe eelvaates aktiivsed
3.–5. samm: kleepige iga lühikood eraldi Elementor Shortcode'i vidinasse.

Ostukorvi lisamine teenusega WooCommerce

Plokiredaktoris seob toote valimine plokis Add to Cart selle teie projektiga. Lühikood seda teha ei saa, seega siduge toode esmalt ise:

  1. Muutke jaotises Products hinnaga lihttoodet.
  2. Avage Product data → Simplio3D, määrake projektiks Simplio3D oma projekt ja Cart price väärtuseks Simplio3D calculated price (verified server-side) või toote enda WooCommerce hind. Klõpsake Update.
  3. Jätke toote ID meelde: viige kursor toodete loendis toote kohale või lugege redigeerimisvaate aadressiribalt post=123.
  4. Asendage Submiti vidin vidinaga [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Lisage quantity_mode="selector", et ostjad saaksid valida koguse, ning after_add="cart", et suunata nad ostukorvi.

Seejärel kuvavad ostukorv, kassaleht, tellimuse e-kirjad ja WooCommerce → Orders konfiguratsiooni, selle pildi ja kinnitatud hinna.

Hinnaga Simplio3D seotud toodet saab osta ainult konfiguraatori kaudu, mistõttu küsib WooCommerce tavapärane ostukorvi lisamise nupp tootelehel ostjatelt esmalt selle konfigureerimist. Elementori tasuta versiooniga hoidke konfiguraator eraldi lehel ja linkige sellele tootelt, näiteks lühikirjelduses oleva lingiga „Konfigureeri enda oma”. Elementor Proga saate luua ühe toote malli, mis kasutab Elementori Add to Cart vidina asemel lühikoodividinaid Simplio3D; enne avaldamist eelvaadake seda seadistust.

Kõige sagedamini kasutatavad seaded

Lisage seaded lühikoodi sisse sirgete jutumärkide ja alakriipsudega. Wordist, Google Docsist või Slackist kopeerimine võib muuta jutumärgid kaarjateks ning WordPress ignoreerib siis seda seadet.

  • height="620px" mobile_height="400px" Vieweris määrab selle kõrguse töölaual ja kuni 781 piksli laiustel ekraanidel.
  • loading="eager" lehe ülaosas asuval Vieweri vidinal laadib selle kohe, mitte alles siis, kui see kerimisel nähtavale jõuab.
  • layout="dropdown" Optionsi vidinal muudab valikud rippmenüüks. Sõltuvalt valiku tüübist toimivad ka grid, list ja buttons.
  • columns="4" thumbnails="small" mahutab igale reale rohkem valikuid.
  • prefix="From" tax_display="exclude" Price'i juures lisab selle ette teksti ja kuvab hinna enne makse, mis ühtib ostukorviga WooCommerce.
  • summary_mode="compact" hide_defaults="yes" Summary juures paigutab iga valiku eraldi reale ja jätab vahele vaikeseadistusele jäetud valikud.
  • display="hosted" Vieweris kuvab kogu konfiguraatori Simplio3D, koos valikutega, ühes vidinas ilma valikute ID-deta.
  • instance="oak" iga komplekti vidina juures hoiab kaks samal lehel olevat konfiguraatorit eraldi. Sama eksemplariga vidinad jagavad üht konfiguratsiooni.
Plokiredaktoris olevad Simplio3D hinnaploki seaded koos sildi, valuuta, eesliite ja järelliite väljadega Eamesi tooli konfiguraatori ja selle nupu „Lisa ostukorvi” kõrval
Hinnaploki seaded plokiredaktoris. Igal plokil on lühikoodi atribuut ning valik „Kopeeri lühikood” sisaldab ka teie tehtud muudatusi.

Kooskõlastage oma Elementori disainiga

  • Iga Shortcode'i vidina vahekaart Advanced haldab välis- ja sisemarginaale, tausta, äärist ning reageerivat nähtavust. Viewer täidab oma veeru, seega määrake veeru või konteineri laius, et muuta see laiemaks või kitsamaks.
  • Plokid kasutavad lehe fonti ja tekstivärvi. Rõhuvärv (valitud valik, fookusrõngas ja nupud) muutub klassikalistes teemades, näiteks Hello Elementor, vaikimisi peaaegu mustaks. Seadke see oma Elementori rõhuvärviks menüüs Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
  • Muude omaduste hulka kuuluvad --s3d-radius nurkade jaoks, --s3d-thumb pisipiltide suuruse jaoks ja --s3d-button-bg nupu jaoks. Ainult ühe vidina kujundamiseks lisage selle lühikoodile class="my-finish" ja sihtige CSS-is .my-finish.

Tõrkeotsing

Plugin ei ole aktiivne või lühikoodi nimi on vale. Kasutage [simplio3d …], mitte [simplio3d_configurator …], mis on pärandlühikood.

Müük WooCommerce kaudu?

Kuidas Simplio3D edastab määratud hinna, konfiguratsiooni ja selle pildi WooCommerce ostukorvi.

Konfiguraator platvormile WooCommerce →

Kas ehitada konfiguraator kõigepealt?

Kuidas projekt liigub 3D-mudelist valikute, tingimusliku loogika ja hinnastamiseni, enne kui see jõuab teie veebisaidile.

Kuidas konfiguraatorit luuakse →

Blogist

Juhendid, õpetused ja uudised Simplio3D meeskonnalt.

Kõik postitused

Ehitage, juurutage ja skaleerige 3D-kaubandust.

Omage 3D-tootekonfigureerijat müügi suurendamiseks ja pakkumiste loomiseks otse oma veebisaidelt

Proovige tasutaBroneeri demo

Seotud artiklid

Teie privaatsus on meile oluline

Kasutame küpsiseid selle saidi käitamiseks, teie eelistuste meeldejätmiseks ja — teie nõusolekul — liikluse mõõtmiseks, et saaksime parandada Simplio3D. Nõustuge kõigega, lükake tagasi mittevajalikud või valige, millised küpsised lubada. Küpsiste poliitika.