FAQ

Skjul kategori-slider #

Når en Clerk.io Recommendation tilføjes til en kategoriside, der indeholder et lavt antal produkter, vil de samme produkter blive vist på siden.

For at undgå dette kan du skjule Recommendation på kategorisider ved at tilføje en if-sætning til Recommendation design code.

Ændr tallet i if-sætningen til det minimum antal produkter, der er nødvendigt for at vise Recommendation.

{% if products.length > 7 %}
 
 <!-- Recommendation code -->

{% endif %}

F.eks.:

{% if products.length > 7 %}
<div class="clerk-wrapper">
    <div class="clerk-headline-wrapper">
        <h2 class="clerk-headline">{{headline}}</h2>
    </div>
    <div class="clerk-slider-wrapper">
        <div class="clerk-slider">
            {% for item in products %}
            <div class="clerk-slider-content">
                <!-- START PRODUCT CARD -->
                <!-- END PRODUCT CARD -->
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

Denne metode skjuler kun slideren, men tæller stadig med i dit Recommendation-forbrug. For enkelte kategorier fungerer denne metode fint.

Hvis du dog har mange kategorier med få produkter, anbefaler vi i stedet at blokere slider-injektionen på serverniveau.

Anbefal kompatible produkter #

Clerk’s AI anbefaler produkter baseret på, hvad der med størst sandsynlighed bliver købt sammen. Dette fungerer godt for de fleste butikker, men nogle kataloger indeholder produkter, der skal være fysisk eller teknisk kompatible — som bildele, elektronikkomponenter eller reservedele til maskiner.

I disse tilfælde er det ikke nok, at et produkt er populært. Det skal også passe til det produkt, kunden kigger på.

Løsningen er at tagge dine produkter med attributter, der definerer kompatibilitet, og derefter bruge dynamisk filtrering til at begrænse anbefalingerne til kun matchende produkter.

Clerk’s AI bestemmer stadig, hvilke produkter der er bedst at vise, men kun indenfor det udvalg, der passerer filteret. Det betyder, du får det bedste fra begge verdener — intelligent rangering indenfor et kompatibelt udvalg.

Tilføjelse af attributter #

De attributter, du har brug for, afhænger af, hvordan kompatibilitet fungerer i dit katalog. De skal synkroniseres til Clerk som en del af dine produktdata, enten gennem din integration eller via API’et.

Du kan verificere, at dine attributter er tilgængelige ved at gå til Data > Products og gennemse et produkt.

Her er tre almindelige mønstre, fra simple til avancerede.

Én attribut #

Hvis alle produkter fra samme leverandør garanteret er kompatible, kan du tilføje leverandøren som en attribut på hvert produkt. Derefter kan du filtrere anbefalinger til kun at vise produkter med samme leverandør.

I din embed-kode skal du definere en variabel, der indeholder det aktuelle produkts leverandør og bruge den som filter:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter="vendor = $product_vendor">
</span>

var product_vendor = "ACME Corp";

Dette sikrer, at en kunde, der ser et produkt fra ACME Corp, kun får vist anbefalinger fra samme leverandør.

Flere attributter #

Nogle gange er én attribut ikke nok. For eksempel skal en reservedel til biler matche både mærke og model på et køretøj.

Du kan kombinere flere betingelser i et enkelt filter:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter="make = $product_make and model = $product_model">
</span>

var product_make = "Toyota";
var product_model = "Corolla";

Kun produkter, der matcher både mærke og model, vil blive vist.

Kompatibilitetsgrupper #

I mere komplekse kataloger har hvert produkt en unik liste over andre produkter, det er kompatibelt med, og dette kan ikke fanges via fælles attributter alene.

Løsningen er at udregne en gruppe-identifikator baseret på sættet af kompatible produkt-ID’er og gemme det som en attribut. Produkter, der deler præcis det samme kompatible sæt, får samme identifikator, hvilket gør det muligt at filtrere på det.

For eksempel, hvis produkter A, B og C alle er kompatible med hinanden, kan du udregne et hash på baggrund af deres sorterede ID’er og gemme det som et compatibility_group-attribut på dem alle. Derefter kan du filtrere på det:

<span class="clerk"
      data-template="@product-page-alternatives"
      data-products='["CURRENT_PRODUCT_ID"]'
      data-filter='compatibility_group = $product_group'>
</span>

var product_group = "a1b2c3d4";

Denne metode fungerer godt, når kompatibilitetsforholdene kommer fra en ekstern database eller PIM-system. Hashen skal genberegnes, når kompatibilitetsdata ændres, og synkroniseres til Clerk sammen med resten af dine produktdata.

Tip: Hvis et produkt kan tilhøre flere kompatibilitetsgrupper, skal du gemme identifikatorerne som en liste-attribut og bruge in-operatoren i stedet for =. Læs mere om filter syntaks.

Vælg den rigtige metode #

Start med den simpleste metode, der dækker dit behov. Du kan altid tilføje flere attributter senere, hvis du får brug for mere detaljeret kontrol.

For et dybere indblik i alle de måder, du kan bruge filtre i embed-koder, se Dynamic Filtering.

Vis Recommendations i en dynamisk sidekurv #

En sidekurv er et kurvpanel, minicart, basket overlay eller en anden kurv-grænseflade, der åbner og opdaterer uden at indlæse en ny side. Dens HTML kan ændre sig, når en besøgende tilføjer et produkt, fjerner et produkt eller ændrer en mængde.

Recommendations i denne type kurv skal følge den aktuelle kurv-tilstand. En normal Injection, der kun render én gang ved indlæsning af siden, er ikke nok. Implementeringen skal koordinere sidekurven, kurv-events, Clerk.io Elementet og recommendation-designet.

Før du begynder #

Undersøg den aktive sidekurv, inden du laver elementet eller skriver design-scriptet. Notér sidekurv-container, indholdsområde, produkt-ID-selector og attribut, indlæsningsindikator, kurv-opdaterings-events og om opdateringer udskifter sidekurv-body eller hele containeren.

Kopier ikke selectors, attributter eller events fra en anden butik. Sidekurv-markup varierer mellem temaer og plugins. Brug platformens eksisterende kurv-events, når de er pålidelige; ellers skal du bruge det mindst nødvendige filtrerede MutationObserver til at opdage kurvændringer. Undgå at observere hele body uden filtrering, da Clerk.io’s genererede markup kan udløse observeren igen.

Opret Elementet #

Opret et dedikeret element til sidekurven. Brug API’en recommendations/complementary og logikken Best Cross-Sell Products. Konfigurér det til at læse produkt-ID’er fra den aktuelle kurv, ekskludere produkter, der allerede er i kurven, og returnér ca. fire til otte produkter.

Den foretrukne konfiguration er at sende kurv-ID’erne i element-indstillingerne: sæt API til recommendations/complementary, produkt-ID-typen til products, ID-kilden til elementet, og ID-selector og attribut til værdierne fundet i sidekurven.

Hvis sidekurven ikke indeholder sine produkt-ID’er, når Clerk.io initialiserer elementet, skal du i stedet sætte parametrene via design-scriptet:

contentElement.setAttribute("data-api", "recommendations/complementary");
contentElement.setAttribute("data-products", ids.join(","));
contentElement.setAttribute("data-exclude", ids.join(","));
contentElement.setAttribute("data-limit", "8");

Clerk("content", "#" + contentElement.id, function (content) {
  content.param({
    api: "recommendations/complementary",
    products: ids,
    exclude: ids,
    limit: 8
  });
});

Behandl denne script-baserede konfiguration som en fallback. Den skal køres efter, at de aktuelle kurv-ID’er er tilgængelige, ikke kun når siden først indlæses.

Monter elementet #

Placér elementet et stabilt sted, og flyt det renderede recommendation-root ind i sidekurven, efter at Clerk.io har rendret det. Brug uafhængige clerk- klasser, så designet ikke arver gamle provider-styles som hr- eller aw- klasser.

På desktop kan en recommendation-rail placeres ved siden af sidekurven:

.clerk-sidecart-recs {
  position: absolute;
  top: 0;
  right: 100%;
  width: 250px;
  height: 100vh;
}

Hvis platformen beskærer railen, tilføj overflow: visible !important til værtsklassen for sidekurven. På mobil skal du flytte root ind i sidekurvens body og bruge position: static.

Hold Recommendations opdaterede #

Kurvhandlinger udløser ofte flere events i træk og kan erstatte sidekurv-body. Debounce kurv-events og relevante DOM-mutationer, og vent til kurven er færdigopdateret, før du renderer.

Spor en nøgle byggende på de aktuelle produkt-ID’er, fx ids.join(","). Render kun, når den endelige nøgle ændrer sig. Hvis ændringer i antal skal påvirke recommendations, inkluder da antal i nøgle; ellers behøver en ændring i antal ikke udløse ny anbefalingsforespørgsel.

Brug et render-lock og en kort per-nøgle cooldown for at forhindre overlappende eller gentagne renders, mens fragmenter opdateres. Hvis recommendation-root fjernes under en refresh, genskab den én gang for samme kurv-nøgle.

Spor kurv-nøglen både på elementet og på det synlige recommendation-root. Før du anvender et asynkront svar, sammenlign svarnøglen med den aktuelle kurv-nøgle. Dette forhindrer et ældre svar i at erstatte recommendations for en nyere kurv.

var key = ids.join(",");
contentElement.setAttribute("data-products", ids.join(","));
contentElement.setAttribute("data-exclude", ids.join(","));
contentElement.setAttribute("data-clerk-sidecart-request-key", key);
root.setAttribute("data-clerk-sidecart-render-key", key);

if (getCartProductIds().join(",") !== key) return;

Undgå at bruge tilstedeværelsen af eksisterende produktkort som eneste vagt. En første render kan ske, før kurv-ID’er er tilgængelige, og ellers fryse sidekurven på forkerte produkter.

Fallback-rendering #

Hvis Clerk.io root forsvinder efter en kurv-refresh, marker en manuelt oprettet fallback-root med data-clerk-sidecart-fallback="true". Skjul den, mens den er tom eller loader, fjern den, når et rigtigt Clerk.io root vises, og cache fallback-HTML efter kurv-nøgle, så recovery ikke giver dobbelte API-kald.

Desktop- og mobile-layout #

På desktop kan recommendation-rail ligge ved siden af sidekurven. På mobil flyttes den ind i sidekurvens indholdsområde og viser et produkt ad gangen. Brug enten Clerk.io’s native slider-controls eller custom controls, men undlad at vise begge sæt pile.

Hvis designet ejer kontrollerne, skjul da Clerk.io’s genererede controls indenfor dette design:

.clerk-sidecart-recs .clerk-slider-nav,
.clerk-sidecart-recs .clerk-slider-prev,
.clerk-sidecart-recs .clerk-slider-next,
.clerk-sidecart-recs .clerk-slider-button,
.clerk-sidecart-recs [class*="clerk-slider-arrow"] {
  display: none !important;
}

Hvis du flytter et renderet root eller udskifter kurvfragmenter under slider-initialisering, kan produktkort mangle synlige pile. Beslut, hvilken kode der ejer kontrollerne, og test ejerskabet efter hver opdatering.

Tilføj til kurv #

Hvis anbefalingskortene har tilføj-til-kurv-knapper, brug platformens AJAX-endpoint og forhindre normal link-navigation. Efter succes skal du evt. udløse platformens standard kurv-event og skemalægge en synkronisering, når alt er færdig. Når Clerk.js er tilgængelig, skal du også tracke handlingen med Clerk("cart", "add", productId, { quantity: 1 });.

Verificér resultatet #

Verificér både en eksisterende og en tom kurv. Test åbning og lukning af sidekurven, tilføjelse og fjernelse af produkter, ændring af mængder og opdatering uden fuld side-refresh.

Tjek desktop-rail placering, mobil inline-placering, ét-produkt mobile slides, loading, tom og fejl-tilstande. Bekræft, at ingen tomt headline-only placeholder vises, mens kurven loader.

I browserens netværkspanel kan du inspicere kald til api.clerk.io. Den samme endelige kurv-nøgle må ikke udløse dobbelte anbefalingsforespørgsler, og et ældre svar må ikke erstatte det aktuelle recommendations-sæt. Til sidst, tilføj et anbefalet produkt direkte fra sidekurven og bekræft, at kurv, tracking og recommendations alle opdateres korrekt.