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 have ledt efter det først ved hjælp af søgefunktionen.

Kategorier har ofte mange produkter, så det kan være svært at navigere, men mange kunder leder efter de samme få produkter i kategorierne.

Disse udvalgte produkter er ofte de samme for hver kunde og vil derfor typisk være bestsellere. Det skyldes, at bestsellere tilbyder kunden en følelse af tryghed – hvis produktet var populært blandt andre, er der en vis dokumentation for værdi.

Ved at placere disse varer øverst på kategori siden som en gruppe anbefalinger, bliver det meget lettere for dine kunder at navigere.

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

Fuld kategoriside #

Clerk kan bruges til at vise alle resultater på en kategoriside, gøre brug af smart sortering af resultaterne og bruge 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 visning på.

Brug af API #

Vores category recommendations-endpoints fungerer præcis som vores search page-endpoint. Den eneste forskel er, at disse endpoints benytter et category ID i stedet for en søgeforespørgsel.

Derfor kan de bruges til at vise alle produkter på kategori sider ved at erstatte eksisterende webshop logik for indhentning af produkter med Clerks API.

Hvis du bruger et serverside API-setup, kan du normalt beholde det nuværende design ved blot at hente produktdata fra Clerk, mens det visuelle vises igennem 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 er trending i salg – ændres ofte)

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

Mange modebutikker med sortiment, der ofte ændres, får generelt mest ud af trending produkter.

Butikker med kataloger, hvor kunderne typisk køber de samme varer flere gange, såsom kosttilskud eller dagligvarebutikker, 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 category-endpoint.

Filtrering af resultater #

• Når du sender facets i forespørgslen, returnerer Clerk en liste over de mulige filtermuligheder 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.
  • Én kategori kan have 10 forskellige brands og en anden kun 3 i facets.
• Når en besøgende vælger en mulighed, bør det konverteres til et filter, som sendes med 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 findes i hver kategori.
• Det kan også gøres med et eksisterende filter-GUI, så længe de besøgendes valg kan konverteres til en filterstreng.

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

Paginering af resultater #

• Parametrene limit og offset bruges sammen til paginering
• limit styrer antallet af produkter, der skal returneres for hvert kald
• offset styrer startpunktet i hele listen af resultater
• Det første kald bør 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
  • … osv.
• count-nøglen fra API-svaret indeholder det samlede antal produkter i kategorien, uanset limit. Den kan bruges til at beregne antal sider ved at dividere count med limit og runde op. F.eks.: pages = ceil(count / limit)

Fuld API-request & response eksempel #

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

Den er konfigureret til at vise:

• Produkter fra kategorien med ID 13
• 50 produkter på anden side med limit og offset på 50
• Produkter med typen “Star Wars” via filtre
• Sorteret efter pris lav-høj med 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, tilføje tracking og håndtere styling.

Overblik #

Clerk.js gør det muligt at vise en komplet kategoriside fra frontend ved hjælp af HTML-snippets.

• Inkludér Clerk.js script i dit header, så du kan bruge embed codes på dit website.
• Clerk.js scanner websitet for elementer med clerk klassen og læser deres data- parametre.
• Brug Liquid templating language i et Code Design til at styre HTML og styling for produktgitteret.
• Clerk.js kan håndtere paginering uden ekstra kode ved at loade flere resultater, når en besøgende klikker på en knap, med 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 at indsætte dem i. Læs mere om Clerk.js facets.

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

Opret et design #

For en standard fuld kategoriside, opret Category Page standard design:

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

For et tilpasset layout, vælg et tomt Code Design under Grid Design og følg instruktionen til Code Design 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 har oprettet under Opret et design.
5. Hvis det valgte design understøtter facets, aktiver Facets, indstil Limits som ved Omnisearch, og vælg de facets, du vil vise.
6. Indstil produktbegrænsningen til mindst 40.
7. Gem Elementet.

Tilføj til dit website #

Der er to måder at tilføje Category Page Element til dit website. Injection er den nemmeste mulighed. For mere kontrol over hvor filtre og produktgitter vises, brug embedded code og følg den brugerdefinerede implementering nedenfor.

Injection #

Åbn Elementets Insert into website-faneblad og vælg Using injection.

Konfigurér en unik CSS-selector for kategori-side produktgitteret og vælg hvor Elementet skal indsættes. Da dette Element bruger kategori-logik, skal du også konfigurere Category ID CSS selector, så Clerk.js kan læse det aktuelle kategori-ID og vise de korrekte produkter til den kategori.

Når det valgte design understøtter facets, følger facets automatisk med i det injicerede Element.

Læs mere om brug af injection.

Tilpasset implementering #

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

1. Åbn Elementets Insert into website-faneblad og kopiér embed-koden.
2. I kategorisidens template, tilføj et tomt <div>, hvor filtrene skal vises. Giv den ID’en clerk-category-filters.
3. Indsæt den kopierede embed-kode, hvor produktgitteret skal være. Giv det ydre element ID clerk-category-products og behold clerk klassen.
4. Erstat INSERT_CATEGORY_ID med ID’et for den kategori, der vises. Din webshop skal outputte det korrekte ID for hver kategoriside.
5. Sæt data-template til værdien, der matcher ID’et på det Element, du har oprettet. Tjek evt. værdien under Insert into website > Using embedded code på Elementet.
6. Sørg for at data-facets-target peger på filter-elementet: #clerk-category-filters.
7. I data-facets-attributes listes de produktattributter, besøgende skal kunne filtrere på. Eksemplet bruger pris, kategorier og brand – udskift med attributter, der findes i dit katalog.
8. Brug data-facets-titles til at vise de labels, som 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å webshoppen, skal du tilføje Clerk.js scriptet til din side før brug af embed-koden. Værdierne for data-category, data-facets-target selector og de to kategori-side ID’er skal matche værdierne i din template.

Code Design #

Hvis du har oprettet et tomt Code Design under Grid Design, indsæt følgende HTML i HTML-panelet. Det indeholder et produktgitter, en sorterings-dropdown og en load more-knap. Sorterings-dropdownen 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 by</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">Price: Low to high</option>
      <option value="price:desc">Price: High to low</option>
      <option value="name:asc">Name: A-Z</option>
      <option value="name:desc">Name: 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);">
      Load more products
    </button>
  {% endif %}
</div>

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

Embed code #

Herunder ses et separat eksempel til kategorisidens skabelon. data-template-værdien skal passe med ID’et på det Element, du har lavet, uanset navnet på Elementet. Valgt Element og design bestemmer, hvordan produktgitteret vises, mens data-facets-*-attributterne styrer, hvilke filtre der vises.

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

<!-- Produkter vises her vha. valgt 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": "Price", "categories": "Categories", "brand": "Brand"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for ">
</span>

Erstat INSERT_ELEMENT_TEMPLATE med værdien fra Insert into website > Using embedded code på Element-oversigten.