Näin käytät Simplio3D WordPress -lisäosaa Elementorissa

Simplio3D WordPress -lisäosassa ei ole erillisiä Elementor-widgetejä, eikä niitä tarvita. Jokainen Simplio3D-lohko on myös lyhytkoodi, ja sijoitat sen Elementorin omalla Shortcode-widgetillä, yhden widgetin kutakin lohkoa kohti. Lyhytkoodi tulostaa täsmälleen saman sisällön kuin lohko, joten Elementorin tuotekonfiguraattori toimii aivan kuten WordPress-lohkieditorissa rakennettu: yksi reaaliaikainen määritys, jonka kaikki widgetit jakavat, 3D-työkalurivi, mitat, AR, reaaliaikainen hinta, yhteenveto, tarjouspyynnöt ja WooCommerce-ostoskori.

Tässä oppaassa käydään läpi nopea reitti: etsi tunnuksesi, rakenna asettelu, lisää ostoskoriin ja korjaa tavallisimmat virheet. Se on kirjoitettu lisäosan versiolle 2.0.3 ja toimii Elementorin maksuttomalla versiolla.

Ennen kuin aloitat

• Simplio3D-lisäosa, versio 2.0.3 tai uudempi, WordPress.org-lisäosahakemistosta, käytössä Simplio3D v3 -tilassa. Uudet asennukset käynnistyvät tässä tilassa. Versiosta 1.x päivitetty sivusto pysyy Legacy-tilassa, kunnes vaihdat tilan kohdassa Simplio3D → Migration.
• Simplio3D-tilisi yhdistettynä: siirry kohdassa WordPress kohtaan Simplio3D → Kirjaudu palveluun Simplio3D.
• Julkaistu projekti: avaa Simplio3D-palvelussa Share, ota jakolinkki käyttöön ja jätä se ilman salasanaa. Jos rajoitat upotettavia verkkotunnuksia, lisää sivustosi verkkotunnus.
• Elementor. Maksuton versio riittää.
• Ostoskoriin lisäämistä varten: WooCommerce ja yksinkertainen tuote, jolla on hinta.

Lisää ostoskoriin palvelussa WooCommerce

Lohkoeditorissa tuotteen valitseminen Add to Cart -lohkossa yhdistää sen projektiisi. Lyhytkoodi ei voi tehdä tätä, joten yhdistä tuote ensin itse:

1. Muokkaa kohdassa Products yksinkertaista tuotetta, jolla on normaali hinta.
2. Avaa Product data → Simplio3D, määritä Simplio3D project -asetukseksi projektisi ja Cart price -asetukseksi Simplio3D calculated price (verified server-side) tai tuotteen oma WooCommerce-hinta. Napsauta Update.
3. Merkitse tuotetunnus muistiin: vie osoitin tuotteen päälle Products-luettelossa tai lue post=123 muokkausnäkymän osoiteriviltä.
4. Korvaa Submit-widget [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]:llä. Lisää quantity_mode="selector", jotta ostajat voivat valita määrän, ja after_add="cart", jotta he siirtyvät ostoskoriin.

Ostoskori, kassasivu, tilausviestit ja WooCommerce → Orders näyttävät tämän jälkeen määrityksen, sen kuvan ja varmennetun hinnan.

Simplio3D-hintaan yhdistetyn tuotteen voi ostaa vain konfiguraattorin kautta, joten WooCommerce:n tavallinen Lisää ostoskoriin -painike tuotteen sivulla pyytää ostajaa määrittämään tuotteen ensin. Elementorin maksuttomassa versiossa pidä konfiguraattori omalla sivullaan ja linkitä siihen tuotesivulta esimerkiksi lyhyen kuvauksen “Määritä omasi” -linkillä. Elementor Prolla voit rakentaa Single Product -mallin, jossa käytetään Simplio3D Shortcode -widgetejä Elementorin Add to Cart -widgetin sijaan; esikatsele tämä asetus ennen julkaisua.

Useimmin käytettävät asetukset

Lisää asetukset lyhytkoodin sisään käyttäen suoria lainausmerkkejä ja alaviivoja. Kopiointi Wordista, Google Docsista tai Slackista voi muuttaa lainausmerkit kaareviksi, jolloin WordPress ohittaa asetuksen.

• height="620px" mobile_height="400px" Viewerissä määrittää sen korkeuden työpöydällä ja enintään 781 px leveillä näytöillä.
• loading="eager" sivun yläosassa olevassa Viewerissä lataa sen heti sen sijaan, että se latautuisi vasta vieritettäessä näkyviin.
• layout="dropdown" Options-widgetissä vaihtaa valinnat avattavaksi luetteloksi. Myös grid, list ja buttons toimivat vaihtoehtotyypin mukaan.
• columns="4" thumbnails="small" sovittaa enemmän valintoja jokaiselle riville.
• prefix="From" tax_display="exclude" Price-kohdassa lisää tekstin hinnan eteen ja näyttää hinnan ilman veroa, mikä vastaa WooCommerce-ostoskoria.
• summary_mode="compact" hide_defaults="yes" Summary-kohdassa sijoittaa jokaisen vaihtoehdon omalle rivilleen ja ohittaa oletusarvoon jätetyt vaihtoehdot.
• display="hosted" Viewerissä näyttää koko Simplio3D-konfiguraattorin, vaihtoehdot mukaan lukien, yhdessä widgetissä ilman vaihtoehtotunnuksia.
• instance="oak" jokaisessa saman kokonaisuuden widgetissä pitää kaksi samalla sivulla olevaa konfiguraattoria erillään. Saman instanssin widgetit jakavat yhden määrityksen.

Sovita Elementorin ulkoasuun

• Jokaisen Shortcode-widgetin Advanced-välilehdellä hallitaan marginaalia, sisennystä, taustaa, reunaa ja responsiivista näkyvyyttä. Viewer täyttää sarakkeensa, joten säädä sarakkeen tai säilön leveyttä tehdäksesi siitä leveämmän tai kapeamman.
• Lohkot perivät fontin ja tekstin värin sivulta. Korostusväri (valittu vaihtoehto, kohdistusrengas ja painikkeet) palautuu lähes mustaksi klassisissa teemoissa, kuten Hello Elementorissa, joten määritä se Elementorin korostusväriksi kohdassa Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Muita ominaisuuksia ovat --s3d-radius kulmille, --s3d-thumb pikkukuvan koolle ja --s3d-button-bg painikkeelle. Jos haluat tyylitellä vain yhden widgetin, lisää class="my-finish" sen lyhytkoodiin ja kohdista CSS:ssä .my-finish.