Configuratorul este un script plus un element HTML. Nu instalezi nimic pe serverul tău pentru a-l integra. Tot ce urmează poate fi exersat într-un sandbox înainte de trecerea în producție.
Codul
Categoria Embedding code din consolă scrie fragmentul pentru tine, în forma pe care o alegi: HTML simplu (patru variante), WordPress, un buton SKU WooCommerce sau un link independent cu cod QR. Forma lui este:
<script type="module" src="https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js"></script>
<cutoptim-configurator mode="inline" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>Cheia, adresa serviciului și limba provin din consola ta. O fereastră pop-up sau un panou lateral folosește un buton pentru a se deschide:
<button data-cutoptim-open="#cut" data-material="MDF-18">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>Moduri și atribute
| Attribute | Semnificație |
|---|---|
mode |
inline (implicit), modal (pop-up) sau drawer (panou lateral) |
key |
cheia ta publicabilă |
lang |
limba afișată clientului |
material |
o placă din catalogul tău, după id sau nume exact; fluxul pornește apoi la lista de tăieri |
thickness |
restrânge material, în milimetri; singur nu selectează nimic |
template |
un șablon de mobilier de la care se pornește |
start |
catalog, cutlist sau template |
project |
un proiect salvat de încărcat |
customer-token |
referința ta opacă la clientul autentificat, până la 128 de caractere |
width, height |
dimensiunea casetei gazdă, ca lungimi CSS simple |
O fereastră pop-up sau un panou lateral nu încarcă nimic până la prima deschidere, deci o grilă de produse cu multe butoane rămâne ușoară. Mai multe Configuratoare pe aceeași pagină funcționează independent. Un atribut cu valoare nevalidă este ignorat, niciodată aplicat pe jumătate.
Din script, elementul oferă open(), close(), setMaterial(), loadProject() și setCustomerToken(). Emite evenimente pe el însuși: cutoptim:ready, step, quote, order, project, error, open și close.
Pagină independentă, QR și iframe
Același Configurator poate rula ca pagină proprie: pui un link către ea, tipărești codul QR pentru un tejghea de magazin sau un chioșc sau o trimiți unui client. O pagină care nu poate încărca un script poate afișa acea pagină într-un iframe; doar domeniile pe care le listezi o pot încadra, iar mesajele dintre cadru și pagina ta sunt acceptate doar de la acele domenii.
Domenii permise
Cheia publicabilă funcționează doar de la domeniile listate pentru ea. Listezi domeniile magazinului tău, inclusiv orice domeniu de staging, când creezi cheia în categoria Keys & embedding; o cerere de la orice altă origine este refuzată.
Branding
Culorile, raza colțurilor, fontul, modul luminos sau întunecat și toate textele vizibile clientului în zece limbi se setează în consolă și se aplică fără a-ți edita pagina. Pagina poate stila și părți ale widgetului prin selectori CSS ::part.
O versiune fixată, cu integritate
În mod implicit, fragmentul încarcă versiunea mobilă latest. Acolo unde serviciul păstrează lansările, consola poate oferi în schimb un fragment fixat (pinned): o lansare numerotată anume, cu un hash integrity, astfel încât browserul refuză un fișier care a fost modificat. O variantă mai strictă fixează și părțile încărcate leneș. Lansările sunt semnate, o lansare publicată nu se schimbă niciodată, iar o lansare anterioară rămâne disponibilă, deci o poți fixa cât timp ai nevoie. Pentru o Content Security Policy strictă, consola arată directivele de permis. Fragmentele fixate cer ca serviciul să păstreze lansările; până atunci consola oferă doar fragmentul mobil.
Proiecte salvate
Un client poate salva o listă de tăieri și se poate întoarce la ea. Prima salvare creează un token privat pe care browserul îl păstrează, deci implicit un proiect este disponibil doar în acel browser. Nu există sincronizare între dispozitive bazată pe autentificare, iar clientul nu poate șterge un proiect salvat; proiectele necomandate se șterg după perioada ta de retenție.
Întoarcerea în coșul tău
Când clientul comandă, Configuratorul emite evenimentul de comandă în pagina ta. Pe pagina independentă poate, de asemenea, să trimită clientul înapoi în magazinul tău după o comandă reușită: setezi o adresă de întoarcere (doar https, pe domeniul tău) și clientul vede o scurtă confirmare cu un buton Back to the shop. Prețul nu trebuie niciodată preluat din browser sau din adresa de întoarcere: serverul tău verifică mai întâi oferta. Cum, este explicat pe pagina despre comenzi; un plug-in gata făcut pentru WooCommerce se află pe pagina lui, iar codul de referință pentru orice alt magazin se află pe pagina despre platforme proprii.