Category Page

Slider #

Le pagine di categoria vengono utilizzate quando un cliente cerca un particolare tipo di prodotto, ma non un prodotto specifico come t-shirt, divani o scarpe da ginnastica. Se avessero avuto in mente un prodotto specifico, molto probabilmente l’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 a essere gli stessi per ogni cliente, quindi probabilmente saranno i best-seller. Questo perché i best-seller offrono al cliente una sensazione di sicurezza: se il prodotto è stato popolare tra gli altri, c’è una prova del suo valore.

Posizionando questi articoli in cima alla pagina di categoria come gruppo di recommendations, rendi molto più semplice la navigazione ai tuoi clienti.

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

Pagina categoria completa #

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

Questo articolo descrive l’uso delle nostre API e della libreria Clerk.js come due modi differenti per gestire questo rendering.

Utilizzo delle API #

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

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

Se utilizzi una configurazione API lato server, di solito puoi mantenere lo stile esistente ottenendo semplicemente i dati dei prodotti da Clerk, mentre esegui il rendering delle visuali tramite il codice del tuo webshop.

Questi sono i due endpoint disponibili:

• recommendations/category/popular
  (Classificati per articoli più venduti - cambia occasionalmente)
• recommendations/category/trending
  (Classificati per prodotti in tendenza nelle vendite - cambia spesso)

Il miglior endpoint da utilizzare dipende dal tipo di attività.

Molti negozi di moda con magazzino che cambia frequentemente, in genere ottengono il massimo dai prodotti di tendenza.

I negozi con cataloghi in cui 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 cosa fa ogni argomento quando effettui una chiamata a un endpoint di categoria.

Filtrare i risultati #

• Quando invii facets nella richiesta, Clerk restituirà un elenco delle possibili opzioni di filtro per quel set di risultati.
  • Ad esempio, se il prodotto più economico nella categoria costa €10 e il più caro €500, il range di prezzo più basso potrebbe essere €10-50 e il più alto €450+ o simile.
  • Una categoria potrebbe avere 10 brand differenti e un’altra solo 3 nei facets.
• Quando un visitatore seleziona un’opzione, questa dovrebbe essere convertita in un filtro che viene inviato nella prossima chiamata API.
  • Es: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Raccomandiamo di creare un’interfaccia grafica basata sui facets di Clerk e di elencarli come opzioni selezionabili, in quanto questo tiene automaticamente traccia di quali opzioni sono disponibili in ogni categoria.
• Può essere fatto anche usando una GUI di filtri esistente, purché le scelte dei visitatori possano essere convertite in una stringa filtro.

Puoi leggere di più sui filtri nei nostri developer docs.

Paginazione dei risultati #

• I parametri limit e offset vengono utilizzati insieme per la paginazione
• limit controlla la quantità di prodotti da restituire 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 dalla risposta API contiene il numero totale di prodotti nella categoria, a prescindere dal limit. Può essere utilizzata per calcolare il numero di pagine dividendo count per limit e arrotondando per eccesso. Ad esempio: pages = ceil(count / limit)

Esempio completo di richiesta e risposta API #

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

La configurazione mostra:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina utilizzando limit e offset di 50
• Prodotti con il tipo “Star Wars” usando filtri
• Ordinati per prezzo dal più basso al più alto usando orderby price con 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 rende facile chiamare l’API di Clerk.io, applicare il tracking e gestire lo stile.

Panoramica #

Clerk.js ti consente di rendere una pagina categoria completa dal frontend utilizzando snippet HTML.

• Includi lo script di Clerk.js nell’header per poter utilizzare i codici embed sul tuo sito.
• Clerk.js scansiona il sito alla ricerca di 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 della griglia prodotti e lo stile.
• Clerk.js può gestire la paginazione senza codice aggiuntivo caricando più risultati quando un visitatore clicca su un pulsante, usando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML dei facets viene generato configurando l’embed code coi facets, le relative traduzioni e un blocco HTML target dove inserirli. Scopri di più sui facets di Clerk.js.

Prima di aggiungere il codice al tuo webshop, crea il design e l’Element per la Category Page in my.clerk.io.

Crea un design #

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Other designs > Blank > Code.
3. Usa l’AI Design Editor o Ask per creare un design a griglia per la Category Page. Fornisci uno screenshot delle tue schede prodotto o un link a una pagina dove l’AI possa vederle, così il design sarà abbinato al tuo webshop.
4. Salva il design.

Crea un Element #

1. Vai su Recommendations > Elements e crea un nuovo Element.
2. Dai un nome all’Element Category Page Grid.
3. Seleziona Bestsellers In Category come logica prodotto.
4. Seleziona il design Category Page che hai creato.
5. Imposta il limite di prodotti ad almeno 40.
6. Salva l’Element.

Aggiungi al sito #

La pagina di categoria necessita di un elemento HTML per i filtri e di un embed code di Clerk.js per i prodotti. I filtri vengono inseriti nel primo elemento, mentre i prodotti vengono resi all’interno del codice embed.

1. Apri la tab Insert into website dell’Element e copia il codice embed.
2. Nel template della pagina categoria, aggiungi un <div> vuoto dove dovranno apparire i filtri. Dagli l’ID clerk-category-filters.
3. Aggiungi il codice embed copiato dove deve apparire la griglia dei 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 attualmente visualizzata. Il tuo webshop deve mostrare il corretto ID per ogni pagina di categoria.
5. Imposta data-template col valore che corrisponde all’ID dell’Element che hai creato. Se hai dubbi, apri l’Element e vai su Insert into website > Using embedded code per controllare 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 prodotti che i visitatori dovrebbero poter filtrare. L’esempio include prezzo, categorie e brand; sostituiscili con attributi esistenti nel tuo catalogo.
8. Usa data-facets-titles per fornire le etichette che i visitatori devono vedere per ciascun 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 categoria filtrata.

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

Code Design #

Incolla il seguente HTML nel pannello HTML del code design vuoto. Fornisce una griglia prodotti, un menu a tendina per l’ordinamento e un pulsante per caricare altri prodotti. Il menu di ordinamento aggiorna i parametri orderby e order dell’Element 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</option>
      <option value="price:desc">Prezzo: dal più alto</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 prodotti. Aggiungi il contenitore dei filtri e il codice embed dell’Element al template della pagina categoria come mostrato di seguito. Leggi di più su come mostrare e aggiornare i Clerk.js Elements.

Embed code #

Sotto trovi un esempio per il template della pagina categoria. Il valore data-template deve corrispondere all’ID dell’Element che hai creato, qualunque sia il nome dell’Element. L’Element e il design selezionati determinano l’aspetto della griglia prodotti, mentre gli attributi data-facets-* controllano quali filtri sono mostrati.

<!-- I facets vengono inseriti qui. -->
<div id="clerk-category-filters"></div>

<!-- I prodotti vengono mostrati qui grazie all’Element e al 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": "Brand"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Vedi altri"
  data-facets-searchbox-text="Cerca ">
</span>

Sostituisci INSERT_ELEMENT_TEMPLATE con il valore trovato su Insert into website > Using embedded code nella pagina dell’Element.