Cut to Size: Att bygga VisualCutter i Odoo

Kunder som vill rita sina egna skivor

En av PlastShops mest efterfrågade tjänster är kapning. Kunden vill ha en polykarbonatskiva som är exakt 437 x 612 mm. Inte standardmått – deras specifika mått för deras specifika projekt. Det är vanligt i industriplast. Och det är omöjligt att hantera med en vanlig webbshops produktkonfigurator.

VisualCutter är lösningen: ett interaktivt verktyg där kunden anger mått, ser en visuell representation av sin beställning och får ett pris beräknat i realtid. Det låter enkelt. Det var inte enkelt.

Konceptet

Kunden väljer ett material och en tjocklek. Sedan anger de önskade mått – bredd och höjd för skivor, längd för stänger, ytter- och innerdiameter för rör. Verktyget visar en skalenlig ritning av det beställda materialet med mått markerade.

Priset beräknas baserat på area (eller längd/volym beroende på produkttyp). Basispriset per kvadratmeter multipliceras med arean plus ett kapningsavgift. Kunden ser totalpriset uppdateras i realtid medan de justerar måtten.

Frontend: Canvas-baserat

Gränssnittet är byggt med HTML5 Canvas. Jag valde canvas framför SVG av prestandaskäl – vi renderar om visualiseringen vid varje musrörelse när kunden drar i handtagen för att ändra mått.

Canvas-koden är en OWL 2.0-komponent som renderas i Odoos webbshop. Det var den svåraste delen av hela projektet: att få en interaktiv canvas-komponent att fungera snyggt inuti Odoos template-system.

OWL-komponenten hanterar:

• Rendering av materialformen (rektangel, cirkel, rörprofil)
• Drag-handtag för att ändra dimensioner
• Realtidsberäkning av area och pris
• Input-fält för exakta mått
• Validering (minsta och största tillåtna mått per material)

Beräkningslogiken

Prisberäkningen ser enkel ut men har flera lager:

area = bredd_m * höjd_m
materialkostnad = area * pris_per_m2 * tjockleksfaktor
kapningsavgift = antal_kap * pris_per_kap
spill = beräkna_spill(bredd, höjd, standardskiva)
totalpris = materialkostnad + kapningsavgift + spillpåslag

Spillberäkningen är viktig. Vi kapar från standardskivor (typiskt 2000x1000mm eller 3000x1500mm). Om kunden beställer 450x780mm får vi ut ett visst antal per standardskiva, men det blir alltid spill. Det spillet kostar pengar och måste in i priset.

Jag lade spillberäkningen i Python på servern, inte i JavaScript på klienten. Anledningen är att klienten inte ska kunna manipulera priset. Frontend skickar mått till backend via ett API-anrop, backend beräknar och returnerar priset.

Backend: Odoo-integration

När kunden är nöjd med sin konfiguration och lägger till i varukorgen skapas en speciell orderrad. Den innehåller inte en vanlig produkt utan en konfigurerad cut-to-size-produkt med alla mått sparade som metadata.

Orderraden refererar till basmaterialet (product.template) men har extra fält för bredd, höjd, antal och beräknat pris. I backend ser handläggaren en sammanfattning: ”Polykarbonat klar, 450x780mm, tjocklek 5mm, 3 st”.

Det krävde en utökning av sale.order.line-modellen med nya fält och en anpassad compute-metod som beräknar radpriset baserat på konfigurationen istället för standardpriset.

Synkronisering frontend-backend

Den tekniska utmaningen var att hålla frontend och backend synkroniserade. Klienten visar ett pris. Backend validerar och beräknar det riktiga priset. De måste matcha, annars tappar kunden förtroendet.

Lösningen: en lightweight beräkning i JavaScript för omedelbar feedback (uppdateras vid varje knapptryck) och en fullständig serverberäkning som körs när kunden klickar ”Lägg i varukorg”. Om det finns en diskrepans (t.ex. för att priserna uppdaterats sedan sidan laddades) visar systemet det korrekta priset och ber kunden bekräfta.

Materialspecifika regler

Inte alla material kan kapas i alla mått. PTFE har andra minimidimensioner än polykarbonat. Vissa material kapas bara i hela millimeter, andra i halva. Glasfiber har andra spillfaktorer än massiv plast.

Reglerna definieras per produktkategori i Odoo och skickas till frontend som JSON. VisualCutter anpassar sitt gränssnitt baserat på materialet: min/max-mått, stegstorlek, vilka dimensioner som är relevanta och vilken form som ritas.

Vad jag skulle göra annorlunda

Om jag byggde VisualCutter igen skulle jag börja med en enklare version. Min första iteration försökte hantera alla materialtyper (skivor, stänger, rör, profiler) i samma komponent. Det blev en kodbas som var svår att underhålla.

Idag hade jag byggt separata komponenter per materialtyp med en gemensam prisberäknings-backend. Mer kod totalt men enklare att förstå och underhålla.

Trots det är VisualCutter den funktion som imponerar mest på kunder. Att kunna rita sin beställning och se priset direkt – det är något de inte får hos konkurrenterna. Och det är vad som gör custom-utveckling värt besväret.