Viewer: vizualizează produsul
Prezentarea modelului 3D și a aspectului său. Utilă când prioritatea este afișarea produsului din mai multe unghiuri fără a permite editarea imprimeului.
Integrare e-commerce - de la design la comandă
Încorporează Alter Product pe site-ul tău: WordPress + WooCommerce sau API
Adaugă prezentări 3D, configurarea variantelor și personalizarea produselor pe propriul site. Clientul vede produsul, alege opțiunile și creează un design în magazinul tău, iar tu gestionezi oferta și comenzile în propriul sistem.
Alege pluginul pentru WordPress cu WooCommerce instalat pentru a parcurge configurarea fără să scrii cod de integrare. Dacă dezvolți propriul site sau magazin, conectează instrumentele încorporate la backend și la coș prin Public API și evenimente postMessage.
Ilustrațiile prezintă interfața reală din înregistrări și din panoul pluginului. Etichetele butoanelor din imagini sunt în engleză; aspectul instrumentului depinde de configurarea magazinului.
Două căi către propriul magazin cu personalizare
Poți pregăti același design de produs pentru prezentare, configurare sau editarea imprimeului. Alege metoda de conectare la magazin în funcție de site și de volumul lucrărilor de programare.
Plugin sau integrare proprie?
Pluginul oferă funcționalități gata pregătite pentru WordPress și WooCommerce. API-ul permite construirea unei conexiuni proprii cu altă platformă, o aplicație headless sau un sistem existent de gestionare a comenzilor.
| Domeniu | WordPress + WooCommerce | Sistem propriu prin API |
|---|---|---|
| Lansare | Instalarea pluginului și asistentul de conectare din panoul WordPress. | Implementarea conexiunii în backend și a încorporării pe site. |
| Produse și variante | Asocierea unui design cu un produs WooCommerce și sincronizarea variantelor. | Asocierea identificatorilor și opțiunilor produselor cu datele propriului magazin. |
| Coș și comenzi | Gestionare integrată a configurației, designului clientului și previzualizărilor în WooCommerce. | Gestionarea evenimentelor instrumentului încorporat și a sincronizării comenzilor în propriul sistem. |
| Fișiere și resurse | Bibliotecă locală, proiecte și fișiere ale comenzilor pe serverul WordPress. | Stocarea și accesul la date conform modului de integrare ales. Varianta cu stocare proprie necesită implementarea gestionării acesteia de către tine. |
Ce instrument să oferi clientului?
Alege instrumentul în funcție de ceea ce trebuie să facă clientul pe site. Pregătești în prealabil designul și regulile de personalizare în Designer.
Configurator: alege varianta
Alegerea unor opțiuni pregătite ale produsului, precum mărimea, culoarea sau materialul. Clientul vede schimbarea pe model și trimite configurația în coș.
Customizer: creează propriul imprimeu
Personalizare folosind instrumentele, imaginile, textele și șabloanele puse la dispoziție. Designul salvat al clientului este asociat cu un articol din coș sau din comandă.
Designer: pregătește oferta
Spațiul de lucru al proprietarului magazinului. Aici pregătești compoziția, variantele, zonele de imprimare și setările instrumentelor pentru clienți. Accesul la editarea administrativă este separat de utilizarea magazinului.
WordPress + WooCommerce: de la instalare la un produs pregătit
Alter Product este un plugin pentru WordPress. Integrarea magazinului necesită WooCommerce instalat și activ. Configurarea obișnuită se face în panou, fără dezvoltarea unei gestionări proprii a API-ului și coșului.
Cerințe: WordPress, WooCommerce, HTTPS și planul Business
Pentru a încorpora Alter Product pe propriul site, ai nevoie de un abonament Business activ sau de un plan superior care include această funcție. Cerința se aplică atât pluginului WordPress + WooCommerce, cât și integrării proprii prin API. Planurile Personal FREE și Personal nu includ încorporarea în magazinul tău.
Pentru varianta cu plugin, pregătește WordPress cu WooCommerce instalat și activ, precum și un cont Alter Product. Stocarea fișierelor pe propria găzduire nu înlocuiește abonamentul necesar: Alter Product continuă să furnizeze aplicația și să autorizeze lansarea acesteia.
- Rulează magazinul prin HTTPS, cu un certificat SSL/TLS valid pentru domeniul său. Acest lucru este necesar pentru funcționarea corectă a instrumentelor încorporate pe un site public.
- Activează legăturile permanente prietenoase din WordPress conform instrucțiunilor de instalare.
- Asigură spațiu de găzduire pentru modele, imagini, proiecte și fișierele comenzilor. Biblioteca magazinului folosește resursele serverului tău.
De ce sunt necesare HTTPS și un certificat SSL/TLS?
Alter Product funcționează pe pagina magazinului într-un iframe încorporat. Browserele restricționează accesul la unele funcții utilizate de aplicație dacă pagina nu oferă un context securizat. HTTPS criptează conexiunea, iar un certificat valid permite browserului să verifice domeniul.
Browserul verifică și pagina care conține iframe-ul. De aceea, adresa HTTPS a aplicației Alter Product nu este suficientă dacă magazinul funcționează prin HTTP. HTTPS trebuie să acopere și pagina ta pe care încorporezi instrumentul. Aceasta rezultă din regulile de securitate ale browserelor pentru aplicațiile încorporate.
- Activează un certificat SSL/TLS la furnizorul de găzduire și verifică dacă este valid pentru domeniul magazinului.
- Setează adresele site-ului WordPress și domeniul integrării pe HTTPS. Activează redirecționarea de la HTTP la HTTPS.
- Deschide pagina produsului prin HTTPS și verifică dacă browserul semnalează probleme cu certificatul sau cu resurse încărcate prin HTTP.
Conectează magazinul prin Auto Connect
Conectarea automată te ghidează prin autorizarea contului Alter Product și configurarea magazinului. În această variantă nu trebuie să transferi manual cheile API.
- În WordPress, mergi la Module → Adaugă modul nou, caută Alter Product, apoi instalează și activează pluginul.
- Deschide panoul Alter Product și alege Auto Connect. Autentifică-te în contul Alter Product corect, verifică magazinul și aprobă conexiunea.
- Revino la WordPress. Alege un model de pornire și descarcă resursele necesare. Așteaptă finalizarea descărcării și a verificărilor de pregătire.
- Verifică paginile instrumentelor create și setările de afișare, apoi treci la pregătirea produsului.
Asociază designul și sincronizează variantele
În editorul produsului WooCommerce, deschide fila Alter Product. Creează un design nou sau selectează unul existent, apoi deschide Designer. Setează imprimeul, opțiunile disponibile și zonele de imprimare pentru acest produs.
- Pentru un produs variabil, pregătește atributele, precum mărimile, și variațiile WooCommerce corespunzătoare.
- În Designer, folosește Sync variants pentru a asocia opțiunile designului cu variațiile produsului. Verifică și selecțiile implicite care nu sunt atribute ale variațiilor în WooCommerce.
- Salvează designul și produsul. Alege instrumentul afișat pe pagină și modul în care se deschide.
- Verifică rezultatul pe pagina produsului: selectează câteva variante, pregătește un design și treci la coș.
Biblioteca ta pe serverul WordPress
Stochezi modele, proiecte, imagini și fișiere ale comenzilor pe găzduirea pe care rulează WordPress. Resursele adăugate local servesc magazinului tău și nu devin astfel elemente ale bibliotecii publice Alter Product pentru alte magazine.
Ce se stochează local?
Pluginul salvează fișierele modelelor, bibliotecilor, proiectelor, mockupurilor și comenzilor în spațiul WordPress. Datele proiectelor generatorului și ale reviziilor acestora sunt salvate și în baza de date a acestei instalări.
Poți adăuga propriile materiale și importa resurse selectate din Alter Product. După descărcare, folosești o copie locală. Importul, verificarea actualizărilor și descărcarea versiunilor noi sunt acțiuni separate.
| Loc în panou | Ce faci acolo |
|---|---|
| Resurse | Gestionezi modele, imagini, șabloane, fundaluri, logouri, texturi, medii și multe altele. Modalitățile disponibile de adăugare depind de tipul resursei. |
| Generator de modele | Creezi proiecte locale pe baza șabloanelor și lucrezi cu modele asociate generatorului. |
| Designuri de produse / Designer | Pregătești sau imporți un design, îl editezi și îl asociezi cu un produs din magazin. |
| Comenzi WooCommerce | Folosești designurile salvate ale clienților, previzualizările și fișierele necesare pentru realizarea comenzii. |
Fișiere locale, aplicație Alter Product încorporată
Păstrezi resursele la tine, iar interfața instrumentelor se încarcă din Alter Product într-un iframe. Serviciul Alter Product verifică accesul contului, planul și sesiunile și furnizează catalogul pentru import. Integrarea necesită o conexiune la acest serviciu.
La realizarea copiilor de siguranță, păstrează baza de date, directorul de fișiere și cheile și valorile salt WordPress necesare citirii datelor criptate ale pluginului. Astfel poți restaura nu doar imaginile vizibile, ci și datele necesare pentru continuarea lucrului.
Personalizare pe site-ul brandului tău
Instrumentul încorporat poate face parte din pagina produsului sau dintr-o pagină WordPress separată. Clientul rămâne în procesul de cumpărare al magazinului tău, iar WooCommerce gestionează coșul și comanda.
Pagină de produs, pagină a instrumentului sau bloc
Alege afișarea potrivită structurii magazinului: un instrument pe pagina produsului, un buton către o pagină dedicată sau încorporarea prin blocurile și shortcode-urile disponibile. Viewer, Configurator și Customizer au roluri diferite, deci nu trebuie să le oferi pe toate simultan.
- Afișează Viewer acolo unde clientul trebuie să vadă modelul produsului.
- Folosește Configurator când vinzi variante și opțiuni pregătite.
- Alege Customizer când clientul trebuie să adauge text sau imagini ori să modifice compoziția imprimeului.
Fundaluri, logo și limbă proprii
Adaptează prezentarea produselor la brandul tău. În plugin gestionezi fundalurile și logourile locale, precum și setările aspectului instrumentelor încorporate. Disponibilitatea anumitor opțiuni depinde de plan.
- Fundalul scenei, culorile interfeței și aspectul pregătit al designului contribuie la consecvența vizuală a magazinului.
- Aplicația și pluginul sunt disponibile în 22 de limbi. Setezi limba panoului WordPress pentru fiecare utilizator, iar limba site-ului în setările acestuia.
- Pregătești numele produselor, conținutul imprimeurilor și descrierile ofertei în limbile clienților. Suportul pentru limba interfeței nu înseamnă traducerea automată a conținutului magazinului.
De la designul clientului la articolul din comandă
Clientul alege varianta și pregătește personalizarea. Pluginul asociază configurația și designul salvat cu articolul din coș, apoi cu comanda WooCommerce. Mockupurile disponibile ajută la identificarea imprimeului comandat.
- Clientul deschide produsul sau instrumentul asociat și alege opțiunile.
- La personalizare, salvează designul și adaugă produsul în coș.
- În coș verifică produsul, configurația și previzualizarea disponibilă a designului, apoi finalizează comanda prin WooCommerce.
- În panoul comenzii, proprietarul deschide designul salvat și pregătește realizarea acestuia.
Realizarea comenzilor, POD și AI opțional
Conectarea magazinului la instrumentele 3D este începutul procesului. Din designul pregătit poți descărca fișiere pentru producția proprie sau poți folosi integrarea pluginului cu un furnizor de imprimare la cerere.
Conectează Printify sau Printful
Configurează conexiunea cu furnizorul ales în setările pluginului. Apoi asociază produsul, variantele și pozițiile de imprimare cu oferta furnizorului, pregătește fișierele și trimite comanda WooCommerce pentru realizare.
- Adaptează zonele de imprimare și formatul fișierelor la produsul și furnizorul respectiv.
- Verifică fișierele generate și varianta comandată înainte de trimiterea în producție.
- Actualizează stările comenzilor și datele de expediere în plugin.
- Pentru producția proprie, descarcă fișiere PDF, SVG sau PNG conform posibilităților proiectului și setărilor de export.
AI pentru pregătirea imaginilor în panoul proprietarului
Poți configura propria conexiune cu un furnizor AI și utiliza funcțiile disponibile de generare sau îmbunătățire a imaginilor în timp ce lucrezi la design. Cererile pluginului pleacă din WordPress către furnizorul selectat și sunt facturate în contul tău la acel furnizor.
Sesiuni de încorporare: valabilitate și utilizarea limitei
O sesiune este o autorizație temporară pentru deschiderea unui anumit instrument în magazin. Ajută la oferirea accesului securizat la produse și este unitatea luată în calcul în limita lunară a sesiunilor de încorporare. Nu este același lucru cu un clic, un vizitator unic sau o comandă.
Cât timp este valabilă cheia de sesiune?
La lansarea instrumentului încorporat, integrarea obține un token de scurtă durată, numit și cheie de sesiune. Datele permanente de acces ale contului rămân pe server. Clientul nu trebuie să copieze chei sau să se autentifice în contul Alter Product al proprietarului.
Valabilitatea implicită a tokenului în implementarea actuală este de 15 minute. Serverul poate stabili o durată diferită, de aceea integrarea folosește termenul de expirare al sesiunii primite. Reutilizarea tokenului nu prelungește acest termen. Pentru o nouă autorizare după expirare este necesară o sesiune nouă.
Reîmprospătarea paginii consumă încă o sesiune?
Depinde de instrument și de existența unei sesiuni potrivite și încă valabile. Pluginul nu folosește o singură sesiune comună pentru toți vizitatorii și toate produsele. Regulile de mai jos descriu comportamentul actual.
| Situație | Ce se întâmplă cu sesiunea? | Efect asupra limitei |
|---|---|---|
| Prima deschidere a instrumentului fără o sesiune potrivită | Integrarea solicită un token nou pentru instrumentul și contextul produsului respectiv. | Emiterea cu succes a unui token nou consumă o sesiune. |
| Rotirea modelului, schimbarea culorii sau editarea textului în instrumentul deschis | Lucrul continuă în cadrul sesiunii pornite. | Aceste acțiuni nu determină în sine emiterea unor tokenuri suplimentare. |
| Reîmprospătarea completă a paginii cu Viewer sau Configurator | Pluginul obține de obicei un token nou după reîncărcarea paginii. Memoria sesiunii acestor instrumente nu este păstrată între reîmprospătările complete. | O nouă emitere reușită a tokenului consumă încă o sesiune. |
| Reîmprospătarea Customizer-ului în aceeași filă | Customizer poate reutiliza sesiunea salvată dacă aceasta corespunde magazinului, produsului, comenzii și modului de lucru și nu este aproape de expirare. | Reutilizarea nu crește contorul. Dacă nu sunt îndeplinite condițiile, este necesară o sesiune nouă. |
| Expirarea tokenului, alt produs sau schimbarea contextului de lucru | Pot fi necesare o nouă autorizare și un token nou. Disponibilitatea stocării în browser influențează și posibilitatea reutilizării. | Un token nou emis crește utilizarea limitei. |
Cum incluzi sesiunile în costurile și planul magazinului?
Contorul crește când API-ul emite cu succes un token nou. Utilizarea unui token deja emis și încă valabil nu reprezintă o nouă emitere. De aceea, când alegi planul, ia în calcul lansările instrumentelor, reîmprospătările și redeschiderile, nu doar numărul comenzilor sau al vizitatorilor.
Instrumentele încorporate în același magazin folosesc o limită lunară comună de sesiuni. Contorul este gestionat separat pentru fiecare magazin, pe luni calendaristice în fusul UTC. Sesiunile noi ale Designer-ului și Generatorului de modele încorporate în panoul WordPress cresc și ele acest contor. Simpla descărcare a unui model disponibil prin API-ul de import nu deschide o sesiune de editor.
După atingerea limitei, sistemul refuză emiterea altor sesiuni. Este o limită de utilizare inclusă în abonament; verifică în planul tău cota disponibilă în prezent.
- Lansează instrumentul acolo unde clientul îl folosește efectiv. Pentru listele de produse poți folosi imagini obișnuite și mockupuri pregătite.
- În propria integrare API, evită crearea unei sesiuni noi la fiecare randare a componentei sau schimbare de opțiune. Reutilizează o sesiune valabilă numai în contextul ei corespunzător.
- Planifică limita separat de costurile realizării POD și ale generării AI, care rezultă din utilizarea acestor servicii externe.
Integrare proprie prin API
Ai un magazin propriu, o aplicație headless sau propriul sistem de comenzi? Poți construi un strat de integrare folosind Public API Alter Product și încorpora instrumentele necesare pe site. Această variantă necesită programare.
Conectează Alter Product folosind propria tehnologie
Public API folosește cereri HTTP și date JSON. Poți scrie propria integrare în limbajul și mediul în care funcționează backend-ul tău. Nu trebuie să reconstruiești magazinul pe WordPress pentru a încorpora instrumentele Alter Product.
Mai jos găsești exemple de tehnologii pentru realizarea conexiunii pe server. În fiecare implementezi aceleași etape: autorizarea API, crearea sesiunii instrumentului și asocierea produselor, coșului și comenzilor cu propriul sistem.
JavaScript și TypeScript / Node.js
Adaugă integrarea într-un backend Node.js, de exemplu cu Express sau NestJS. Apelează API-ul de pe server și oferă frontend-ului datele necesare încorporării instrumentului.
Python
Conectează o aplicație Python existentă, precum Django sau FastAPI, la produsele, sesiunile și comenzile Alter Product prin cereri HTTP.
PHP
Folosește PHP într-un magazin sau într-o aplicație proprie, de exemplu Laravel sau Symfony. Poți pregăti o integrare API independent de pluginul WordPress gata disponibil.
Java
Integrează instrumentele cu un backend Java, precum Spring, și asociază datele designurilor cu propriul catalog de produse și sistem de comenzi.
C# / .NET
Folosește un backend .NET, precum ASP.NET Core, pentru autorizare, crearea sesiunilor și transmiterea datelor către procesele existente ale magazinului.
Go
Pregătește conexiunea într-un serviciu scris în Go. Clientul HTTP standard permite gestionarea cererilor API și a răspunsurilor JSON.
Ruby
Adaugă integrarea într-o aplicație Ruby, precum Ruby on Rails, și folosește propriul model de produse, coș și realizare a comenzilor.
Rust
Conectează backend-ul Rust printr-un client HTTP și procesare JSON. Poți integra sesiunile și evenimentele de cumpărare în arhitectura propriilor servicii.
Un frontend adaptat site-ului tău
În browser poți folosi React, Vue, Angular sau HTML și JavaScript simple. TypeScript este potrivit și pentru implementarea comunicării. Pagina încorporează iframe-ul, gestionează evenimentele postMessage și se conectează la backend-ul tău.
Frontend-ul gestionează aspectul paginii și reacțiile coșului, iar backend-ul apelurile autentificate către Public API. În framework-urile care combină ambele straturi, precum Next.js, păstrează gestionarea cheilor permanente și crearea sesiunilor exclusiv în partea de server.
Poți păstra propriul proces de finalizare a comenzii, sistem de plăți, CMS și flux de realizare a comenzilor. În cadrul implementării, conectezi aceste elemente la datele designului și evenimentele instrumentului Alter Product selectat.
Ce oferă API-ul și ce pregătește sistemul tău?
Alter Product oferă instrumente 3D, datele designurilor și mecanismele de sesiune. Backend-ul tău le conectează la produse, conturile clienților, coș și gestionarea comenzilor. Poți crea endpointuri intermediare pentru frontend, fără a expune datele de acces Alter Product în browser.
| Strat | Rol |
|---|---|
| Frontend-ul site-ului tău | Afișează iframe-ul, răspunde comunicării instrumentului și actualizează interfața magazinului. |
| Backend-ul tău | Autentifică cererile către Public API, creează sesiuni, controlează accesul clientului și salvează asocierile cu propriul coș sau cu comenzile. |
| Public API Alter Product | Oferă funcții de conectare, produse, asocieri de instrumente, comenzi și acces la fișiere și resurse. |
| Instrumentul încorporat | Afișează modelul și permite configurarea sau personalizarea conform modului selectat și designului pregătit. |
De la autorizare la propriul coș
Mai întâi configurează conexiunea și sesiunea de încorporare pentru un produs. Apoi adaugă gestionarea configurației, salvarea designului și gestionarea comenzilor, conform instrumentului selectat.
- Configurează datele de acces API și domeniul magazinului. Verifică conexiunea printr-o cerere executată în backend.
- Asociază produsul magazinului cu un design și cu instrumentul Alter Product potrivit.
- Încorporează iframe-ul și gestionează inițierea comunicării. Creează o sesiune de scurtă durată pe server și transmite-o instrumentului conform documentației.
- Gestionează evenimentul de configurare sau personalizare și salvează datele necesare în coș.
- După cumpărare, sincronizează comanda și datele și fișierele necesare cu propriul sistem de realizare.
Consultă instrucțiunile instrumentului tău
Instrucțiunile de încorporare conțin parametri și exemple. Capitolele postMessage explică comunicarea cu pagina, iar documentația API descrie operațiile efectuate de backend.
Verifică întregul flux înainte de lansarea vânzărilor
Testează produsul așa cum îl folosește clientul: de la deschiderea paginii până la designul vizibil în comandă. Fă un test pe computer și telefon, inclusiv fără autentificare în panoul administrativ.
Listă scurtă de verificare
După pregătirea unui produs, parcurge întregul proces. Abia apoi aplică metoda de configurare verificată și celorlalte produse din catalog.
- Verifică dacă ai un plan Business activ sau un plan superior și dacă domeniul funcționează prin HTTPS cu un certificat SSL/TLS valid.
- Verifică vizibilitatea paginilor instrumentelor, asocierea designului și metoda de încorporare aleasă.
- Alege diferite mărimi și culori. Compară opțiunile designului cu variantele și prețurile din magazin.
- În Customizer adaugă text sau o imagine, salvează designul și adaugă-l în coș. Verifică și editarea unei personalizări deja adăugate.
- Verifică previzualizarea, cantitatea și configurația în coș și după plasarea unei comenzi de test.
- Deschide designul din comandă și verifică fișierele de imprimare generate. Dacă folosești POD, testează și asocierea cu furnizorul și trimiterea controlată a comenzii pentru realizare.
- Verifică biblioteca disponibilă clientului, limba, brandingul și comportamentul paginii pe telefon.