Category Page

Slider #

Le pagine delle categorie vengono utilizzate quando un cliente cerca un particolare tipo di prodotto, ma non un prodotto specifico come t-shirt, divani o scarpe da corsa. Se avessero avuto un prodotto specifico in mente, 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 saranno probabilmente i best-seller. Questo perché i best-seller offrono al cliente un senso di sicurezza: se il prodotto era popolare tra gli altri, c’è una certa prova di valore.

Posizionando questi articoli in cima alla pagina della categoria come un gruppo di raccomandazioni, rende molto più facile per i tuoi clienti navigare.

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

Pagina categoria completa #

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

Questo articolo descrive l’uso della nostra API e della libreria Clerk.js come due modi diversi di gestire questa visualizzazione.

Utilizzo dell’API #

I nostri endpoint di raccomandazioni per categoria funzionano esattamente come il nostro endpoint di pagina di ricerca. L’unica differenza è che questi endpoint si basano su un ID di categoria anziché su una query di ricerca.

A causa di ciò, possono essere utilizzati per visualizzare tutti i prodotti sulle pagine delle categorie sostituendo qualsiasi logica esistente del webshop per il recupero dei prodotti, con l’API di Clerk.

Se utilizzi una configurazione API lato server, puoi solitamente mantenere lo stile esistente semplicemente ottenendo i dati del prodotto da Clerk, mentre visualizzi i contenuti attraverso il codice del webshop.

Questi sono i due endpoint disponibili:

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

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

Molti negozi di moda con un inventario che cambia spesso, generalmente ottengono il massimo dai prodotti in tendenza.

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

Parametri dell’endpoint API #

Ecco una panoramica di cosa fa ciascun argomento quando si effettua una chiamata a un endpoint di categoria.

Filtrare i risultati #

• Quando si inviano 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 è €10 e il più costoso è €500, il bucket di prezzo più basso potrebbe essere €10-50, e il più alto €450+ o simile.
  • Una categoria potrebbe avere 10 marchi diversi e un’altra solo 3 nei facets.
• Quando un visitatore seleziona un’opzione, dovrebbe essere convertita in un filtro che viene inviato nella successiva chiamata API.
  • Ad esempio, 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 poiché questo tiene automaticamente traccia delle opzioni disponibili in ciascuna categoria.
• Può anche essere fatto utilizzando un’interfaccia GUI di filtro esistente, purché le scelte dei visitatori possano essere convertite in una stringa di filtro.

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

Paginare i risultati #

• I parametri limit e offset vengono utilizzati insieme per la paginazione.
• limit controlla la quantità di prodotti da restituire per ciascuna 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, indipendentemente da 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 una chiamata e risposta per visualizzare prodotti su una categoria.

È configurato per visualizzare:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina utilizzando limit e offset di 50
• Prodotti con il tipo “Star Wars” utilizzando filtri
• Ordinati per prezzo crescente utilizzando orderby prezzo con ordine crescente
• Facets per il prezzo e la categoria

// Richiesta
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": ["Griglia Pagina Categoria - Popolare"],
          "visitor": "xfgu47fd2"
        }'

// Risposta
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Accessori per la casa",
        "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": "Ornamento Tie Fighter di Swarovski Star Wars",
      "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, Il Bambino",
      "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 Maestro Yoda",
      "price": 131.52,
      "url": "https://warstars.com/products/star_wars_master_yoda"
    }
  ]
}

Utilizzo di Clerk.js #

Clerk.js è una libreria che facilita la chiamata all’API di Clerk, applica il tracciamento e gestisce lo stile.

Vantaggi #

• La configurazione funziona in modo molto simile, anche se le chiamate API vengono effettuate dal frontend, utilizzando frammenti HTML.
• Includendo lo script di Clerk.js nel tuo header, puoi utilizzare frammenti direttamente nel tuo frontend.
• Se utilizzi uno qualsiasi degli estensioni o plugin (ad esempio per Magento2 o WooCommerce), è probabile che Clerk.js sia già incluso.
• Clerk.js scansiona il sito web per eventuali frammenti con la classe clerk, e fa chiamate API utilizzando i parametri data-.
• Lo stile può essere fatto con il linguaggio di templating Liquid, all’interno del frammento.
• Clerk.js può gestire la paginazione senza codifica extra, caricando più risultati sulla pagina al clic di un pulsante, utilizzando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML dei facets viene generato configurando il frammento con i facets, le loro traduzioni e un blocco HTML di destinazione in cui inserirli. Leggi di più sui facets di Clerk.js qui

Esempio di codice #

Di seguito è riportato un frammento completo che visualizza prodotti e facets su una pagina di categoria.

<div id="clerk-category-filters"></div>

<span 
  id="clerk-category-products"
  class="clerk" 
  data-category="113"
  data-facets-target="#clerk-category-filters" 
  data-facets-attributes='["price","categories"]'
  data-facets-titles='{"price": "Prezzo", "categories": "Collezioni", "brand": "Fornitore"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Visualizza di più"
  data-facets-searchbox-text="Cerca per ">
  
  <div class="product-search-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Acquista ora</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Mostra più risultati
        </div>
    {% endif %}
  </div>
</span>