Cum să folosești pluginul Simplio3D WordPress în Elementor

Pluginul Simplio3D WordPress nu are widgeturi Elementor separate și nici nu are nevoie de ele. Fiecare bloc Simplio3D este și un shortcode, pe care îl adaugi cu propriul widget Shortcode al Elementor, câte un widget pentru fiecare bloc. Shortcode-ul afișează exact ceea ce afișează blocul, astfel încât un configurator de produs în Elementor funcționează la fel ca unul creat în editorul de blocuri WordPress: o singură configurație live partajată de toate widgeturile, bara de instrumente 3D, dimensiunile, AR, prețul live, rezumatul, solicitările de ofertă și coșul WooCommerce.

Acest ghid prezintă traseul scurt: găsește-ți ID-urile, creează aspectul, adaugă în coș și remediază greșelile obișnuite. Este scris pentru versiunea 2.0.3 a pluginului și funcționează cu versiunea gratuită a Elementor.

Înainte de a începe

• Pluginul Simplio3D, versiunea 2.0.3 sau ulterioară, din directorul de pluginuri WordPress.org, care rulează în modul Simplio3D v3. Instalările noi pornesc în acest mod. Un site actualizat de la versiunea 1.x rămâne în modul Legacy până când faci trecerea din Simplio3D → Migration.
• Contul tău Simplio3D conectat: în WordPress, accesează Simplio3D → Log in to Simplio3D.
• Un proiect publicat: în Simplio3D, deschide Share, activează linkul de distribuire și lasă-l fără parolă. Dacă restricționezi domeniile pentru încorporare, adaugă domeniul site-ului tău.
• Elementor. Versiunea gratuită este suficientă.
• Pentru Adăugare în coș: WooCommerce și un produs simplu cu preț.

Adăugare în coș cu WooCommerce

În editorul de blocuri, alegerea unui produs în blocul Add to Cart îl leagă de proiectul tău. Un shortcode nu poate face acest lucru, așa că leagă mai întâi produsul manual:

1. În Products, editează un produs simplu cu un preț standard.
2. Deschide Product data → Simplio3D, setează proiectul Simplio3D la proiectul tău și Cart price la prețul calculat Simplio3D (verificat pe server) sau la prețul WooCommerce al produsului. Fă clic pe Update.
3. Reține ID-ul produsului: treci cu cursorul peste produs în lista Products sau citește post=123 în bara de adrese a ecranului de editare.
4. Înlocuiește widgetul Submit cu [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Adaugă quantity_mode="selector" pentru a le permite cumpărătorilor să aleagă o cantitate și after_add="cart" pentru a-i duce la coș.

Coșul, finalizarea comenzii, e-mailurile privind comenzile și WooCommerce → Orders vor afișa apoi configurația, o imagine a acesteia și prețul verificat.

Un produs asociat cu prețul Simplio3D poate fi cumpărat numai prin configurator, astfel că butonul obișnuit Add to cart al WooCommerce de pe pagina produsului le cere cumpărătorilor să îl configureze mai întâi. Cu Elementor gratuit, păstrează configuratorul pe o pagină separată și creează un link către aceasta din produs, de exemplu printr-un link „Configurează-l pe al tău” în descrierea scurtă. Cu Elementor Pro, poți crea un șablon Single Product care utilizează widgeturile Shortcode Simplio3D în locul widgetului Add to Cart al Elementor; previzualizează această configurare înainte de publicare.

Setările pe care le vei folosi cel mai des

Adaugă setările în shortcode, folosind ghilimele drepte și caractere de subliniere. Copierea din Word, Google Docs sau Slack poate transforma ghilimelele în ghilimele tipografice, iar WordPress va ignora atunci setarea.

• height="620px" mobile_height="400px" în Viewer îi stabilește înălțimea pe desktop și pe ecrane cu lățimea de până la 781 px.
• loading="eager" într-un Viewer din partea de sus a paginii îl încarcă imediat, în loc să aștepte până când derulezi la el.
• layout="dropdown" într-un widget Options îi transformă alegerile într-o listă derulantă. grid, list și buttons funcționează, de asemenea, în funcție de tipul opțiunii.
• columns="4" thumbnails="small" permite afișarea mai multor alegeri pe fiecare rând.
• prefix="From" tax_display="exclude" în Price adaugă text înaintea acestuia și afișează prețul fără taxe, la fel ca în coșul WooCommerce.
• summary_mode="compact" hide_defaults="yes" în Summary afișează fiecare opțiune pe un singur rând și omite opțiunile lăsate la valoarea implicită.
• display="hosted" în Viewer afișează configuratorul complet Simplio3D, inclusiv opțiunile, într-un singur widget, fără a fi necesare ID-uri de opțiuni.
• instance="oak" în fiecare widget dintr-un set menține separate două configuratoare de pe aceeași pagină. Widgeturile cu aceeași instanță partajează aceeași configurație.

Potrivește-l cu designul Elementor

• Fila Advanced a fiecărui widget Shortcode gestionează marginile, spațierea interioară, fundalul, chenarul și vizibilitatea responsivă. Viewer-ul umple coloana, așa că setează lățimea coloanei sau a containerului pentru a-l face mai lat sau mai îngust.
• Blocurile preiau fontul și culoarea textului din pagină. Culoarea de accent (alegerea selectată, inelul de focalizare și butoanele) revine la aproape negru în temele clasice precum Hello Elementor, așa că seteaz-o la accentul Elementor din Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Alte proprietăți includ --s3d-radius pentru colțuri, --s3d-thumb pentru dimensiunea miniaturilor și --s3d-button-bg pentru buton. Pentru a stiliza un singur widget, adaugă class="my-finish" în shortcode-ul său și țintește .my-finish în CSS.