Category Page

Slider #

Le pagine di categoria vengono utilizzate quando un cliente sta cercando un determinato tipo di prodotto, ma non un prodotto specifico come t-shirt, divani o scarpe da corsa. Se avessero un prodotto specifico in mente, molto probabilmente lo avrebbero cercato per primo usando la funzione di Search.

Le categorie tendono ad avere molti prodotti, quindi può essere difficile navigarle, ma molti clienti cercano sempre gli stessi pochi prodotti all’interno delle categorie.

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

Inserendo questi articoli all’inizio della pagina di categoria come gruppo di Recommendations, si rende molto più facile la navigazione per i 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, consentendo l’ordinamento intelligente dei risultati e utilizzando Merchandising per un alto grado di controllo su quali prodotti vengono prioritizzati.

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

Utilizzo dell’API #

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

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

Se utilizzi una configurazione dell’API lato server, di solito puoi mantenere lo stile esistente semplicemente ottenendo i dati del prodotto da Clerk, mentre renderizzi i visual attraverso il codice del webshop.

Questi sono i due endpoint disponibili:

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

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

Molti negozi di moda con inventario che cambia spesso generalmente traggono maggior beneficio dai prodotti di 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 endpoint API #

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

Filtrare i risultati #

• Quando si inviano i facets nella richiesta, Clerk restituirà un elenco delle possibili opzioni di filtro per quel set di risultati.
  • Es. se il prodotto più economico nella categoria costa €10 e il più caro €500, il bucket di prezzo più basso potrebbe essere €10–50, e il più alto €450+ o simile.
  • Una categoria può avere 10 brand diversi nei facets e un’altra solo 3.
• Quando un visitatore seleziona un’opzione, questa deve essere convertita in un filtro che viene inviato nella successiva chiamata API.
  • Es. filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Si consiglia di creare un’interfaccia grafica basata sui facets di Clerk e di elencarli come opzioni selezionabili, in quanto ciò tiene automaticamente traccia delle opzioni disponibili in ogni categoria.
• Può anche essere fatto utilizzando un’interfaccia filtro esistente, purché le scelte dei visitatori possano essere convertite in una stringa 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 restituiti per ogni chiamata
• offset controlla il punto di partenza nell’elenco completo dei risultati
• La prima chiamata dovrebbe avere offset: 0 e ciascuna 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 la quantità totale di 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 e risposta API #

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

È configurata per mostrare:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina utilizzando limit e offset di 50
• Prodotti del tipo “Star Wars” usando i 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, applicare il tracciamento e gestire lo stile.

Vantaggi #

• La configurazione funziona in modo molto simile, anche se le chiamate API sono fatte dal frontend, usando snippet HTML
• Includendo lo script Clerk.js nell’header, puoi usare gli snippet direttamente nel frontend
• Se utilizzi una delle estensioni o plugin (ad esempio per Magento2 o WooCommerce), Clerk.js sarà probabilmente già incluso
• Clerk.js scansiona il sito per qualsiasi snippet con la classe clerk e fa le chiamate API usando i parametri data-
• Lo stile può essere gestito tramite il linguaggio di template Liquid, all’interno dello snippet
• Clerk.js può gestire la paginazione senza codice aggiuntivo, caricando altri risultati sulla pagina al clic di un pulsante, usando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML dei facets viene generato configurando lo snippet con i facets, le loro traduzioni e un blocco HTML target in cui inserirli. Leggi di più sui facets di Clerk.js qui

Esempio di codice #

Qui sotto un esempio completo di snippet che mostra 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": "Pricing", "categories": "Collections", "brand": "Vendor"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for ">
  
  <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 }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Show More Results
        </div>
    {% endif %}
  </div>
</span>