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 bestemt produkt i tankerne, ville de sandsynligvis have brugt søgefunktionen først for at finde det.

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 har tendens til at være 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 af anbefalinger, gør det det meget nemmere for dine kunder at navigere.

Det er sandsynligt, at disse produkter vækker nye kunders interesse og dermed øger chancerne for konvertering.

Fuld kategoriside #

Clerk kan bruges til at vise alle resultater på en kategoriside, hvilket muliggør intelligent sortering af resultater og brugen af Merchandising for 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 visning på.

Brug af API #

Vores category recommendations endpoints fungerer præcis som vores search page endpoint. Den eneste forskel er, at disse endpoints bruger 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 eksisterende webshoplogik til indhentning af produkter med Clerks API.

Ved serverside API-opsætning kan du normalt beholde det eksisterende design ved blot at hente produktdata fra Clerk, mens visningen håndteres via 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 trender i salg – ændrer sig ofte)

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

Mange modebutikker med varer, der ofte skifter, får mest ud af trending produkter.

Butikker med kataloger, hvor kunder ofte køber de samme varer flere gange, 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 man laver et kald til et kategori-endpoint.

Filtrering af resultater #

• Når der sendes facets i forespørgslen, returnerer Clerk en liste med mulige filterindstillinger for det pågældende resultatsæt.
  • F.eks. hvis det billigste produkt i kategorien er €10 og det dyreste er €500, kan det laveste prisinterval være €10-50, og det højeste €450+ eller lignende.
  • En kategori kan have 10 forskellige mærker, mens en anden kun har 3 i facets.
• Når en besøgende vælger en mulighed, skal den konverteres til et filter, der sendes med den næste API-anmodning.
  • 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 tilgængelige i hver kategori.
• Det kan også gøres med et eksisterende filter-GUI, så længe de besøgendes valg kan omsættes til en filter-streng.

Læs mere om filtre i vores udviklerdokumentation.

Paginering af resultater #

• Parametrene limit og offset bruges sammen til paginering
• limit styrer antallet af produkter, der returneres ved hvert kald
• offset bestemmer startpunktet i hele listen over resultater
• Det første kald skal have offset: 0, og hvert fø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, uafhængigt af 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)

Eksempel på fuld API-anmodning & svar #

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 den kategori med ID 13
• 50 produkter på anden side ved brug af limit og offset på 50
• Produkter med typen “Star Wars” vha. filtre
• Sorteret efter laveste pris til højeste ved brug af orderby price og 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 Clerk.io API’et, anvende sporing og håndtere styling.

Overblik #

Clerk.js giver dig mulighed for at vise en komplet kategoriside fra frontend vha. HTML-snippets.

• Inkludér Clerk.js scriptet i dit header, så du kan bruge embed-koder på dit website.
• Clerk.js scanner websitet for elementer med clerk klassen og læser deres data- parametre.
• Brug Liquid template-sproget i en Code Design for at kontrollere produktgitterets HTML og styling.
• Clerk.js kan håndtere paginering uden ekstra kode ved at indlæse flere resultater, når en besøgende klikker på en knap, vha. denne funktion: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• Facets HTML genereres ved at konfigurere embed-koden med facets, deres oversættelser og et mål-HTML-blok til at indsætte dem i. Læs mere om Clerk.js facets.

Før du tilføjer koden til din webshop, skal du oprette standarddesignet og elementet Category Page i my.clerk.io.

Opret et design #

For en standard fuld kategoriside, opret standarddesignet Category Page:

1. Gå til Recommendations > Designs og klik på New Design.
2. Vælg Grid Design, og vælg derefter Category Page standarddesignet.
3. Gem designet.

For et brugerdefineret layout, vælg et blankt Code Design under Grid Design og følg Code Design instruktionerne nedenfor.

Opret et element #

1. Gå til Recommendations > Elements og opret et nyt Element.
2. Navngiv elementet Category Page Grid.
3. Vælg Bestsellers In Category som produktlogik.
4. Vælg designet, du lavede under Opret et design.
5. Hvis det valgte design understøtter facets, aktiver Facets, sæt Limits, som du ville gøre for Omnisearch, og vælg de facets, du ønsker at vise.
6. Sæt produktgrænsen til minimum 40.
7. Gem elementet.

Tilføj til dit website #

Der er to måder at tilføje Category Page Elementet til dit website på. Injection er den nemmeste løsning. For mere kontrol over, hvor filtre og produktgitter vises, kan du bruge embedded code og følge den brugerdefinerede implementering nedenfor.

Injection #

Åbn elementets Insert into website-fane og vælg Using injection.

Konfigurer en unik CSS-selector til kategorisidens produktgitter og vælg, hvor elementet skal indsættes. Fordi dette element bruger kategorilogik, skal du også konfigurere Category ID CSS selector, så Clerk.js kan læse den aktuelle kategori-ID og vise de korrekte produkter for den pågældende kategori.

Når det valgte design understøtter facets, følger facets automatisk med i det indsprøjtede element.

Læs mere om brug af injection.

Brugerdefineret implementering #

Den brugerdefinerede implementering kræver et HTML-element til filtrene og én Clerk.js embed-kode til produkterne. Filtrene indsættes i det første element, mens produkterne vises i embed-koden.

1. Åbn elementets Insert into website-fane og kopiér embed-koden.
2. I skabelonen for kategorisiden, indsæt en tom <div> hvor filtrene skal vises. Giv den ID’en clerk-category-filters.
3. Tilføj den kopierede embed-kode hvor produktgitteret skal vises. Giv det ydre element ID’en clerk-category-products og behold klassen clerk.
4. Erstat INSERT_CATEGORY_ID med ID’et på den kategori, der vises aktuelt. Din webshop skal outputte det rigtige ID for hver kategoriside.
5. Sæt data-template til den værdi, der matcher ID’et på det element, du har oprettet. Hvis du er i tvivl, så åbn elementet og gå til Insert into website > Using embedded code for at tjekke eller kopiere den korrekte værdi.
6. Sikr at data-facets-target peger på filter-elementet: #clerk-category-filters.
7. I data-facets-attributes skal du oplyse de produktattributter, som besøgende kan filtrere efter. Eksemplet indeholder pris, kategorier og brand; erstat disse med attributter, der findes i dit katalog.
8. Brug data-facets-titles til at angive de labels, besøgende skal se for hver attribut.
9. Sæt data-facets-in-url="true" hvis valgte filtre skal tilføjes til URL’en, så besøgende kan dele eller vende tilbage til en filtreret kategoriside.

Hvis Clerk.js ikke allerede er installeret på din webshop, skal du tilføje Clerk.js scriptet til siden før brug af embed-koden. Værdien data-category, data-facets-target-vælgeren og de to kategoriside-ID’er skal matche værdierne i din skabelon.

Code Design #

Hvis du har oprettet et tomt Code Design under Grid Design, indsæt følgende HTML i dets HTML-panel. Det giver et produktgitter, en sorterings-dropdown og en load more-knap. Sorterings-dropdown opdaterer elementets orderby og order parametre uden at forlade kategorisiden. order værdien skal være enten asc eller desc.

<div class="clerk-category-page">
  <div class="clerk-category-toolbar">
    <label for="clerk-category-sort-{{ content.id }}">Sortér efter</label>
    <select
      id="clerk-category-sort-{{ content.id }}"
      onchange="var sort = this.value.split(':'); Clerk('content', '#{{ content.id }}', function (content) { content.param({ orderby: sort[0], order: sort[1] }); });">
      <option value="price:asc">Pris: Lav til høj</option>
      <option value="price:desc">Pris: Høj til lav</option>
      <option value="name:asc">Navn: A-Z</option>
      <option value="name:desc">Navn: Z-A</option>
    </select>
  </div>

  <div class="clerk-category-grid">
    {% for product in products %}
      <article class="clerk-category-card">
        <a href="{{ product.url }}" class="clerk-category-card-link">
          <img
            src="{{ product.image }}"
            alt="{{ product.name }}"
            class="clerk-category-card-image">
          <div class="clerk-category-card-details">
            <div class="clerk-category-card-brand">{{ product.brand }}</div>
            <h2 class="clerk-category-card-name">{{ product.name }}</h2>
            <div class="clerk-category-card-price">{{ product.price | money }}</div>
          </div>
        </a>
      </article>
    {% endfor %}
  </div>

  {% if count > products.length %}
    <button
      type="button"
      class="clerk-load-more-button"
      onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
      Indlæs flere produkter
    </button>
  {% endif %}
</div>

Designet styrer kun produktgitteret. Tilføj filterbeholderen og elementets embed-kode til kategorisidens skabelon som vist nedenfor. Læs mere om visning og opdatering af Clerk.js Elements.

Embed-kode #

Nedenfor er et særskilt eksempel til kategorisidens skabelon. Værdien af data-template skal matche det element-ID, du har oprettet, uanset elementets navn. Det valgte element og design bestemmer, hvordan produktgitteret ser ud, mens data-facets-* attributterne bestemmer hvilke filtre, der vises.

<!-- Facets indsættes her. -->
<div id="clerk-category-filters"></div>

<!-- Produkter vises her via det valgte element og design. -->
<span
  id="clerk-category-products"
  class="clerk"
  data-template="INSERT_ELEMENT_TEMPLATE"
  data-category="INSERT_CATEGORY_ID"
  data-limit="40"
  data-facets-target="#clerk-category-filters"
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "Pris", "categories": "Kategorier", "brand": "Brand"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Vis flere"
  data-facets-searchbox-text="Søg efter ">
</span>

Erstat INSERT_ELEMENT_TEMPLATE med værdien fra Insert into website > Using embedded code på elementets side.