Recommendations

Category Page

Sådan bruger du vores logik for kategorianbefalinger til at vise alle produkter på kategorisider.

Slider #

Kategorisider bruges, når en kunde leder efter en bestemt type produkt, men ikke et specifikt produkt som f.eks. t-shirts, sofaer eller løbesko. Hvis de havde et bestemt produkt i tankerne, ville de højst sandsynligt have ledt efter det først ved hjælp af søgefunktionen.

Kategorier har en tendens til at have mange produkter, så det kan være svært at navigere i dem, men mange kunder leder efter de samme få produkter i kategorierne. Disse udvalgte produkter har en tendens til at være de samme for hver kunde, så de vil sandsynligvis være bestsellere. Det skyldes, at bestsellere giver kunden en følelse af sikkerhed - hvis produktet var populært blandt andre, er der et bevis på værdien.

Ved at placere disse varer øverst på kategorisiden som en gruppe af anbefalinger, bliver det meget nemmere for dine kunder at navigere. Det er sandsynligt, at disse produkter vil vække nye kunders interesse og derfor øge chancerne for konvertering.

Fuld kategoriside #

Clerk kan bruges til at vise alle resultater på en kategoriside, hvilket giver mulighed for smart sortering af resultater og brug af Merchandising til en høj grad af kontrol over, hvilke produkter der prioriteres.

Denne artikel beskriver brugen af vores API og Clerk.js-biblioteket som to forskellige måder at håndtere denne gengivelse på.

API-slutpunkter #

Vores Anbefalinger i kategorien endpoints fungerer på nøjagtig samme måde som vores endpoint på søgesiden. Den eneste forskel er, at disse endpoints er afhængige af et kategori-id i stedet for en søgeforespørgsel.

På grund af dette kan de bruges til at vise alle produkter på kategorisider ved at erstatte enhver eksisterende webshop-logik til at hente produkter med Clerks API. Hvis du bruger en serverside API-opsætning, kan du normalt beholde den eksisterende styling ved blot at hente produktdataene fra Clerk, mens du gengiver det visuelle gennem webshoppens kode.

Dette er de to tilgængelige endpoints:

recommendations/category/popular
(rangeret efter bedst sælgende varer - ændres lejlighedsvis)
recommendations/category/trending
(rangeret efter produkter, der trender i salg - ændres ofte)

Hvilket endpoint, der er bedst at bruge, afhænger af virksomhedstypen.

Mange modebutikker med et lager, der ofte ændres, får generelt mest ud af trendprodukter. Butikker med kataloger, hvor kunderne har tendens til at købe de samme varer flere gange, som f.eks. kosttilskud eller fødevarebutikker, bør generelt bruge bestsellere.

API-slutpunktsparametre #

Her er en oversigt over, hvad hvert argument gør, når man foretager et kald til et kategori-slutpunkt

key: Den offentlige nøgle til butikken
limit: Antallet af produkter, der skal returneres
category: ID’et for den kategori, der aktuelt gennemses
offset: Indekset, som resultatsættet skal starte fra. Bruges med limit til paginering.
orderby: En attribut til at sortere resultaterne på. Hvis den ikke sendes, vil Clerk sortere efter bedst sælgende varer.
order: Kan være enten asc eller desc. Sorterer produkterne i stigende eller faldende rækkefølge.
attributes: En liste over attributter, som Clerk skal returnere. Nyttig til hurtige opsætninger, hvor alle produktdata returneres fra Clerk. Hvis ikke indstillet, returnerer Clerk kun produkt-id’er.
filter: En streng, der konfigurerer Clerk til kun at returnere en delmængde af produkter. Bruges med eksisterende filtre på siden eller Clerks facets for at give kunderne mulighed for at indsnævre resultaterne
facets: En liste over attributter, der skal returneres som produktmuligheder, som derefter kan konverteres til et filter, når en besøgende vælger det
labels: Den eller de etiketter, der er knyttet til kategorisiden. Bruges til at identificere performance i my.clerk.io
visitor: Besøgende-ID for den aktuelle besøgende, der surfer

Filtrering af resultater #

Når du sender facets i anmodningen, vil Clerk returnere en liste over de mulige filterindstillinger for det pågældende resultatsæt. Hvis f.eks. det billigste produkt i kategorien er €10, og det dyreste er €500, kan den laveste prisspand være €10-50, og den højeste €450+ eller lignende. En kategori kan have 10 forskellige mærker og en anden kun 3 i facetterne.
Når en besøgende vælger en mulighed, skal den konverteres til et filter, der sendes i det næste API-kald. F.eks. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
Vi anbefaler at oprette en grafisk grænseflade baseret på Clerks-facetter og angive dem som valgbare muligheder, da dette automatisk holder styr på, hvilke muligheder der er tilgængelige i hver kategori.
Det kan også gøres ved hjælp af en eksisterende filter-GUI, så længe de besøgendes valg kan konverteres til en filterstreng.
Læs mere om filtre her

Paginering af resultater #

Parametrene limit og offset bruges sammen til paginering
limit styrer mængden af produkter, der skal returneres for hvert opkald
offset styrer startpunktet i den fulde liste af resultater
Det første kald skal have offset: 0, og hvert efterfølgende kald offset: offset + limit
- Side 1: limit: 60, offset: 0
- Side 2: limit: 60, offset: 60
- Side 3: limit: 60, offset: 120
- … og så videre
Nøglen count fra API-svaret indeholder det samlede antal produkter i kategorien, uanset limit. Den kan bruges til at beregne antallet af sider ved at dividere count med limit og runde op. F.eks: pages = ceil(count / limit)

Fuldt eksempel på API-anmodning og -svar #

Her er et komplet eksempel på et kald og svar for at vise produkter i en kategori.

Den er konfigureret til at vise:

Produkter fra kategorien med ID 13
50 produkter på den anden side ved hjælp af limit og offset på 50
Produkter med typen “Star Wars” ved hjælp af filtre
Bestilt efter pris lav-høj ved hjælp af orderby-pris med stigende rækkefølge
Facetter for pris og kategori

// Request
curl --request POST \
     --url 'https://api.clerk.io/v2/recommendations/category/popular' \
     --header 'accept: application/json' \
     --header 'content-type: application/json'
     -d '{"key": "Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c",
          "limit": 50,
          "category": 13,
          "offset": 50,
          "orderby": "price",
          "order": "asc",
          "attributes": ["id","name","image","price", "url"],
          "filter": "type = \"Star Wars\"",
          "facets": ["price", "category"]
          "labels": ["Category Page Grid - Popular"],
          "visitor": "xfgu47fd2"
        }'

// Response
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482,
    26994,
    27001,
    28098,
    22484,
    25623,
    27746,
    28097
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Home Accessories",
        "value": 81,
        "count": 1
      },
      {
        "type": "unit",
        "name": "Swarovski",
        "value": 3436,
        "count": 5
      },
      {
        "type": "unit",
        "name": "Home Accessories",
        "value": 3418,
        "count": 5
      }
    ],
    "price": [
      {
        "type": "range",
        "name": "50 - 99",
        "min": 50,
        "max": 99.99,
        "count": 1
      },
      {
        "type": "range",
        "name": "100 - 149",
        "min": 100,
        "max": 149.99,
        "count": 3
      },
      {
        "type": "range",
        "name": "200 - 249",
        "min": 200,
        "max": 249.99,
        "count": 1
      },
      {
        "type": "range",
        "name": "300 <",
        "min": 299.99,
        "max": 383,
        "count": 6
      }
    ]
  },
  "product_data": [
    {
      "id": 27988,
      "image": "https://warstars.com/images/star_wars_tie_fighter_ornament.jpg",
      "name": "Swarovski Star Wars Tie Fighter Ornament ",
      "price": 76,
      "url": "https://warstars.com/products/star_wars_tie_fighter_ornament"
    },
    {
      "id": 25629,
      "image": "https://warstars.com/images/swarovski_star_wars_mandalorian_the_child.jpg",
      "name": "Swarovski Star Wars Mandalorian, The Child",
      "price": 112.5,
      "url": "https://warstars.com/products/star_wars_mandalorian_the_child"
    },
    {
      "id": 22482,
      "image": "https://warstars.com/images/swarovski_star_wars_master_yoda.jpg",
      "name": "Swarovski Star Wars Master Yoda",
      "price": 131.52,
      "url": "https://warstars.com/products/star_wars_master_yoda"
    },
    {
      "id": 26994,
      "image": "https://warstars.com/images/swarovski_star_wars_ewok_wicket.jpg",
      "name": "Swarovski Star Wars Ewok Wicket",
      "price": 132,
      "url": "https://warstars.com/products/star_wars_ewok_wicket"
    },
    {
      "id": 27001,
      "image": "https://warstars.com/images/swarovski_star_wars_han_solo.jpg",
      "name": "Swarovski Star Wars Han Solo",
      "price": 212.5,
      "url": "https://warstars.com/products/star_wars_han_solo"
    },
    {
      "id": 28098,
      "image": "https://warstars.com/images/swarovski_star_wars_boba_fett.jpg",
      "name": "Swarovski Disney Star Wars Boba Fett",
      "price": 300,
      "url": "https://warstars.com/products/star_wars_boba_fett"
    },
    {
      "id": 22484,
      "image": "https://warstars.com/images/swarovski_star_wars_darth_vader.jpg",
      "name": "Swarovski Star Wars Darth Vader",
      "price": 320,
      "url": "https://warstars.com/products/star_wars_darth_vader"
    },
    {
      "id": 25623,
      "image": "https://warstars.com/images/swarovski_star_wars_x_wing_starfighter.jpg",
      "name": "Swarovski Star Wars X-Wing Starfighter",
      "price": 320,
      "url": "https://warstars.com/products/star_wars_x_wing_starfighter"
    },
    {
      "id": 27746,
      "image": "https://warstars.com/images/swarovski_star_wars_chewbacca.jpg",
      "name": "Swarovski Star Wars Chewbacca",
      "price": 340,
      "url": "https://warstars.com/products/star_wars_chewbacca"
    },
    {
      "id": 28097,
      "image": "https://warstars.com/images/swarovski_star_wars_obi_wan_kenobi.jpg",
      "name": "Swarovski Disney Star Wars Obi-Wan Kenobi",
      "price": 350,
      "url": "https://warstars.com/products/star_wars_obi_wan_kenobi"
    }
  ]
}

Brug af Clerk.js #

Clerk.js er et bibliotek, der gør det nemt at kalde Clerks API, anvende sporing og håndtere styling.

Opsætningen fungerer på samme måde, selvom API-kald foretages fra frontend ved hjælp af HTML-uddrag
Ved at inkludere Clerk.js-scriptet i din header kan du bruge uddrag direkte i din frontend.
Hvis du bruger udvidelser eller plugins (f.eks. til Magento2 eller WooCommerce), vil Clerk.js sandsynligvis allerede være inkluderet.
Clerk.js scanner webstedet for eventuelle uddrag med klassen clerk og foretager API-opkald ved hjælp af parametrene data-
Styling kan udføres med skabelonsproget Liquid inde i uddraget
Clerk.js kan håndtere paginering uden ekstra kodning ved at indlæse flere resultater på siden med et klik på en knap ved hjælp af denne funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
Facetter HTML genereres ved at konfigurere snippet med facetterne, deres oversættelser og en mål-HTML-blok til at indsætte dem i. Læs mere om Clerk.js facetter her

Fuldt eksempel på snippet:

<div id="clerk-category-filters"></div>

<span 
  id="clerk-category-products"
  class="clerk" 
  data-category="113"
  data-facets-target="#clerk-category-filters" 
  data-facets-attributes='["price","categories"]'
  data-facets-titles='{"price": "Pricing", "categories": "Collections", "brand": "Vendor"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for ">
  
  <div class="product-search-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Show More Results
        </div>
    {% endif %}
  </div>
</span>

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.