Dero: konfigurator stojaków rowerowych 3D osadzony bez kodowania

Dero to producent parkingów rowerowych z Minneapolis w stanie Minnesota oraz spółka PlayCore. Firma produkuje komercyjne i niestandardowe stojaki rowerowe, publiczne stacje naprawy rowerów, wiaty rowerowe, schowki rowerowe, elementy małej architektury oraz produkty do zagospodarowania przestrzeni ulicznej. Od 1995 roku wspiera klientów — od właścicieli domów kupujących jeden stojak po architektów planujących rowerownie dla setek użytkowników. Na stronach produktów dostępne są materiały, których szukają specjaliści: broszury, karty zgłoszeniowe, instrukcje montażu, pliki CAD, Revit i SketchUp oraz specyfikacje CSI.

Siedem z tych stron ma teraz także konfigurator stojaków rowerowych 3D, zbudowany w Simplio3D i oznaczony po prostu jako Przeglądarka 3D. Jest celowo prosty. Odwiedzający wybiera sposób montażu stojaka, dodaje belkę do oparcia tam, gdzie dany stojak ją oferuje, testuje wykończenia, a model stojaka zmienia się w 3D. Nie ma tu ceny, koszyka ani formularza, a umieszczenie go na dero.com wymagało wklejenia fragmentu kodu osadzającego, a nie programowania.

Rozwiązanie: konfigurator stojaków rowerowych 3D na siedmiu stronach produktów

Na dero.com każdy stojak ma własną stronę produktu z opisem, dokumentami i plikami do pobrania oraz opcjami Dero umożliwiającymi zakup lub uzyskanie wyceny. Siedem z nich — od Hoop Rack, który Dero nazywa standardem parkingów rowerowych, po Bike Bike Rack w kształcie roweru — ma teraz niżej na stronie sekcję zatytułowaną Przeglądarka 3D.

Każda Przeglądarka 3D jest prostym konfiguratoriem. Stojak można obracać i przybliżać na jasnoszarym tle, a panel obok niego zawiera najwyżej trzy opcje: montaż, belkę do oparcia i wykończenie. Nic nie ma ceny, nic nie trafia do koszyka i nic nie jest wysyłane. Jej jedynym zadaniem jest pokazanie stojaka, dlatego konfiguracja wymagała tak niewiele pracy.

Montaż, belka do oparcia i wykończenie pokazane na stojaku w 3D

Te trzy opcje zmieniają wygląd stojaka po jego zamontowaniu:

• Montaż. Lista rozwijana z opcjami Surface i In-Ground. Surface pokazuje stojak na płytach podstawy, do których jest przykręcony; In-Ground zastępuje je dłuższymi nogami osadzanymi w gruncie.
• Belka do oparcia. Przełącznik dostępny w modelach Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack i Arc Rack. Po włączeniu przez stojak przebiega pozioma belka; w pozostałych trzech stojakach przełącznik po prostu się nie wyświetla.
• Wykończenie. 22 próbki, takie same dla każdego stojaka: Galvanized i Stainless, a następnie Black, Flat Black, White, Light Gray, Red, Yellow, Bright Yellow, Orange, Blue, Sky Blue, Green, Light Green, Hunter Green, Sepia Brown, Bronze, Silver, Dark Purple, Wine Red, Beige i Iron Gray. Próbka ocynkowana pokazuje nakrapianą fakturę stali ocynkowanej zamiast jednolitego koloru.

Mały przycisk (i) pod panelem otwiera Podsumowanie konfiguracji, które wymienia wybrane opcje słownie: na przykład dla Swerve Rack są to Select Mount: Surface i Select Finish: Wine Red. Odwiedzający może następnie bezpośrednio przejść do opcji zakupu lub wyceny na tej samej stronie.

Podgląd obok własnych opcji zakupu i wyceny Dero

Strony produktów Dero już umożliwiają sprzedaż. Każda z nich zawiera własne opcje Dero pozwalające kupić produkt lub uzyskać wycenę: wykończenie, montaż i — tam, gdzie ma zastosowanie — belkę do oparcia, następnie ilość, Dodaj do koszyka i Dodaj do wyceny. Większe ilości są obsługiwane przez listę wycen. Przeglądarka 3D znajduje się na tej samej stronie i nie ingeruje w żaden z tych elementów.

Nie ma własnej ceny, koszyka ani formularza i nie wysyła żadnych danych. Odwiedzający ogląda stojak w wybranym montażu i wykończeniu, a następnie wybiera te same opcje w konfiguratorze Dero. Właśnie dzięki tak ograniczonemu zakresowi można było szybko ją uruchomić: nie było produktu do połączenia, ceny do synchronizowania ani formularza do przekierowania.

Osadzenie bez pisania kodu

Każdy konfigurator Simplio3D ma link do udostępniania oraz fragment iframe do skopiowania. Na każdej stronie produktu Dero ten fragment znajduje się pod nagłówkiem Przeglądarka 3D, na pełnej szerokości. Nie ma wtyczki, skryptu ani połączenia ze sklepem, więc uruchomienie przeglądarki wymagało wklejenia jednego fragmentu na jednej stronie.

Ponieważ strona zawiera jedynie ten fragment, sama Przeglądarka 3D jest zarządzana w Simplio3D. Nowe wykończenie lub zaktualizowany model zmienia się tam i pojawia na dero.com przy kolejnym załadowaniu strony, bez konieczności edytowania strony produktu. Więcej o takich przeglądarkach: przeglądarka produktów 3D.

Co taki projekt mógłby dziś dodatkowo oferować

Żaden z elementów tej sekcji nie jest częścią opisanych powyżej Przeglądarek 3D Dero, które działają we wcześniejszej wersji Simplio3D. Dla producenta stojaków rowerowych lub elementów małej architektury, który zaczyna teraz:

• Stojak w miejscu, w którym ma stanąć. Rzeczywistość rozszerzona umieszcza skonfigurowany stojak na chodniku lub w rowerowni za pomocą telefonu, bez aplikacji: AR Quick Look na iOS, Scene Viewer na Android oraz kod QR z przeglądarki na komputerze.
• Szczegóły na modelu. Hotspoty dodają znaczniki z wyskakującymi informacjami, na przykład o średnicy rury lub liczbie rowerów, które można przypiąć do stojaka, a Scenery zmienia tło i ustawienie kamery.
• Przeglądarka i formularz zamówienia w synchronizacji. Osadzony konfigurator komunikuje każdą zmianę jako zdarzenie przeglądarki, simplio3d:option.changed, dzięki czemu witryna może wstępnie wybrać to samo wykończenie i montaż we własnym formularzu zamówienia za pomocą kilku linijek własnego skryptu.
• Pozostała część oferty — szybciej. Pierwszy konfigurator dla kolejnego stojaka można wygenerować na podstawie opisu tekstowego, a zbiorcze dodawanie według kategorii przekształca gamę wykończeń ze wspólnej biblioteki materiałów w zestaw próbek bez ręcznego tworzenia każdej z nich.
• Kontrola każdej przeglądarki. Asystent AI może audytować pokrycie opcji i logikę warunkową, na przykład sprawdzać, czy każde wykończenie ma przypisany materiał, oraz proponować poprawki. Klient AI, taki jak Claude, połączony z obszarem roboczym przez MCP za pomocą połączenia o ograniczonym zakresie, może wykonywać te same kontrole, a zmiany cen lub SKU zawsze trafiają wyłącznie jako oczekujące zmiany, które zatwierdza człowiek.