Category Page

Slider #

Le pagine di categoria vengono utilizzate quando un cliente cerca un determinato tipo di prodotto, ma non un prodotto specifico come t-shirt, divani o scarpe da corsa. Se avessero avuto in mente un prodotto specifico, molto probabilmente lo avrebbero cercato prima utilizzando la funzione di ricerca.

Le categorie tendono ad avere molti prodotti, quindi può essere difficile navigarle, ma molti clienti cercano gli stessi pochi prodotti nelle categorie.

Questi prodotti selezionati tendono ad essere gli stessi per ogni cliente, quindi probabilmente sono i best-seller. Questo perché i best-seller offrono al cliente un senso di sicurezza: se il prodotto è stato popolare tra gli altri c’è una prova di valore.

Posizionando questi articoli in cima alla pagina di categoria come gruppo di raccomandazioni, si rende molto più facile la navigazione dei tuoi clienti.

È probabile che questi prodotti attirino l’interesse dei nuovi clienti e quindi aumentino le possibilità di conversione.

Pagina di categoria completa #

Clerk può essere utilizzato per mostrare tutti i risultati su una pagina di categoria, permettendo un ordinamento intelligente dei risultati, e utilizzando Merchandising per un alto grado di controllo su quali prodotti vengono prioritizzati.

Questo articolo descrive l’utilizzo della nostra API e della libreria Clerk.js come due modalità diverse per gestire questa visualizzazione.

Utilizzo dell’API #

I nostri endpoint di category recommendations funzionano esattamente come il nostro endpoint per la search page. L’unica differenza è che questi endpoint si basano su un category ID invece che su una query di ricerca.

Per questo motivo, possono essere utilizzati per mostrare tutti i prodotti sulle pagine di categoria sostituendo qualsiasi logica già presente nel webshop per il recupero dei prodotti con l’API di Clerk.

Se si utilizza una configurazione API lato server, di solito è possibile mantenere lo stile esistente semplicemente ottenendo i dati dei prodotti da Clerk, mentre la visualizzazione viene gestita dal codice del webshop.

Questi sono i due endpoint disponibili:

• recommendations/category/popular
  (Classificato per articoli più venduti - cambia occasionalmente)
• recommendations/category/trending
  (Classificato per prodotti che sono di tendenza nelle vendite - cambia spesso)

L’endpoint migliore da utilizzare dipende dal tipo di attività.

Molti negozi di moda con inventario che cambia spesso ricavano di più dai prodotti di tendenza.

I negozi con cataloghi dove i clienti tendono ad acquistare gli stessi articoli più volte, come integratori o negozi alimentari, dovrebbero generalmente utilizzare i best-seller.

Parametri endpoint API #

Ecco una panoramica di ciò che fa ogni argomento quando si effettua una chiamata a un endpoint di categoria.

Filtrare i risultati #

• Inviando le facets nella richiesta, Clerk restituirà un elenco delle possibili opzioni filtro per quel set di risultati.
  • Es. se il prodotto meno costoso nella categoria costa €10 e il più costoso €500, il range più basso potrebbe essere €10-50, e il più alto €450+ o simile.
  • Una categoria potrebbe avere 10 marche differenti e un’altra solo 3 nelle facets.
• Quando un visitatore seleziona un’opzione, questa dovrebbe essere convertita in un filtro inviato nella successiva chiamata API.
  • Es. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Raccomandiamo di creare un’interfaccia grafica basata sulle facets di Clerk e di elencarle come opzioni selezionabili, così da tenere automaticamente traccia delle opzioni disponibili in ogni categoria.
• Si può fare anche usando una GUI di filtro già esistente, purché le scelte del visitatore possano essere convertite in una stringa di filtro.

Puoi leggere di più sui filtri nella nostra documentazione per sviluppatori.

Paginazione dei risultati #

• I parametri limit e offset sono usati insieme per la paginazione
• limit controlla il numero di prodotti restituiti per ogni chiamata
• offset controlla il punto di partenza nell’elenco completo dei risultati
• La prima chiamata dovrebbe avere offset: 0, e ogni chiamata successiva offset: offset + limit
  • Pagina 1: limit: 60, offset: 0
  • Pagina 2: limit: 60, offset: 60
  • Pagina 3: limit: 60, offset: 120
  • … e così via.
• La chiave count della risposta API contiene il totale dei prodotti nella categoria, indipendentemente da limit. Può essere usata per calcolare il numero di pagine dividendo count per limit e arrotondando per eccesso. Es: pages = ceil(count / limit)

Esempio completo di richiesta & risposta API #

Ecco un esempio completo di chiamata e risposta per mostrare i prodotti in una categoria.

È configurato per mostrare:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina usando limit e offset di 50
• Prodotti con tipo “Star Wars” utilizzando filtri
• Ordinati per prezzo dal più basso al più alto usando orderby price in ordine ascendente
• Facets per prezzo e categoria

// 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"
    }
  ]
}

Utilizzo di Clerk.js #

Clerk.js è una libreria che semplifica la chiamata alle API Clerk.io, applica il tracciamento e gestisce lo stile.

Panoramica #

Clerk.js ti permette di mostrare una pagina di categoria completa dal frontend usando snippet HTML.

• Includi lo script Clerk.js nell’header così puoi usare i codici embed sul tuo sito.
• Clerk.js scansiona il sito per elementi con la classe clerk e legge i relativi parametri data-.
• Usa il linguaggio di template Liquid in un Code Design per controllare l’HTML e lo stile della griglia prodotti.
• Clerk.js può gestire la paginazione senza codice extra caricando più risultati quando un visitatore clicca un pulsante, usando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML delle facets viene generato configurando il codice embed con le facets, le loro traduzioni e un blocco HTML dove inserirle. Leggi di più sulle facets di Clerk.js.

Prima di aggiungere il codice al webshop, crea il design standard della Pagina Categoria e l’Elemento in my.clerk.io.

Crea un design #

Per una pagina di categoria standard completa, crea il design standard Category Page:

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Grid Design, poi seleziona il design standard Category Page.
3. Salva il design.

Per un layout personalizzato, scegli un Design Codice vuoto sotto Grid Design e segui le istruzioni di Code Design sotto.

Crea un Elemento #

1. Vai su Recommendations > Elements e crea un nuovo Element.
2. Dai un nome all’Elemento Category Page Grid.
3. Seleziona Bestsellers In Category come logica prodotto.
4. Seleziona il design creato in Crea un design.
5. Se il design selezionato supporta le facets, abilita Facets, imposta i Limits come faresti per Omnisearch, e scegli le facets da mostrare.
6. Imposta il limite prodotti ad almeno 40.
7. Salva l’Elemento.

Aggiungi al tuo sito #

Ci sono due modi per aggiungere l’Elemento Category Page al tuo sito. Injection è l’opzione più facile. Per un controllo maggiore su dove appariranno filtri e griglia prodotti, usa il codice embed e segui l’implementazione custom qui sotto.

Injection #

Apri la scheda Insert into website dell’Elemento e seleziona Using injection.

Configura un selettore CSS unico per la griglia prodotti della pagina categoria e scegli dove inserire l’Elemento. Poiché questo Elemento usa una logica di categoria, configura anche il Category ID CSS selector così che Clerk.js possa leggere l’ID categoria attuale e mostrare i prodotti corretti per quella categoria.

Quando il design selezionato supporta le facets, l’Elemento iniettato le include automaticamente.

Scopri di più su come usare injection.

Implementazione custom #

L’implementazione custom necessita di un elemento HTML per i filtri e di un codice embed Clerk.js per i prodotti. I filtri sono inseriti nel primo elemento, mentre i prodotti sono mostrati nel codice embed.

1. Apri la scheda Insert into website dell’Elemento e copia il codice embed.
2. Nel template della pagina categoria, aggiungi un <div> vuoto dove dovranno comparire i filtri. Dagli ID clerk-category-filters.
3. Aggiungi il codice embed copiato dove dovrà comparire la griglia prodotti. Dai all’elemento esterno l’ID clerk-category-products e mantieni la classe clerk.
4. Sostituisci INSERT_CATEGORY_ID con l’ID della categoria correntemente visualizzata. Il tuo webshop deve mostrare l’ID giusto per ogni pagina categoria.
5. Imposta data-template sul valore che corrisponde all’ID dell’Elemento creato. Per dubbi, apri l’Elemento e vai su Insert into website > Using embedded code per verificare o copiare il valore corretto.
6. Assicurati che data-facets-target punti all’elemento dei filtri: #clerk-category-filters.
7. In data-facets-attributes, elenca gli attributi dei prodotti che i visitatori potranno filtrare. L’esempio include price, categories e brand; sostituiscili con attributi esistenti nel tuo catalogo.
8. Usa data-facets-titles per fornire le etichette che i visitatori vedranno per ogni attributo.
9. Imposta data-facets-in-url="true" se i filtri selezionati devono essere aggiunti all’URL, così i visitatori possono condividere o tornare su una pagina categoria filtrata.

Se Clerk.js non è già installato sul tuo webshop, aggiungi lo script Clerk.js alla pagina prima di usare il codice embed. Il valore data-category, il selettore data-facets-target e gli ID delle pagine categoria devono corrispondere ai valori nel tuo template.

Code Design #

Se hai creato un Design Codice vuoto sotto Grid Design, incolla il seguente HTML nel pannello HTML. Fornisce una griglia prodotti, un menu a tendina per l’ordinamento e un pulsante per caricarne altri. Il menu aggiorna i parametri orderby e order dell’Elemento senza lasciare la pagina categoria. Il valore order deve essere asc o desc.

<div class="clerk-category-page">
  <div class="clerk-category-toolbar">
    <label for="clerk-category-sort-{{ content.id }}">Ordina per</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">Prezzo: dal più basso al più alto</option>
      <option value="price:desc">Prezzo: dal più alto al più basso</option>
      <option value="name:asc">Nome: A-Z</option>
      <option value="name:desc">Nome: 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);">
      Carica altri prodotti
    </button>
  {% endif %}
</div>

Il design controlla solo la griglia dei prodotti. Aggiungi il contenitore dei filtri e il codice embed dell’Elemento al template della pagina categoria come mostrato qui sotto. Leggi di più su rendering e aggiornamento degli Elementi Clerk.js.

Codice embed #

Qui sotto un esempio separato per il template della pagina categoria. Il valore data-template deve corrispondere all’ID dell’Elemento creato, indipendentemente dal nome dell’Elemento. L’Elemento selezionato e il design determinano l’aspetto della griglia prodotti, mentre gli attributi data-facets-* controllano i filtri mostrati.

<!-- Le facets saranno inserite qui. -->
<div id="clerk-category-filters"></div>

<!-- I prodotti verranno mostrati qui tramite l'Elemento e il design selezionati. -->
<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": "Prezzo", "categories": "Categorie", "brand": "Marchio"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Vedi altro"
  data-facets-searchbox-text="Cerca ">
</span>

Sostituisci INSERT_ELEMENT_TEMPLATE col valore da Insert into website > Using embedded code nella pagina Element.