Konfigurator to jeden skrypt i jeden element HTML. Aby go osadzić, nie instalujesz niczego na swoim serwerze. Wszystko poniżej możesz przećwiczyć w sandboxie przed uruchomieniem produkcyjnym.
Kod
Kategoria Embedding code w konsoli zapisuje fragment kodu za Ciebie w wybranej formie: zwykły HTML (cztery warianty), WordPress, przycisk WooCommerce z SKU albo samodzielny link z kodem QR. Jego kształt jest następujący:
<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>Klucz, adres usługi i język pochodzą z Twojej konsoli. Okno modalne lub panel boczny otwiera się przyciskiem:
<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>Tryby i atrybuty
| Atrybut | Znaczenie |
|---|---|
mode |
inline (domyślnie), modal (okno modalne) lub drawer (panel boczny) |
key |
Twój klucz publiczny |
lang |
język widoczny dla klienta |
material |
płyta z Twojego katalogu, według identyfikatora lub dokładnej nazwy; proces zaczyna się wtedy od listy cięcia |
thickness |
zawęża material w milimetrach; sam nie wybiera niczego |
template |
szablon mebla, od którego zaczynasz |
start |
catalog, cutlist lub template |
project |
zapisany projekt do wczytania |
customer-token |
Twoje własne, nieprzezroczyste odniesienie do zalogowanego klienta, do 128 znaków |
width, height |
rozmiar kontenera hosta, jako zwykłe długości CSS |
Okno modalne lub panel boczny nie ładuje niczego, dopóki nie zostanie po raz pierwszy otwarte, więc siatka produktów z wieloma przyciskami pozostaje lekka. Kilka konfiguratorów na jednej stronie działa niezależnie. Atrybut z nieprawidłową wartością jest odrzucany, nigdy nie jest stosowany częściowo.
Ze skryptu element udostępnia open(), close(), setMaterial(), loadProject() i setCustomerToken(). Zgłasza na sobie zdarzenia: cutoptim:ready, step, quote, order, project, error, open i close.
Strona samodzielna, QR i iframe
Ten sam konfigurator może działać jako osobna strona: linkuj do niej, wydrukuj kod QR na ladę sklepową lub kiosk albo wyślij ją klientowi. Strona, która nie może załadować skryptu, może pokazać tę stronę w elemencie iframe; osadzać ją mogą tylko wymienione przez Ciebie domeny, a wiadomości między ramką a Twoją stroną są przyjmowane tylko z tych domen.
Dozwolone domeny
Klucz publiczny działa tylko z domen wymienionych dla niego. Domeny swojego sklepu, wraz z ewentualną domeną testową (staging), wymieniasz przy tworzeniu klucza w kategorii Keys & embedding; żądanie z jakiegokolwiek innego źródła jest odrzucane.
Branding
Kolory, promień zaokrąglenia, krój pisma, jasny lub ciemny motyw oraz wszystkie teksty widoczne dla klienta w dziesięciu językach ustawia się w konsoli i obowiązują one bez edytowania Twojej strony. Strona może też stylizować części widżetu za pomocą selektorów CSS ::part.
Przypięta wersja z kontrolą integralności
Domyślnie fragment kodu ładuje ruchomą wersję latest. Tam, gdzie usługa przechowuje wydania, konsola może zamiast tego zaoferować fragment przypięty: konkretne numerowane wydanie z hashem integrity, dzięki czemu przeglądarka odrzuca zmieniony plik. Ostrzejszy wariant przypina także części ładowane leniwie. Wydania są podpisane, opublikowane wydanie nigdy się nie zmienia, a wcześniejsze wydanie pozostaje dostępne, więc możesz je przypiąć na tak długo, jak potrzebujesz. W przypadku restrykcyjnej polityki Content Security Policy konsola pokazuje dyrektywy do zezwolenia. Przypięte fragmenty wymagają, aby usługa przechowywała wydania; do tego czasu konsola oferuje tylko fragment ruchomy.
Zapisane projekty
Klient może zapisać listę cięcia i do niej wrócić. Pierwszy zapis tworzy prywatny token, który przechowuje przeglądarka, więc domyślnie projekt jest dostępny tylko w tej przeglądarce. Nie ma synchronizacji między urządzeniami opartej na logowaniu, a klient nie może usunąć zapisanego projektu; niezamówione projekty są usuwane po upływie Twojego okresu retencji.
Powrót do koszyka
Gdy klient zamawia, konfigurator zgłasza na Twojej stronie zdarzenie zamówienia. Na stronie samodzielnej może też odesłać klienta z powrotem do Twojego sklepu po udanym zamówieniu: ustawiasz adres powrotu (tylko https, w Twojej własnej domenie), a klient widzi krótkie potwierdzenie z przyciskiem Wróć do sklepu. Cena nigdy nie może być pobrana z przeglądarki ani z adresu powrotu: Twój serwer najpierw weryfikuje wycenę. Jak to zrobić, opisuje strona o zamówieniach; gotowa wtyczka dla WooCommerce jest na własnej stronie, a kod referencyjny dla dowolnego innego sklepu na stronie o platformach niestandardowych.