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 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 noget bevis for 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 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 gør det muligt at sortere resultater smart 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 metoder til at håndtere denne visning.

Brug af API #

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

Derfor kan de bruges til at vise alle produkter på kategorisider ved at erstatte evt. eksisterende webshop-logik til hentning af produkter med Clerks API.

Ved serverside API-opsætning kan du oftest beholde det eksisterende design ved blot at hente produktdata fra Clerk, mens du viser selve udseendet via webshopkoden.

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 populære i salget – ændres ofte)

Det bedste endpoint at bruge afhænger af forretningstypen.

Mange modebutikker med ofte skiftende varelager får typisk mest ud af trending produkter.

Butikker med kataloger, hvor kunder oftest køber 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 du foretager et kald til et kategori-endpoint.

Filtrering af resultater #

• Når facets sendes med i requesten, returnerer Clerk en liste med mulige filtervalg for det resultat.
  • F.eks. hvis det billigste produkt i kategorien er €10 og det dyreste €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, skal den laves om til et filter, der 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 liste dem som valg, 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 besøgendes valg kan omskrives til en filter-streng.

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

Paginering af resultater #

• Parametrene limit og offset bruges sammen til paginering
• limit styrer hvor mange produkter der returneres ved hvert kald
• offset styrer hvilket punkt i listen der startes fra
• Første kald bør have offset: 0, og derefter ved hvert kald offset: offset + limit
  • Side 1: limit: 60, offset: 0
  • Side 2: limit: 60, offset: 60
  • Side 3: limit: 60, offset: 120
  • … osv.
• Nøglen count i API-svaret indeholder det samlede antal produkter i kategorien, uanset limit. Det kan bruges til at beregne antallet af sider ved at dele count med limit og runde op. F.eks.: pages = ceil(count / limit)

Fuld API-request og svar-eksempel #

Her er et fuldt eksempel på et kald og svar til visning af produkter i en kategori.

Det viser:

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

Bevar kategoriindholdet #

Når du bruger Clerk.js til at erstatte en kategoriside, anbefaler vi normalt at beholde webshop-platformens eksisterende produkter som en fallback. Lad platformen vise dem i det oprindelige HTML, og lad så Clerk.js erstatte produktgitteret, efter dens produkter er blevet vist.

Behold også kategorititlen (H1), øvrige overskrifter og kategoribeskrivelse vist af webshop-platformen. Placer dette indhold uden for det produktgitter, du erstatter, så det stadig er tilgængeligt uden JavaScript.

Google kører JavaScript, når sider renderes, men succesfuld indlæsning og kørsel er ikke garanteret, og ikke alle søgemaskiner kan køre JavaScript. Se Googles JavaScript SEO-vejledning.

Ved at beholde platformens produkter og kategoriindhold i det oprindelige HTML, kan søgemaskiner læse dem, selvom JavaScript ikke indlæses. Besøgende får også stadig en brugbar side, hvis Clerk.js eller dens produktkald fejler.

Fjern eller skjul kun de oprindelige produkter, når Clerk.js-gitteret er vist korrekt. Undgå at fjerne dem fra platformens template eller skjul dem med CSS, der også gælder når JavaScript ikke er tilgængeligt.

Tjek din implementering med JavaScript deaktiveret og med Clerk.io-requests blokeret. I begge tilfælde skal platformens overskrifter, kategoritekst og produktlinks forblive synlige. Når Clerk.js virker, sørg for at kun ét produktgitter og én kategori-H1 vises.

Oversigt #

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

• Inkludér Clerk.js scriptet i din header, så du kan bruge embed codes på dit website.
• Clerk.js scanner websitet for elementer med klassen clerk og læser deres data- parametre.
• Brug Liquid-templating sproget i et Code Design for at styre 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 coden med facets, deres oversættelser og et mål-HTML-blok, hvor de skal indsættes. Læs mere om Clerk.js facets.

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

Opret et design #

For en standard fuld kategoriside skal du oprette standarddesignet Category Page:

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

For et tilpasset layout, vælg et tomt Code Design under Grid Design og følg instruktionen under Code Design nedenfor.

Opret et Element #

1. Gå til Recommendations > Elements og opret et nyt Element.
2. Giv Elementet navnet Category Page Grid.
3. Vælg Bestsellers In Category som produktlogik.
4. Vælg det design, du lavede under Opret et design.
5. Hvis det valgte design understøtter facets, aktiver Facets, angiv Limits som for Omnisearch, og vælg de facets, du vil vise.
6. Sæt produktgrænsen til mindst 40.
7. Gem Elementet.

Tilføj til dit website #

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

Injection #

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

Konfigurer 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 rigtige produkter for den kategori.

Vælg produktgitteret fremfor en container som også har kategorioverskrift og beskrivelse. Følg Bevar kategoriindholdet for at sikre platformens produkter er synlige indtil erstatningen er vist.

Når det valgte design understøtter facets, inkluderes de automatisk i det injicerede Element.

Læs mere om brug af injection.

Brugerdefineret implementering #

Den brugerdefinerede opsætning kræver ét HTML-element til filtre og én Clerk.js-embed code til produkterne. Filtrene indsættes i det første element, mens produkterne renderes inde i embed koden.

Behold platformens eksisterende produktuddata i kategori-templaten som beskrevet under Bevar kategoriindholdet. Embed koden alene styrer ikke fallback; din implementering skal sørge for, at det originale gitter forbliver synligt, indtil Clerk.js-produkterne er vist.

1. Åbn Elementets Insert into website-fane og kopier embed coden.
2. Tilføj et tomt <div> i kategori-sidens template, hvor filtrene skal vises. Giv det ID’et clerk-category-filters.
3. Tilføj den kopierede embed code der, hvor produktgitteret skal vises. Giv det ydre element ID’et clerk-category-products og behold klassen clerk.
4. Udskift INSERT_CATEGORY_ID med det ID, der passer til den kategori, der vises. Din webshop skal udsende det korrekte ID for hver kategori.
5. Sæt data-template til den værdi, der matcher ID’et på det Element, du har lavet. Hvis du er i tvivl, åbne Elementet og gå til Insert into website > Using embedded code for at tjekke eller kopiere værdien.
6. Sørg for at data-facets-target peger på filtrelementet: #clerk-category-filters.
7. I data-facets-attributes angiver du de produktegenskaber, besøgende skal kunne filtrere på. Eksemplet inkluderer price, categories og brand; udskift disse med attributter, der findes i dit katalog.
8. Brug data-facets-titles til at angive 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 i din webshop, så tilføj Clerk.js scriptet til din side før embed koden bruges. Værdierne for data-category, data-facets-target og de to kategori-side-IDs skal matche værdierne i din template.

Code Design #

Hvis du lavede et tomt Code Design under Grid Design, indsæt følgende HTML i dens HTML-panel. Det giver et produktgitter, dropdown til sortering og en indlæs flere-knap. Dropdownen ændrer Elementets orderby og order parametre uden at forlade kategorisiden. Værdien på order 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-Å</option>
      <option value="name:desc">Navn: Å-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 filter-containeren og Elementets embed code til kategori-sidens template som vist nedenfor. Læs mere om visning og opdatering af Clerk.js Elements.

Embed code #

Nedenfor er et separat eksempel til kategori-side templaten. Værdien for data-template skal matche det ID på det Element, du har lavet, uanset Elementets navn. Det valgte Element og design bestemmer, hvordan produktgitteret ser ud, mens data-facets-* attributterne styrer, hvilke filtre der vises.

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

<!-- Produkterne vises her ved hjælp af den 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>

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