Category Page

Slider #

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

Kategorier har 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 plejer at være de samme for hver kunde, så de vil sandsynligvis være bedst sælgende. Dette skyldes, at bedst sælgende produkter giver kunden en følelse af sikkerhed - hvis produktet var populært blandt andre, er der en form for bevis på værdi.

Ved at placere disse varer øverst på kategorisiden som en gruppe anbefalinger, gør det det meget lettere for dine kunder at navigere.

Det er sandsynligt, at disse produkter vil vække nye kunders interesse og dermed øge chancerne for konvertering.

Fuldt kategoriside #

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

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

Brug af API #

Vores kategori anbefalinger endpoints fungerer præcis som vores søgeside endpoint. Den eneste forskel er, at disse endpoints er afhængige af et kategori-ID snarere end 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 der bruges en serverside API-opsætning, kan du normalt bevare den eksisterende styling ved blot at hente produktdata fra Clerk, mens du viser visuals gennem webshoppens kode.

Disse er de to tilgængelige endpoints:

• recommendations/category/popular
  (Rangeret efter bedst sælgende varer - ændrer sig lejlighedsvis)
• recommendations/category/trending
  (Rangeret efter produkter, der er trending i salg - ændrer sig ofte)

Det bedste endpoint at bruge afhænger af typen af virksomhed.

Mange modebutikker med lager, der ændrer sig ofte, får generelt mest ud af trending produkter.

Butikker med kataloger, hvor kunderne har tendens til at købe de samme varer flere gange, som kosttilskud eller fødevarebutikker, bør generelt bruge bedst sælgende.

API endpoint parametre #

Her er en oversigt over, hvad hver argument gør, når der laves et kald til et kategori endpoint.

Filtrering af resultater #

• Når der sendes facets i anmodningen, vil Clerk returnere en liste over de mulige filtermuligheder for det resultatsæt.
  • F.eks. hvis det billigste produkt i kategorien er €10 og det dyreste er €500, kunne den laveste prisgruppe være €10-50, og den højeste €450+ eller lignende.
  • Én kategori kan have 10 forskellige mærker, og en anden kun 3 i facetterne.
• Når en besøgende vælger en mulighed, bør 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 liste 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 besøgendes valg kan konverteres til en filterstreng.

Du kan læse mere om filtre i vores udviklerdokumentation.

Paginering af resultater #

• limit og offset parametrene bruges sammen til paginering
• limit kontrollerer antallet af produkter, der skal returneres for hvert kald
• offset kontrollerer startpunktet i den fulde liste over 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.
• count nøglen fra API-svaret indeholder det samlede antal produkter i kategorien, uanset limit. Det kan bruges til at beregne antallet af sider ved at dividere count med limit og runde op. F.eks.: pages = ceil(count / limit)

Fuldt API-anmodning & svar eksempel #

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

Det 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
• Ordnet efter pris lav-høj ved hjælp af orderby pris med stigende rækkefølge
• Facetter for pris og kategori

// Anmodning
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": 3,
          "category": 13,
          "offset": 50,
          "orderby": "price",
          "order": "asc",
          "attributes": ["id","name","image","price", "url"],
          "filter": "type = \"Star Wars\"",
          "facets": ["price", "category"],
          "labels": ["Kategori Side Grid - Populær"],
          "visitor": "xfgu47fd2"
        }'

// Svar
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Hjemme Accessories",
        "value": 81,
        "count": 1
      },
      {
        "type": "unit",
        "name": "Swarovski",
        "value": 3436,
        "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"
    }
  ]
}

Brug af Clerk.js #

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

Fordele #

• Opsætningen fungerer meget ligesom, selvom API-kald foretages fra frontend, ved hjælp af HTML-snippets
• Ved at inkludere Clerk.js scriptet i din header, kan du bruge snippets direkte i din frontend
• Hvis du bruger nogen af udvidelserne eller plugins (f.eks. til Magento2 eller WooCommerce), vil Clerk.js sandsynligvis allerede være inkluderet
• Clerk.js scanner hjemmesiden for eventuelle snippets med klassen clerk, og foretager API-kald ved hjælp af data- parametrene
• Styling kan gøres med Liquid templating language, inde i snippet
• Clerk.js kan håndtere paginering uden ekstra kodning, ved at indlæse flere resultater på siden ved 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 et mål HTML-blok til at indsætte dem i. Læs mere om Clerk.js facetter her

Kodeeksempel #

Nedenfor er et fuldt snippet, der viser produkter og facetter på en kategoriside.

<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": "Priser", "categories": "Kollektioner", "brand": "Leverandør"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Vis Flere"
  data-facets-searchbox-text="Søg efter ">
  
  <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 }}">Køb Nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Vis Flere Resultater
        </div>
    {% endif %}
  </div>
</span>