Temat som tog tre veckor: arc_theme_industrial

Tre veckor som kändes som tre månader

Jag trodde att temat skulle ta en vecka. Odoo har ett template-system, det finns dokumentation, hur svårt kan det vara? Svaret: väldigt svårt. arc_theme_industrial tog tre veckor av intensivt arbete och innehåller mer CSS och XML än jag trodde var möjligt.

Problemet är inte att Odoos template-system är dåligt. Det är kraftfullt. Men det är också komplext, dåligt dokumenterat och fullt av specialfall som du bara upptäcker genom trial-and-error.

Varför ett eget tema?

Odoo 18 CE har ett standardtema som är okej för en generisk webbshop. Men PlastShop är inte generisk. Vi behöver en professionell B2B-upplevelse: snabb produktvy utan sidladdning, tydliga tekniska specifikationer, visuella indikatorer för lagerstatus och en design som säger ”industriellt” snarare än ”mode”.

Jag testade först några tredjepartsteman. Clarico Vega, Emipro – de såg bra ut i demon men funkade dåligt med mina custom moduler. Konflikter överallt. Så jag skrotade dem och byggde eget.

Quick View

Quick View är en modal som öppnas när kunden klickar på en produkt i katalogen. Istället för att ladda en ny sida visar den produktens bild, beskrivning, pris och ”Lägg i varukorg”-knapp i en overlay. Det sparar tid och sidladdningar.

Tekniskt är det en OWL-komponent som gör ett asynkront anrop till Odoo-backend, hämtar produktdata som JSON och renderar det i en modal. Utmaningen var att få det att fungera med produktvarianter – när kunden byter attribut (t.ex. tjocklek) ska priset och tillgängligheten uppdateras i modalen utan att stänga den.

Produktetiketter

I PlastShops katalog behöver vissa produkter sticka ut. Nya produkter, produkter på rea, produkter som snart tar slut. Jag byggde ett etikettssystem med visuella badges:

• NY – grönt märke för produkter tillagda senaste 30 dagarna
• REA – rött märke med nedsatt pris
• Populär – baserat på antal beställningar
• Lågt lager – orange varning när lagersaldot är under tröskelvärdet

Etiketterna beräknas dynamiskt. Ingen manuell hantering behövs. En produkt som lagts till igår får automatiskt NY-märket som försvinner efter 30 dagar.

Tabbade produktsidor

En industriplastprodukt har mycket information: beskrivning, tekniska specifikationer, dokument (TSB/SDS), relaterade produkter och kundrecensioner. Att visa allt på en sida blir oöverskådligt.

Jag organiserade informationen i tabbar. Flik 1: Översikt och beskrivning. Flik 2: Tekniska data (från TSB-modulen i core). Flik 3: Dokument att ladda ner. Flik 4: Relaterade produkter. Varje flik laddar sitt innehåll lazy – bara när kunden klickar på den.

Template-arv i Odoo fungerar med xpath. Du identifierar ett element i den befintliga mallen och injicerar din HTML före, efter eller istället för det. Det ser ut ungefär så här:

<template id="product_tabs" inherit_id="website_sale.product">
  <xpath expr="//div[@id='product_full_description']" position="replace">
    <div class="arc-product-tabs">
      <!-- Tab-innehåll här -->
    </div>
  </xpath>
</template>

Image Hotspots

Vissa produktbilder har intressanta detaljer som behöver förklaras. Hotspots är klickbara punkter på produktbilden som visar en tooltip med information. Klicka på en punkt och du ser ”Uv-skyddande ytbeläggning” eller ”Slagfast polykarbonatkärna”.

Hotspot-positionerna definieras i procent av bildens bredd och höjd, så de skalas korrekt oavsett skärmstorlek. Administratören placerar dem i backend via en visuell editor – klicka på bilden, skriv texten, spara.

Infinite Scroll

Med 18 000 produkter kan du inte visa alla på en sida. Paginering är standard men infinite scroll ger en bättre upplevelse. Kunden scrollar ner och nya produkter laddas automatiskt.

Implementeringen använder IntersectionObserver API i JavaScript. När kunden scrollar nära botten av produktlistan triggas ett AJAX-anrop som hämtar nästa sida med produkter. Jag lade till en ”Laddar…”-animation och en knapp för att manuellt ladda mer om automatisk scroll inte triggar.

Template-arv – det svåra

Odoo 18 har ändrat hur snippets fungerar jämfört med äldre versioner. Xpath-uttryck som fungerade i Odoo 16 eller 17 fungerar inte längre. I Odoo 18 ska du använda //t[@id=’default_snippets’], inte //snippets[@id=’o_theme_snippets’]. Den detaljen kostade mig en halv dag.

cover_properties var en annan fälla. URL:er i cover-egenskaper ska skrivas som url(/web/image/ID) utan citattecken runt URL:en. Med citattecken ser det korrekt ut i koden men bilden visas inte.

Prestanda

Ett tema kan döda prestandan om man inte tänker sig för. Varje extra HTTP-request, varje stor bild, varje icke-optimerad CSS-fil gör sidan långsammare. Jag optimerade:

• Lazy loading av bilder under folden
• Minifierad CSS och JavaScript
• Specifika queries istället för att ladda hela relationer
• Caching av beräknade värden (etiketter, priser)

Resultatet: produktkatalogen laddar på under 2 sekunder med 100+ produkter synliga. Inte rekordsnabbt men acceptabelt för en B2B-webbshop med tung produktdata.

Hade jag gjort det igen?

Ja, men med mer respekt för tidsuppskattningen. Ett eget tema ger full kontroll över kundupplevelsen. Men det kräver djup förståelse för Odoos template-system, QWeb, OWL och CSS. Räkna med minst dubbla tiden mot vad du tror det ska ta.