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 har tendens til 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 et 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 gengive 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-biblioteket som to forskellige måder at håndtere denne gengivelse på.

Brug af API #

Vores kategori anbefalinger endpoints fungerer præcist som vores søgeside endpoint. Den eneste forskel er, at disse endpoints er afhængige af en kategori-ID i stedet for en søgeforespørgsel.

På grund af dette kan de bruges til at gengive alle produkter på kategorisider ved at erstatte enhver eksisterende webshop-logik for at hente produkter med Clerks API.

Hvis du bruger en serverside API-opsætning, kan du normalt bevare den eksisterende styling ved blot at hente produktdata fra Clerk, mens du gengiver visuelle elementer gennem webshop-koden.

Disse 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)

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 produkter.

API endpoint parametre #

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

Filtrering af resultater #

• Når der sendes facets i anmodningen, vil Clerk returnere en liste over de mulige filtermuligheder for den resultatmængde.
  • 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.
  • 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-opkald.
  • F.eks. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Vi anbefaler at oprette et grafisk interface 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 et 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 hver opkald
• offset kontrollerer startpunktet i den fulde liste af resultater
• Det første opkald skal have offset: 0, og hvert efterfølgende opkald 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 API-anmodning & svar eksempel #

Her er et fuldt eksempel på et opkald 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ære"],
          "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-opkald foretages fra frontend, ved hjælp af HTML-snippets
• Ved at inkludere Clerk.js scriptet i dit 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-opkald ved hjælp af data- parametre
• 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 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 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>