Category Page

Slider #

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

Kategorier har ofte 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 er ofte de samme for hver kunde, så de vil sandsynligvis være bestsellere. Dette skyldes, at bestsellere giver kunden en følelse af tryghed – 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 recommendations, bliver det meget nemmere for dine kunder at navigere.

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

Fuld kategoriside #

Clerk kan bruges til at vise alle resultater på en kategoriside, hvilket muliggør intelligent sortering af resultater samt brug af Merchandising for 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 category recommendations endpoints fungerer nøjagtigt som vores search page endpoint. Den eneste forskel er, at disse endpoints er afhængige af et kategori-ID i stedet for en søgeforespørgsel.

Derfor 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 som regel beholde det eksisterende design ved blot at hente produktdata fra Clerk, mens visuelle elementer vises gennem webshoppen egen kode.

Dette 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 forretning.

Mange tøjbutikker med et ofte skiftende sortiment får generelt mest ud af trending produkter.

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

API endpoint-parametre #

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

Filtrering af resultater #

• Når du sender facets i anmodningen, returnerer Clerk en liste over de mulige filtermuligheder for det resultat.
  • F.eks. hvis det billigste produkt i kategorien er €10 og det dyreste er €500, kan den laveste prisgruppe være €10-50, og den højeste €450+ eller lignende.
  • Én kategori kan have 10 forskellige brands, og en anden kun 3 i facets.
• Når en besøgende vælger en mulighed, skal den konverteres til et filter, der sendes i næste API-kald.
  • F.eks. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Vi anbefaler at lave et grafisk interface baseret på Clerks facets og vise dem som valgmuligheder, da dette automatisk holder styr på, hvilke muligheder der er i hver kategori.
• Det kan også gøres med et eksisterende filter-UI, så længe besøgendes valg kan konverteres til en filter-streng

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

Paginering af resultater #

• Parametrene limit og offset bruges sammen til pagination
• limit styrer antallet af produkter, der returneres per kald
• offset styrer startpunktet i den fulde resultatliste
• 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. Det kan bruges til at beregne antallet af sider ved at dividere count med limit og runde op. F.eks.: pages = ceil(count / limit)

Fuld API-anmodning & svars eksempel #

Her er et komplet 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å anden side ved brug af limit og offset på 50
• Produkter med typen “Star Wars” ved brug af filtre
• Sorteret efter pris lav-høj ved brug af orderby price med stigende rækkefølge
• Facets 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": 3,
          "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
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Home 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 ens, selvom API-kaldene udføres fra frontend vha. HTML-snippets
• Ved at inkludere Clerk.js-scriptet i din header, kan du bruge snippets direkte i dit frontend
• Hvis du bruger nogen af de extensions eller plugins (f.eks. til Magento2 eller WooCommerce), vil Clerk.js sandsynligvis allerede være inkluderet
• Clerk.js scanner websitet for alle snippets med klassen clerk, og foretager API-kald ved brug af data- parametre
• Styling kan håndteres via Liquid templating-sproget inde i snippen
• Clerk.js kan håndtere pagination uden ekstra kodning, ved at indlæse flere resultater på siden med et klik på en knap, ved brug af denne funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facets HTML genereres ved at konfigurere snippen med facets, deres oversættelser samt en mål-HTML-blok de indsættes i. Læs mere om Clerk.js facets her

Kodeeksempel #

Nedenfor er en komplet snippet, der viser produkter og facets 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": "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>