Vanilla JS (no framework)
Konfigurator för måttbeställda diskbänkar (WooCommerce)
Skräddarsytt plugin som guidar kunden stegvis, håller hårda regler och lägger en komplett konfiguration i varukorgen – med ritning och ordermeta.
SVG-preview m. måttpilar
Schema.org HowTo + Product
Tillgänglighet & prestanda
Guidar rätt val
Validerar i varje steg: 5 mm-steg, kantkrav 40/45 mm, min c-c 60 mm, 95 mm mellan diskho & häll. Autokorrigerar och förklarar varför.
Trygghet via ritning
Live-SVG med måttpilar, placeringshjälp och kollisionskontroll. Exporteras till order som förhandsbild + SVG.
Smart prismotor
Intervalltabeller per längd + per-modell-override och tillägg (mönster, uppvikt bakkant, häll). “Live-pris från …”.
Admin-styrt, kodfritt
Diskho-modeller, tillåtna djup, blandarhål, bilder och prislistor hanteras i WP-admin.
Ren Woo-integration
Köpbar enkelprodukt. Konfiguration + preview sparas som ordermeta. Stöd för “redigera”-flöde via hash.
SEO & Core Web Vitals
Ingen JS-ramverksbundle, HowTo/Product-schema, snabb first-interaction och låg LCP även mobilt.
Så funkar det i 5 steg
1. Välj diskho: UI visar endast modeller som matchar valda mått.
2. Mått & profil: längd/djup/tjocklek med 5 mm-snap och kompatibilitetskontroll.
3. Ytmönster: dynamisk prispåverkan (t.ex. ×1.3 på mönster).
4. Placeringar & hål: kantregler, min avstånd, och dubblett-spärr.
5. Sammanfattning: pris inkl./exkl. moms, preview-bild och “lägg i varukorg”.
Teknik & arkitektur
Plugin
Shortcode-drivet, isolerat från tema. Egen admin-UI + migreringar.
Front-end
Vanilla JS, inga externa beroenden. Tillgängliga kontroller, mobil sticky-bar, debounce på pris.
Data
Prisintervall (globalt & per modell), tillåtna djup, mixer-offsets, mönsterbilder i options-API.
Utdrag (shortcode-användning):
[av_sink_builder product_id="[[123]]" redirect="checkout"]
Ordern får full konfiguration (JSON) + preview (JPEG + SVG) som bilaga/meta.
Återanvändbar som “config-motor”
1. Byt domän: måttbeställda bord, dörrar, fasadplåt, stänkskydd m.m.
2. Regellager: deklarera nya “kant-/krock-/c-c”-regler utan ramverksbyte.
3. Prismodeller: stöd för intervall, kvadratmillimeter-tillägg och per-variant-override.
Varför inte ett standard-plugin?
Generiska “product builders” saknar oftast hårda måttregler och visuell ritning. I denna kategori kostar ett felbeslut dyr produktion – därför ett skräddarsytt, regelstyrt och förklarande gränssnitt.
FAQ
Kan vi ändra modeller och priser utan kod?
Ja, allt sköts i admin (bilder, tillåtna djup, prisintervall, per-modell-override).
Behöver vi ett JS-ramverk?
Nej. Lösningen är byggd i vanilla JS för snabbare sidladdning och enklare underhåll.
Hur skickas ritningen till produktion?
Preview exporteras som JPEG + SVG och sparas på ordern tillsammans med konfigurationen.
Vill du ha en liknande konfigurator?
Vi bygger efter dina regler, priser och flöden - utan att offra fart eller SEO.