Rekommendationer inom ditt eget tema

Rekommendationer är inbyggda i alla Shoporamas egna teman, där de konfigureras som en modul i Sidedesignern. Om du har skapat ett eget tema eller anpassat ett av våra teman i stor utsträckning kan du fortfarande lägga in rekommendationer. Det finns två sätt: ett utan kod och ett för utvecklare.

Utan kod: peka på en plats på sidan

Gå till Design → Rekommendationer i ditt eget tema. Här fyller du i en rad per rekommendationsruta som du vill ha med och sparar. Du behöver inte redigera temats filer.

Fälten betyder:

• Sidor – vilka sidor rutan ska visas på. Välj ”Alla sidor” eller begränsa till t.ex. endast produktsidor eller endast varukorgen.
• CSS-selektor – vilket element på sidan rutan ska placeras i förhållande till. Det kan vara så enkelt som footer, eller mer precist som .product-page .description.
• Position – om rutan ska placeras före elementet, efter det eller infogas i det som sista innehåll.
• Typ – vilken typ av rekommendation. Samma fem som i modulen.
• Antal och kolumner – hur många produkter som högst ska visas och hur många som ska stå bredvid varandra på stora skärmar.
• Rubrik – texten ovanför rutan. Om du lämnar fältet tomt visas ingen rubrik.

Så här hittar du rätt selektor

Om du inte vet vad du ska skriva i selektorfältet: högerklicka på den plats i din butik där rutan ska placeras, välj ”Inspektera” och se vilken klass eller vilket märke elementet har. Börja hellre brett än smalt. En footer med positionen ”Før” ger en ruta längst ner på sidan, precis ovanför botten, och det fungerar på i stort sett alla teman.

Om elementet inte finns på en viss sida händer ingenting. Rutan försvinner av sig själv istället för att lämna ett hål. Det gör det ofarligt att prova sig fram.

Med kod: Smarty-taggen

Om du vill styra placeringen helt exakt i mallen kan du använda taggen direkt:

<{recommendations type="also_viewed" product=$product limit=4 columns=4 title="Andra tittade också på"}>

Parametrarna är:

• type – also_viewed, also_bought, similar, popular eller recently_viewed
• product – produktobjektet på en produktsida. Utelämnas på sidor utan en specifik produkt
• limit – högsta antal produkter (standard 4)
• columns – antal kolumner på stora skärmar (standard 4)
• title – rubrik ovanför rutan

Taggen skriver ut en platshållare och hämtar själva produkterna efteråt. Om du själv vill styra hur korten ser ut kan temat ha sin egen components/reco-loop.html. Om den finns används den. Om den inte finns faller vi tillbaka till temats vanliga produktkort, och i övrigt till en enkel inbyggd visning.

Hur fungerar det under huven?

Oavsett vilken av de två metoderna du använder är beteendet detsamma:

• Själva sidan levereras utan rekommendationer, och rutan hämtas efteråt. Det gör att rekommendationerna aldrig fördröjer den första visningen av sidan, även om de är placerade högst upp.
• Utrymme reserveras i förväg för rutan med ett grått skelett i samma storlek som de riktiga korten, så att sidan inte hoppar när innehållet laddas.
• Inga externa filer hämtas. All kod ligger inline och upptar totalt cirka 5 KB.
• Svaret lagras i cachen i en timme. Två besökare på samma produktsida under samma timme kostar alltså bara en databasuppslagning.
• ”Kundens senast visade” lagras i webbläsarens localStorage på kundens egen dator och skickas endast med när just den typen ska visas.

Vanliga frågor

Vad händer om JavaScript inte fungerar eller om selektorn inte finns?

Då tas rutan bort automatiskt, och temats egen sektionsram rensas också bort om den står tom kvar. Det blir alltså varken ett tomt hål eller ett tomt band. Varje ruta hanteras separat, så ett fel i en ruta stoppar inte de övriga på sidan.

Jag tar bort en produkt mitt på dagen. Kan den fortfarande visas?

Ja, i upp till en timme. Rekommendationerna cachelagras i en timme, så en ruta som redan har beräknats hinner visa produkten tills cachen löper ut. Om kunden klickar på den kommer de till produktsidan, som själv hanterar att varan inte är tillgänglig. Om det ska träda i kraft omedelbart kan du tömma webbutikens cache.

Hur mycket utrymme tar det, och vad kostar det i hastighet?

Cirka 5 KB inline-kod, inga externa filer och inga blockerande förfrågningar. Mätningen skickas med navigator.sendBeacon, som är asynkron och aldrig väntar på svar. På en webbutik utan aktiverade rekommendationer skrivs ingenting ut.

Kan jag ha flera rutor på samma sida?

Ja. Både selektormetoden och taggen kan användas flera gånger på samma sida. Selektormetoden tillåter upp till tio rader totalt.

Fungerar det tillsammans med sidcache?

Ja. Det som levereras med sidan är samma platshållare för alla besökare, och allt som är specifikt för besökaren hämtas därefter. Därför kan sidor med rekommendationer cachelagras statiskt precis som tidigare.

Kan jag själv styla rutan?

Ja. Rutan har klasserna sr-reco, sr-reco-head, sr-reco-title och sr-reco-body, som du kan utforma i ditt eget stilark. Höjden på platshållaren kan justeras med CSS-variablerna --sr-reco-img och --sr-reco-text om dina produktkort är högre eller lägre än standarden.

Se även Rekommendationer: visa automatiskt de produkter som dina kunder söker efter och Så här läser du statistiken för rekommendationer.