Toate platformele / Ghid
Model 3D și AR pe Magento și Adobe Commerce
Cu Page Builder adaugi un element „HTML Code” în descrierea produsului. Fără Page Builder, lipești codul în editorul HTML al descrierii.
- Plugin / aplicație
- Nu e nevoie
- Unde lipești codul
- Content → Page Builder → „HTML Code”
- AR pe telefon
- Da, Android și iPhone
Varianta 1: Page Builder (Magento 2.4)
Calea standard în Magento 2.4.3+ și Adobe Commerce.
Pasul 1
Copiază codul din 3DView
Intră în cont la „Modelele mele” și, la model, apasă „Cod pentru site”: codul se copiază imediat. Filele Shopify, WooCommerce și „Orice site” arată doar unde îl lipești; codul e același.
Copiază codul din 3DView Pasul 2
Deschide produsul
Catalog → Products → Edit la produs.
Deschide produsul Pasul 3
Deschide Page Builder
Deschide secțiunea Content și apasă „Edit with Page Builder”.
Pasul 4
Trage elementul HTML Code
Din panoul din stânga, la Elements, trage „HTML Code” în descriere. Apasă rotița elementului, lipește codul și apasă Save.
Trage elementul HTML Code Pasul 5
Salvează produsul
Închide Page Builder, apasă Save și verifică produsul în magazin.
Varianta 2: Fără Page Builder (editorul WYSIWYG)
Dacă Page Builder e dezactivat sau ai o versiune mai veche.
Pasul 1
Copiază codul din 3DView
Intră în cont la „Modelele mele” și, la model, apasă „Cod pentru site”: codul se copiază imediat. Filele Shopify, WooCommerce și „Orice site” arată doar unde îl lipești; codul e același.
Copiază codul din 3DView Pasul 2
Treci pe HTML
În secțiunea Content, la Description, apasă „Show / Hide Editor” ca să vezi codul HTML.
Treci pe HTML Pasul 3
Lipește codul și salvează
Lipește codul și apasă Save.
Lipește codul și salvează
Codul pe care îl lipești
Așa arată codul copiat din 3DView (la tine apare ID-ul modelului în loc de MODEL_ID). Poți schimba înălțimea (height:480px); restul lasă-l neschimbat. Adaugă ?controls=0 după ID ca să ascunzi bara de reglaje de sub model.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Canapea Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
Cum verifici că merge
- Pe calculator: modelul se încarcă, se rotește cu mouse-ul, iar butonul „Vezi pe telefon” arată un cod QR pentru AR.
- Pe Android (Chrome): apasă butonul AR din colțul modelului. Se deschide vizualizatorul AR Google și pui produsul în cameră, la mărime reală. Telefonul trebuie să fie compatibil ARCore.
- Pe iPhone/iPad (Safari): apasă butonul AR. Se deschide AR Quick Look, fără nicio aplicație.
- Testează din Safari sau Chrome, nu din browserul intern al Facebook/Instagram: acolo AR nu pornește.
- După salvare golește cache-ul: System → Cache Management → Flush Magento Cache (dacă nu vezi schimbarea).
Probleme frecvente și soluții
Consola browserului arată o eroare Content Security Policy
Magazinul tău are CSP în mod restrictiv. Dezvoltatorul adaugă https://www.3dview.ai la frame-src (în csp_whitelist.xml al temei sau al unui modul).
Modelul apare la toate produsele
L-ai pus în șablonul de pagină, nu în descrierea produsului. Pune elementul HTML Code în Content la fiecare produs.
Codul dispare sau devine text după salvare
Editorul l-a curățat: lipește codul în modul HTML / cod sursă, nu în modul vizual (pașii de mai sus arată butonul exact). Dacă tot dispare, platforma nu permite iframe-uri: folosește linkul și codul QR din „Distribuie / QR”.
Modelul e prea mic sau apare tăiat
Mărește înălțimea din cod: height:480px devine, de exemplu, height:600px. Lățimea (100%) se adaptează singură la coloană. Pe telefon 400–500px e de obicei suficient.
Butonul AR nu apare sau nu pornește pe iPhone
AR pe iPhone cere Safari (sau Chrome pe iOS) și un iPhone/iPad cu iOS 12 sau mai nou. 3DView pregătește automat varianta pentru iPhone (USDZ). Deschide linkul modelului direct (butonul „Vezi în AR” din cont): dacă acolo merge, platforma ta blochează AR în cadrele încorporate; pune sub model un link „Vezi în AR” către acel link.
Browserul spune „conținut nesigur” sau modelul nu se încarcă
Nu schimba adresa din cod în http://. Pe un site https, browserele blochează cadrele http (conținut mixt). Lasă adresa exact cum e: https://www.3dview.ai/embed/…
Apare logo-ul 3DView pe model
Îl scoți per model, din cont: „Elimină logo”, o singură plată în credite. Codul rămâne același.
Încetinește pagina?
Nu: codul are loading="lazy", deci modelul se încarcă doar când ajunge pe ecran. Găzduirea e inclusă, fără abonament.
Ilustrații simplificate, nu capturi de ecran; meniurile pot arăta puțin diferit în versiunea ta.
Întrebări frecvente
Am nevoie de o extensie Magento?
Nu. Elementul HTML Code din Page Builder e inclus.
Merge pe Magento Open Source?
Da. Page Builder e inclus din 2.4.3; înainte, folosești varianta cu editorul WYSIWYG.
Nu ai încă un model 3D?
Scanează produsul cu telefonul sau pornește de la o poză. Primești codul pentru site, linkul cu QR și AR incluse.
Creează-ți primul model