Anbefalinger i dit eget tema

Anbefalinger er indbygget i alle Shoporamas egne temaer, hvor de sættes op som et modul i Sidedesigneren. Har du fået lavet dit eget tema, eller tilpasset et af vores kraftigt, kan du stadig få anbefalinger ind. Der er to veje: én uden kode, og én for udviklere.

Uden kode: peg på et sted på siden

Gå til Design → Anbefalinger i eget tema. Her udfylder du en linje pr. anbefalingsboks du vil have ind, og gemmer. Der skal ikke redigeres i temaets filer.

Felterne betyder:

• Sider – hvilke sider boksen skal på. Vælg "Alle sider", eller begræns til fx kun produktsider eller kun kurven.
• CSS-selector – hvilket element på siden boksen skal placeres i forhold til. Det kan være så enkelt som footer, eller mere præcist som .product-page .description.
• Position – om boksen skal ind før elementet, efter det, eller indsat i det som det sidste indhold.
• Type – hvilken slags anbefaling. De samme fem som i modulet.
• Antal og Kolonner – hvor mange produkter der højst vises, og hvor mange der står ved siden af hinanden på store skærme.
• Overskrift – teksten over boksen. Lader du den stå tom, vises ingen overskrift.

Sådan finder du den rigtige selector

Hvis du ikke ved hvad du skal skrive i selector-feltet: højreklik på det sted i din shop hvor boksen skal stå, vælg "Inspicér", og se hvilken klasse eller hvilket mærke elementet har. Start hellere bredt end smalt. footer med positionen "Før" giver en boks nederst på siden, lige over bunden, og det virker på stort set alle temaer.

Findes elementet ikke på en given side, sker der ingenting. Boksen fjerner sig selv i stedet for at efterlade et hul. Det gør det ufarligt at prøve sig frem.

Med kode: Smarty-tagget

Vil du styre placeringen helt præcist i templaten, kan du bruge tagget 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 – produktobjektet på en produktside. Udelades på sider uden ét bestemt produkt
• limit – højeste antal produkter (standard 4)
• columns – kolonner på store skærme (standard 4)
• title – overskrift over boksen

Tagget udskriver en pladsholder og henter selve produkterne bagefter. Vil du selv styre hvordan kortene ser ud, kan temaet have sin egen components/reco-loop.html. Findes den, bruges den. Findes den ikke, falder vi tilbage til temaets almindelige produktkort, og ellers til en simpel indbygget visning.

Hvordan virker det under motorhjelmen?

Uanset hvilken af de to metoder du bruger, er opførslen den samme:

• Selve siden leveres uden anbefalinger, og boksen hentes bagefter. Det gør at anbefalingerne aldrig forsinker den første visning af siden, også selvom de er placeret øverst.
• Der reserveres plads til boksen på forhånd med et gråt skelet i samme størrelse som de rigtige kort, så siden ikke hopper når indholdet lander.
• Der hentes ingen eksterne filer. Al kode ligger inline og fylder omkring 5 KB i alt.
• Svaret gemmes i cache i en time. To besøgende på samme produktside i samme time koster altså kun ét databaseopslag.
• "Kundens senest sete" ligger i browserens localStorage på kundens egen maskine og sendes kun med når netop den type skal vises.

Ofte stillede spørgsmål

Hvad sker der hvis JavaScript fejler, eller selectoren ikke findes?

Så fjerner boksen sig selv, og temaets egen sektions-ramme ryddes også væk hvis den står tom tilbage. Der bliver altså hverken et tomt hul eller et blankt bånd. Hver boks håndteres for sig, så en fejl i én boks stopper ikke de øvrige på siden.

Jeg tager et produkt offline midt på dagen. Kan det stadig blive vist?

Ja, i op til en time. Anbefalingssvarene caches i en time, så en boks der allerede er beregnet kan nå at vise varen indtil cachen udløber. Klikker kunden på den, kommer de til produktsiden, der selv håndterer at varen ikke er tilgængelig. Skal det slå igennem med det samme, kan du tømme shoppens cache.

Hvor meget fylder det, og hvad koster det i hastighed?

Cirka 5 KB inline kode, ingen eksterne filer, og ingen blokerende forespørgsler. Målingen sendes med navigator.sendBeacon, som er asynkron og aldrig venter på svar. På en shop uden anbefalinger sat op udskrives der ingenting.

Kan jeg have flere bokse på samme side?

Ja. Både selector-metoden og tagget kan bruges flere gange på samme side. Selector-metoden tillader op til ti linjer i alt.

Virker det sammen med sidecache?

Ja. Det der leveres med siden er den samme pladsholder for alle besøgende, og alt besøgsspecifikt hentes bagefter. Derfor kan sider med anbefalinger caches statisk præcis som før.

Kan jeg style boksen selv?

Ja. Boksen har klasserne sr-reco, sr-reco-head, sr-reco-title og sr-reco-body, som du kan style i dit eget stylesheet. Højden på pladsreservationen kan justeres med CSS-variablerne --sr-reco-img og --sr-reco-text, hvis dine produktkort er højere eller lavere end standarden.

Se også Anbefalinger: vis automatisk de produkter dine kunder leder efter og Sådan læser du statistikken for anbefalinger.