Dero: en 3D-konfigurator for sykkelstativer, innebygd uten koding

Dero er en produsent av sykkelparkering i Minneapolis, Minnesota, og et PlayCore-selskap. Selskapet produserer kommersielle og spesialtilpassede sykkelstativer, offentlige sykkelreparasjonsstasjoner, sykkelskurer, sykkelskap, møblering for uteområder og produkter for byrom, og har støttet kundene sine siden 1995 – fra huseiere som kjøper ett enkelt stativ, til arkitekter som planlegger et sykkelrom for hundrevis av syklister. Produktsidene inneholder det spesifikasjonsansvarlige ser etter: brosjyrer, innsendingsark, installasjonsveiledninger, CAD-, Revit- og SketchUp-filer samt CSI-spesifikasjoner.

Sju av disse sidene har nå også en 3D-konfigurator for sykkelstativer, bygget i Simplio3D og enkelt kalt 3D-visning. Den er bevisst enkel. Besøkende velger hvordan stativet skal monteres, legger til en støttebøyle der stativet tilbyr det, og prøver ulike overflater – og stativet endres i 3D. Det finnes ingen pris, handlekurv eller skjema, og å legge den på dero.com krevde bare at man limte inn en innebyggingskode, ikke programmering.

Løsningen: en 3D-konfigurator for sykkelstativer på sju produktsider

På dero.com har hvert stativ sin egen produktside med beskrivelse, dokumenter og nedlastinger, samt Deros egne alternativer for å kjøpe eller be om et tilbud. Sju av dem, fra Hoop Rack, som Dero kaller standarden for sykkelparkering, til Bike Bike Rack, formet som en sykkel, har nå en seksjon lenger nede på siden med overskriften 3D-visning.

Hver 3D-visning er en enkel konfigurator. Stativet kan roteres og zoomes mot en lysegrå bakgrunn, og panelet ved siden av har maksimalt tre valg: montering, støttebøyle og overflate. Ingenting har pris, ingenting legges i handlekurven og ingenting sendes inn. Den har én oppgave: å vise stativet, og derfor var det så lite å sette opp.

Montering, støttebøyle og overflate vist på stativet i 3D

De tre valgene er dem som endrer hvordan et stativ ser ut når det er installert:

• Montering. En rullegardinmeny med Overflatemontering og Nedstøpt. Overflatemontering viser stativet på bunnplatene det boltes fast med; Nedstøpt erstatter dem med lengre ben som går ned i bakken.
• Støttebøyle. En bryter på Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack og Arc Rack. Når den er slått på, vises en horisontal stang på tvers av stativet; de tre andre stativene viser ganske enkelt ikke bryteren.
• Overflate. 22 fargeprøver, de samme på hvert stativ: Galvanisert og rustfritt stål, deretter svart, matt svart, hvit, lys grå, rød, gul, klar gul, oransje, blå, himmelblå, grønn, lysegrønn, jegergrønn, sepiabrun, bronse, sølv, mørk lilla, vinrød, beige og jerngrå. Den galvaniserte fargeprøven viser den flekkete teksturen til galvanisert stål, fremfor en ensfarget flate.

En liten (i)-knapp under panelet åpner Konfigurasjonsoversikt, som lister opp valgene med tekst: På Swerve Rack, for eksempel, Velg montering: Overflatemontering og Velg overflate: Vinrød. Besøkende kan deretter gå direkte til kjøps- eller tilbudsalternativene på samme side.

En forhåndsvisning ved siden av Deros egne kjøps- og tilbudsalternativer

Deros produktsider selger allerede produkter. Hver side har Deros egne alternativer for å kjøpe eller be om et tilbud: overflate, montering og, der det er relevant, støttebøyle, deretter antall, Legg i handlekurv og Legg til i tilbud, mens større antall går via tilbudslisten. 3D-visningen ligger på samme side og lar alt dette være uendret.

Den har ingen pris, ingen handlekurv og ingen eget skjema, og sender ingenting noe sted. Besøkende ser på stativet med monteringen og overflaten de har i tankene, og velger deretter de samme alternativene i Deros valg. Det at løsningen ble holdt så enkel, gjorde den rask å publisere: Det var ikke noe produkt å koble til, ingen pris å holde oppdatert og intet skjema å rute til noen.

Bygget inn uten å skrive kode

Hver Simplio3D-konfigurator har en delingslenke og en iframe-kodebit som kan kopieres. På hver Dero-produktside ligger denne kodebiten under overskriften 3D-visning, i full bredde. Det finnes ingen plugin, ingen skript og ingen kobling til nettbutikken, så å publisere en visning innebar å lime inn én kodebit på én side.

Fordi siden bare inneholder denne kodebiten, vedlikeholdes selve 3D-visningen i Simplio3D. En ny overflate eller en oppdatert modell endres der og vises på dero.com neste gang siden lastes inn, uten at noen redigerer produktsiden. Les mer om visninger som dette: 3D-produktvisningen.

Hva et prosjekt som dette ville inkludert i dag

Ingenting i denne delen er en del av Deros 3D-visninger beskrevet ovenfor, som kjører på en tidligere versjon av Simplio3D. For en produsent av sykkelstativer eller møblering for uteområder som starter nå:

• Stativet der det skal stå. Utvidet virkelighet plasserer det konfigurerte stativet på fortauet eller i et sykkelrom via en telefon, uten app: AR Quick Look på iOS, Scene Viewer på Android, og en QR-kode fra en nettleser på datamaskin.
• Detaljer på modellen. Hotspots legger til markører med informasjonsvinduer, for eksempel rørdimensjon eller hvor mange sykler stativet rommer, og Scenery bytter bakgrunn og kamera.
• Synkronisering mellom visning og bestillingsskjema. En innebygd konfigurator kunngjør hver endring som en nettleserhendelse, simplio3d:option.changed, slik at et nettsted som ønsker det kan forhåndsvelge samme overflate og montering i sitt eget bestillingsskjema med noen få linjer av sitt eget skript.
• Resten av sortimentet, raskere. En første konfigurator for et annet stativ kan genereres fra en skriftlig beskrivelse, og masselegging etter kategori gjør et utvalg av overflater fra det delte materialbiblioteket om til et sett med fargeprøver uten at hver enkelt må opprettes manuelt.
• Kontroll av hver visning. AI-assistenten kan revidere dekningen av alternativer og betinget logikk, for eksempel at hver overflate har et materiale, og foreslå utbedringer. En AI-klient som Claude, koblet til arbeidsområdet via MCP med en avgrenset tilkobling, kan kjøre de samme kontrollene, og endringer i priser eller SKU-er kommer kun som ventende endringer som et menneske godkjenner.