Dero: en 3D-konfigurator för cykelställ som bäddas in utan kod

Dero är en tillverkare av cykelparkering i Minneapolis, Minnesota, och ett PlayCore-företag. Företaget tillverkar kommersiella och kundanpassade cykelställ, offentliga cykelreparationsstationer, cykelskydd, cykelskåp, platsmöbler och produkter för stadsmiljöer, och har stöttat sina kunder sedan 1995 – från villaägare som köper ett enda ställ till arkitekter som planerar ett cykelrum för hundratals cyklister. Produktsidorna innehåller det som föreskrivare söker: broschyrer, inlämningsblad, installationsguider, CAD-, Revit- och SketchUp-filer samt CSI-specifikationer.

Sju av dessa sidor har nu även en 3D-konfigurator för cykelställ, byggd i Simplio3D och enkelt rubricerad 3D Viewer. Den är medvetet grundläggande. Besökaren väljer hur stället ska monteras, lägger till en stödbalk där stället erbjuder en sådan och provar olika ytbehandlingar, medan stället ändras i 3D. Det finns inget pris, ingen varukorg och inget formulär, och att lägga den på dero.com krävde att klistra in en inbäddningskod i stället för programmering.

Lösningen: en 3D-konfigurator för cykelställ på sju produktsidor

På dero.com har varje ställ en egen produktsida med beskrivning, dokument och nedladdningar samt Deros egna alternativ för att köpa eller begära offert. Sju av dem, från Hoop Rack, som Dero kallar standarden för cykelparkering, till Bike Bike Rack, format som en cykel, har nu längre ner på sidan en sektion med rubriken 3D Viewer.

Varje 3D Viewer är en enkel konfigurator. Stället kan roteras och zoomas mot en ljusgrå bakgrund, och panelen bredvid innehåller högst tre val: montering, stödbalk och ytbehandling. Inget har pris, inget läggs i en varukorg och inget skickas. Dess enda uppgift är att visa stället, vilket är anledningen till att så lite behövde konfigureras.

Montering, stödbalk och ytbehandling visas på stället i 3D

De tre valen är de som förändrar hur ett ställ ser ut när det har installerats:

• Montering. En rullista med Surface och In-Ground. Surface visar stället på de bottenplattor som det bultas fast med; In-Ground ersätter dem med längre ben som går ner i marken.
• Stödbalk. En omkopplare på Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack och Arc Rack. När den aktiveras visas en horisontell balk tvärs över stället; de övriga tre ställen visar helt enkelt inte omkopplaren.
• Ytbehandling. 22 färgprover, samma för varje ställ: Galvanized och Stainless, därefter 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 och Iron Gray. Det galvaniserade färgprovet visar den fläckiga strukturen hos galvaniserat stål i stället för en jämn färg.

En liten (i)-knapp under panelen öppnar Configuration Summary, som listar valen i ord: på Swerve Rack till exempel Select Mount: Surface och Select Finish: Wine Red. Besökaren kan sedan gå direkt till köp- eller offertalternativen på samma sida.

En förhandsvisning bredvid Deros egna köp- och offertalternativ

Deros produktsidor säljer redan. Varje sida har Deros egna alternativ för att köpa eller begära offert: ytbehandling, montering och, där det är relevant, stödbalk, följt av antal, Lägg i varukorg och Lägg till i offert, där större kvantiteter hanteras via offertlistan. 3D Viewer ligger på samma sida och påverkar inget av detta.

Den har inget pris, ingen varukorg och inget eget formulär, och den skickar ingenting någonstans. En besökare granskar stället med den montering och ytbehandling som är aktuell och gör sedan samma val i Deros alternativ. Att hålla den så enkel gjorde den snabb att publicera: det fanns ingen produkt att länka, inget pris att synkronisera och inget formulär att skicka vidare till någon.

Inbäddad utan att skriva kod

Varje Simplio3D-konfigurator har en delningslänk och ett iframe-kodstycke att kopiera. På varje Dero-produktsida ligger det kodstycket under rubriken 3D Viewer, i full bredd. Det finns inget plugin, inget skript och ingen koppling till butiken, så att publicera en visare innebar att klistra in ett kodstycke på en sida.

Eftersom sidan bara innehåller det kodstycket hanteras själva 3D Viewer i Simplio3D. En ny ytbehandling eller en uppdaterad modell ändras där och visas på dero.com nästa gång sidan laddas, utan att någon behöver redigera produktsidan. Läs mer om visare som denna: 3D-produktvisaren.

Vad ett sådant projekt skulle kunna omfatta i dag

Inget i detta avsnitt ingår i Deros 3D Viewers som beskrivs ovan, vilka körs på den tidigare versionen av Simplio3D. För en tillverkare av cykelställ eller platsmöbler som startar nu:

• Stället där det ska stå. Förstärkt verklighet placerar det konfigurerade stället på trottoaren eller i ett cykelrum via en telefon, utan app: AR Quick Look på iOS, Scene Viewer på Android och en QR-kod från en datorwebbläsare.
• Detaljer på modellen. Hotspots lägger till markörer med informationsrutor, till exempel rördiameter eller hur många cyklar stället rymmer, och Scenery ändrar bakgrund och kamera.
• Visaren och beställningsformuläret synkroniserade. En inbäddad konfigurator meddelar varje ändring som en webbläsarhändelse, simplio3d:option.changed, så att en webbplats som vill kan förvälja samma ytbehandling och montering i sitt eget beställningsformulär med några rader eget skript.
• Resten av sortimentet, snabbare. En första konfigurator för ett annat ställ kan genereras från en skriftlig beskrivning, och massläggning per kategori omvandlar ett urval av ytbehandlingar från det delade materialbiblioteket till en uppsättning färgprover utan att varje färgprov behöver skapas manuellt.
• Kontroll av varje visare. AI-assistenten kan granska alternativtäckning och villkorslogik, till exempel att varje ytbehandling har ett material, och föreslå korrigeringar. En AI-klient som Claude, ansluten till arbetsytan via MCP med en begränsad anslutning, kan utföra samma kontroller, och ändringar av priser eller SKU:er kommer alltid endast som väntande ändringar som en person tillämpar.