Recommendations

Opsæt anbefalinger efter synkronisering af dine data. Vælg oplevelser ud fra Recommendations best practices, og tilpas derefter deres placering og kontekst til dit tema.

Opret Elementer #

Hvert Element kombinerer en produktlogik, et Design og indstillinger for, hvor det vises.

1. Gå til Recommendations > Designs > New Design og vælg en Product Slider skabelon. Konfigurer den i Design Editor eller brug et code Design.
2. Gå til Recommendations > Elements > New Element.
3. Giv Elementet et beskrivende navn, og vælg dets Element type, Design og antal produkter.
4. Gem det i In preview.
5. Åbn Insert into website og vælg injection eller indlejret kode.

Et Design kan bruges til flere Elementer. Brug den genererede embed-kode og Element-ID fra din egen Store. ID’er som @product-page-alternatives er eksempler, ikke krævede navne eller ideal.shop modul-ID’er.

Identificer kontekst #

Produkt-, kategori-, artikel- og kurvanbefalinger kræver ID’er, der matcher importerede poster. Find ID-kilden separat fra den vælger, der styrer placeringen.

1. Åbn den relevante butiksside og inspicér dens HTML med browserens udviklerværktøjer.
2. Kig efter et attribut, der indeholder det aktuelle produkt-, kategori- eller artikel-ID. For kurve, inspicér hver produktrække.
3. Find den tilsvarende post i Clerk.io og sammenlign ID’er. Erstat ikke med et SKU, URL-slug eller kurvelinje-ID, medmindre det også er det importerede post-ID.
4. Gentag på en anden side og efter navigation for at bekræfte, at værdien ændres korrekt.

Temaeksempler #

Disse selectors og attributter blev identificeret i Fodmagasinets tema. Tjek dem på din webshop, før du indtaster dem i Elementets injection ID-indstillinger.

For eksempel viser Gehwol Lipidro-siden produkt-ID’et 262327. Bekræft det mod din egen importerede post i stedet for blot at kopiere værdien.

Antag ikke, at body[data-page-id] indeholder et produkt- eller kategori-ID. Bekræft dets betydning på hver sidetype. Hvor integrationen sætter pålidelig Clerk.js kontekst, kan du også bruge Clerk.js context som ID-kilde.

Kurve-ID’er #

Et kurvelinje-ID identificerer én post i kurven; det kan afvige fra det produkt-ID, Clerk.io importerede. I Fodmagasinets eksempel er data-basket-id et linje-ID, og data-item-id er produkt-ID’et.

I injection-indstillinger, brug selector og produktattributten for kurveprodukter ovenfor. Multiple ID extraction samler de matchede produkt-ID’er i én liste til cross-sell.

For at inspicere listen i udviklerværktøjer, samler dette skrivebeskyttede eksempel unikke ID’er fra temaet:

const productIds = [...new Set(
  [...document.querySelectorAll('#basket_container .basket-item-tr[data-item-id]')]
    .map(row => row.getAttribute('data-item-id'))
    .filter(Boolean)
)];
console.log(productIds);

For indlejret kode, lever de aktuelle ID’er som et JSON-array, for eksempel data-products='[123,456]'. Opdater dem og opfrisk Elementet gennem den dokumenterede integration, når kurven ændres; lad ikke en fast eksempelliste stå i produktion.

Manglende kontekst #

Hvis intet pålideligt ID findes, bed thematudvikleren om at eksponere de importerede produkt-/kategori-/artikel-ID’er samt kurveprodukt-ID’er via stabile attributter eller Clerk.js kontekst. De skal opdateres efter navigation og kurveændringer, inklusive tom kurv-tilstand.

Konfigurer placeringer #

Vælg stabile, unikke mål inde i webshopindholdets område. Undgå genererede klasser eller et modulnummer kopieret fra en anden webshop.

Under Insert into website > Using injection, konfigurer URL-målretning, målselector og placering. Brug Before eller After for søskendeelementer, eller Inside first / Inside last for indhold inden for målet.

Tjek, at selector matcher én gang på hver tilsigtet side, også efter dynamisk navigation. Brug Element settings for alle injectionsmuligheder.

Fodmagasinet-eksempler #

For produktsider med beskrivelsestabs er .item-page .tabs-outer-container et eksempel på mål for alternativer med Before. Cross-sell bruger Before .item-page #ratings og placerer den efter beskrivelsen og før anmeldelser.

For et produkt uden tabs, inspicér det tilbageværende indhold og vælg et stabilt fallback. I dette tema kan #ratings bruges som fallback, når det er tilstede. Gør fallback-betingelser gensidigt udelukkende, så alternativer kun vises én gang og bevarer den tilsigtede rækkefølge med cross-sell.

Kurvanbefalinger kan bruge After body[data-page-type="basket"] #basket-form. Bekræft, at det injicerede Element forbliver inden for checkout-bredden, over footeren. Giv et separat mål eller skjul Elementet, hvis en tom kurv udelader formen.

For artikler skal du inspicere den faktiske artikel-indholds-wrapper og indsætte efter indholdet, før uvedkommende navigation eller footermoduler. Forside- og artikelmodul-ID’er, præcise layouts og overskrifter skal vælges til din egen webshop.

Hvis du erstatter native anbefalinger, skal du skjule eller deaktivere deres visning efter at have bekræftet Clerk.io-placeringen. Bevar manuelt konfigurerede produktopkoblinger, så webshoppen kan genbruge dem. Undgå Replace på en wrapper, der indeholder uvedkommende indhold.

Valgfrie kategoritærskler kræver et pålideligt total eller bekræftet sidenummerering. Kun at tælle synlige kort kan skjule anbefalinger på senere sider i en stor kategori. Vælg din egen tærskel og test både første og sidste side.

Købsfunktioner #

Genbrug webshoppens native købsadfærd, så varianter, kurvetotaler og fejl fungerer ensartet. Et produktside-link er det sikre udgangspunkt, når der kræves yderligere valg.

Undersøg et native købskontrol, dets event-handler og en købsanmodning i udviklerværktøjer ved hjælp af en aftalt testkurv. Bekræft endpoint, request-metode, payload, variantkrav, response-håndtering og kurveopdatering, før du tilslutter en Clerk.io-knap.

På Fodmagasinet brugte den bekræftede native flow /basket/add med items_id og quantity via ajax_post og basket_add_receive. Disse endpoint-, felt- og funktionsnavne er temaeksempler; genbrug deres faktiske signatur og håndtering fra webshoppen.

For simple produkter, test at én handling tilføjer det ønskede antal og opdaterer den native kurv. For produkter med behov for størrelse, farve eller andet valg, åbn product.url for valg, medmindre din integration eksplicit understøtter disse valg.

Antag ikke variantkrav ud fra lager eller nul forældrepris. Vis native fejl tydeligt og handlingbare. Se variant FAQ for hvorfor en respons-besked adapter ikke er en generel løsning.

Kortdata #

Brug de samme bekræftede produktkortregler i Search og Recommendations. Inspektér importerede eksempler for et simpelt produkt, et nedsat produkt, et udsolgt produkt og et produkt med varianter, før du tilpasser en skabelon.

Fodmagasinets returnerede produktdata bruger price og list_price. For eksempel returnerede produkt 430087 begge som 99, så det bør ikke vise rabatbadge eller gammel pris. Brug list_price konsekvent til denne mapping; erstat ikke med retail_price.

Følgende minimale Liquid-kort linker til produktsiden og antager, at importeret price er valideret. Det overlader bevidst købsfunktion, lagerlabels og rabatmarkup til din bekræftede datamapping.

{% for product in products %}
  <a class="ideal-clerk-card" href="{{ product.url }}" data-event-type="product-click">
    <img src="{{ product.image }}" alt="{{ product.name }}" loading="lazy">
    <span>{{ product.name }}</span>
    <span>{{ product.price | money }}</span>
    <span>Se produkt</span>
  </a>
{% endfor %}

For en bekræftet list_price mapping, brug samme sammenligning for både badge og gammel pris:

{% if product.list_price and product.list_price > product.price %}
  <span class="ideal-clerk-card__badge">Udsalg</span>
  <del>{{ product.list_price | money }}</del>
{% endif %}

Validér felttyper og oversæt labelen, før du bruger dette eksempel. For en rabat kræves en numerisk regulær pris højere end salgsprisen. Brug samme felt til gammel pris og badge. Bland ikke list_price i badgen med retail_price i den gamle pris.

Når importerede variantpriser er tilgængelige, vis den laveste gyldige købte variantpris med en lokaliseret Fra label, såsom Fra på dansk. Bekræft varianttilgængelighed, moms, valuta og eventuelle viste besparelser mod samme variant.

For eksempel returnerede Fodmagasinet-produktet 285207 price: 0, list_price: 0 og variant_prices: [109,65]. Dets kort kan vise Fra 65,00 kr. ved at bruge den bekræftede variantpris-array i stedet for at vise nul. Vis ikke en gammel forælderpris på nul.

Dette temas Liquid-visning bruger product.variant_prices | min | money_eu 2, efterfulgt af kr.. Tjek, at din egen array indeholder de ønskede købte varianter, og tilpas label og valutaformatering til din Store.

En beregnet kortpris ændrer ikke den importerede forælder price, der bruges til sortering. Ret kilden eller importmappet, hvis sortering stadig bruger en forkert eller nul værdi. Se price FAQ.

Afslut med setup checklist.