Anbefalinger i ditt eget tema

Anbefalinger er innebygd i alle Shoporamas egne temaer, der de konfigureres som et modul i Sidedesigneren. Hvis du har laget ditt eget tema eller tilpasset et av våre kraftige temaer, kan du fortsatt få inn anbefalinger. Det finnes to måter å gjøre dette på: én uten koding og én for utviklere.

Uten koding: velg et sted på siden

Gå til Design → Anbefalinger i ditt eget tema. Her fyller du ut én linje per anbefalingsboks du ønsker å inkludere, og lagrer. Du trenger ikke å redigere temaets filer.

Feltene betyr:

• Sider – hvilke sider boksen skal vises på. Velg «Alle sider», eller begrens det til for eksempel kun produktsider eller kun handlekurven.
• CSS-selektor – hvilket element på siden boksen skal plasseres i forhold til. Det kan være så enkelt som footer, eller mer presist som .product-page .description.
• Posisjon – om boksen skal vises før elementet, etter det eller innfelt i det som det siste innholdet.
• Type – hvilken type anbefaling. De samme fem som i modulen.
• Antall og kolonner – hvor mange produkter som maksimalt skal vises, og hvor mange som skal stå ved siden av hverandre på store skjermer.
• Overskrift – teksten over boksen. Hvis du lar feltet stå tomt, vises ingen overskrift.

Slik finner du riktig selektor

Hvis du ikke vet hva du skal skrive i selektor-feltet: høyreklikk på stedet i nettbutikken din der boksen skal stå, velg «Inspiser», og se hvilken klasse eller hvilket merke elementet har. Det er bedre å starte bredt enn smalt. En footer med posisjonen «Før» gir en boks nederst på siden, rett over bunnen, og det fungerer på stort sett alle temaer.

Hvis elementet ikke finnes på en gitt side, skjer det ingenting. Boksen fjerner seg selv i stedet for å etterlate et hull. Det gjør det trygt å prøve seg frem.

Med kode: Smarty-taggen

Hvis du vil styre plasseringen helt nøyaktig i malen, kan du bruke taggen direkte:

<{recommendations type="also_viewed" product=$product limit=4 columns=4 title="Andre så også på"}>

Parametrene er:

• type – also_viewed, also_bought, similar, popular eller recently_viewed
• product – produktet på en produktside. Utelates på sider uten ett bestemt produkt
• limit – maksimalt antall produkter (standard 4)
• columns – kolonner på store skjermer (standard 4)
• title – overskrift over boksen

Tagget skriver ut en plassholder og henter selve produktene etterpå. Hvis du selv vil styre hvordan kortene ser ut, kan temaet ha sin egen components/reco-loop.html. Hvis den finnes, brukes den. Hvis den ikke finnes, faller vi tilbake til temaets vanlige produktkort, og ellers til en enkel innebygd visning.

Hvordan fungerer det under panseret?

Uansett hvilken av de to metodene du bruker, er oppførselen den samme:

• Selve siden leveres uten anbefalinger, og boksen hentes etterpå. Dette gjør at anbefalingene aldri forsinker den første visningen av siden, selv om de er plassert øverst.
• Det reserveres plass til boksen på forhånd med et grått skjelett i samme størrelse som de egentlige kortene, slik at siden ikke hopper når innholdet lastes inn.
• Det hentes ingen eksterne filer. All kode ligger innebygd og fyller totalt rundt 5 KB.
• Svaret lagres i cachen i en time. To besøkende på samme produktside i løpet av samme time koster dermed bare én databasesøk.
• «Kundens sist viste» ligger i nettleserens localStorage på kundens egen maskin og sendes kun med når akkurat den typen skal vises.

Ofte stilte spørsmål

Hva skjer hvis JavaScript svikter, eller hvis selektoren ikke finnes?

Da fjerner boksen seg selv, og temaets egen seksjonsramme fjernes også hvis den står tom igjen. Det blir altså verken et tomt hull eller et blankt bånd. Hver boks håndteres for seg, så en feil i én boks stopper ikke de øvrige på siden.

Jeg tar et produkt ut av sortimentet midt på dagen. Kan det fortsatt vises?

Ja, i opptil en time. Anbefalingssvarene lagres i cachen i en time, slik at en boks som allerede er beregnet, kan rekke å vise varen frem til cachen utløper. Hvis kunden klikker på den, kommer de til produktsiden, som selv håndterer at varen ikke er tilgjengelig. Hvis det skal gjelde umiddelbart, kan du tømme nettbutikkens cache.

Hvor mye plass tar det, og hva koster det i hastighet?

Omtrent 5 KB innebygd kode, ingen eksterne filer og ingen blokkerende forespørsler. Målingen sendes med navigator.sendBeacon, som er asynkron og aldri venter på svar. På en nettbutikk uten anbefalinger blir ingenting skrevet ut.

Kan jeg ha flere bokser på samme side?

Ja. Både selektormetoden og tagget kan brukes flere ganger på samme side. Selektormetoden tillater opptil ti linjer totalt.

Fungerer det sammen med sidecache?

Ja. Det som leveres med siden er den samme plassholderen for alle besøkende, og alt som er besøksspesifikt hentes etterpå. Derfor kan sider med anbefalinger caches statisk akkurat som før.

Kan jeg style boksen selv?

Ja. Boksen har klassene sr-reco, sr-reco-head, sr-reco-title og sr-reco-body, som du kan style i ditt eget stylesheet. Høyden på plassholderen kan justeres med CSS-variablene --sr-reco-img og --sr-reco-text, hvis produktkortene dine er høyere eller lavere enn standarden.

Se også Anbefalinger: vis automatisk produktene kundene dine leter etter og Slik leser du statistikken for anbefalinger.