Category Page

Cursore #

Le pagine di categoria sono utilizzate quando un cliente cerca un particolare tipo di prodotto, ma non un prodotto specifico come magliette, divani o scarpe da corsa. Se avesse in mente un prodotto specifico, molto probabilmente lo avrebbe 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 più venduti. Questo perché i prodotti più venduti offrono al cliente un senso di sicurezza: se il prodotto è stato popolare tra gli altri, è una prova di valore.

Posizionando questi articoli all’inizio della pagina della categoria come gruppo di raccomandazioni, si facilita la navigazione dei clienti. È probabile che questi prodotti suscitino l’interesse dei nuovi clienti e quindi aumentino le possibilità di conversione.

Pagina di categoria completa #

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

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

Endpoint dell’API #

Gli endpoint delle raccomandazioni di categoria funzionano esattamente come quelli della pagina di ricerca. L’unica differenza è che questi endpoint si basano su un ID di categoria anziché su una query di ricerca.

Per questo motivo, possono essere utilizzati per visualizzare tutti i prodotti nelle pagine delle categorie, sostituendo la logica esistente del webshop per il reperimento dei prodotti con l’API di Clerks. Se si utilizza una configurazione API lato server, di solito è possibile mantenere lo stile esistente semplicemente ottenendo i dati dei prodotti da Clerk, mentre il rendering delle immagini avviene tramite il codice del webshop.

Questi sono i due endpoint disponibili:

• raccomandazioni/categoria/popolare
  (classifica degli articoli più venduti - cambia occasionalmente)
• recommendations/category/trending
  (Classifica dei prodotti che fanno tendenza nelle vendite - cambia spesso)

L’endpoint migliore da utilizzare dipende dal tipo di azienda.

Molti negozi di moda con un inventario che cambia spesso, in genere ottengono il massimo dai prodotti di tendenza. I negozi con cataloghi in cui i clienti tendono ad acquistare più volte gli stessi articoli, come gli integratori o i negozi di alimentari, dovrebbero generalmente utilizzare i bestseller.

Parametri dell’endpoint API #

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

• chiave: La chiave pubblica del negozio
• limite: La quantità di prodotti da restituire
• categoria: L’ID della categoria attualmente sfogliata
• offset: L’indice da cui iniziare l’insieme dei risultati. Utilizzato con limit per la paginazione.
• orderby: Un attributo per ordinare i risultati. Se non viene inviato, Clerk ordinerà in base agli articoli più venduti.
• ordine: Può essere asc o desc. Ordina i prodotti in ordine crescente o decrescente.
• attributi: Un elenco di attributi che Clerk deve restituire. Utile per le configurazioni veloci in cui tutti i dati dei prodotti sono restituiti da Clerk. Se non è impostato, Clerk restituisce solo gli ID dei prodotti.
• filtro: Una stringa che configura Clerk per restituire solo un sottoinsieme di prodotti. Utilizzato con i filtri esistenti nella pagina o con le facet di Clerks per consentire ai clienti di restringere i risultati.
• facets: Un elenco di attributi da restituire come opzioni di prodotto, che può essere convertito in un filtro quando il visitatore lo seleziona.
• labels: L’etichetta o le etichette associate alla pagina della categoria. Usato per identificare le prestazioni in my.clerk.io
• visitatore: L’ID del visitatore attuale che sta navigando

Filtrare i risultati #

• Quando si invia facets nella richiesta, Clerk restituirà un elenco delle possibili opzioni di filtro per quell’insieme di risultati. Ad esempio, se il prodotto più economico della categoria è €10 e quello più costoso è €500, la fascia di prezzo più bassa potrebbe essere €10-50 e quella più alta €450+ o simili. Una categoria potrebbe avere 10 marche diverse e un’altra solo 3 nelle sfaccettature.
• Quando un visitatore seleziona un’opzione, questa deve essere convertita in un filtro che viene inviato nella successiva chiamata API. Ad esempio, filtro='(prezzo > 10 e prezzo < 100) e marca="Swarovski"'
• Si consiglia di creare un’interfaccia grafica basata sulle sfaccettature di Clerks e di elencarle come opzioni selezionabili, poiché in questo modo si tiene automaticamente traccia delle opzioni disponibili in ciascuna categoria.
• Si può anche utilizzare un’interfaccia grafica di filtro esistente, purché le scelte dei visitatori possano essere convertite in una stringa di filtro
• <x id=“872”/>Per saperne di più sui filtri, leggere qui<x id=“961”/>

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: limite: 60, offset: 0
  • Pagina 2: limite: 60, offset: 60
  • Pagina 3: limite: 60, offset: 120
  • … e così via
• La chiave count della risposta API contiene la quantità totale di prodotti nella categoria, indipendentemente dal limite. Può essere usata per calcolare la quantità di pagine dividendo count con limit e arrotondando per eccesso. Es: pagine = ceil(count / limit)

Esempio completo di richiesta e risposta API #

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

La visualizzazione è configurata:

• Prodotti della categoria con ID 13
• 50 prodotti nella seconda pagina utilizzando il limite e l’offset di 50
• Prodotti con il tipo “Star Wars” usando i filtri
• Ordinati per prezzo basso-alto utilizzando orderby price con ordine crescente
• Facet per il prezzo e la 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": 50,
          "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,
    26994,
    27001,
    28098,
    22484,
    25623,
    27746,
    28097
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Home Accessories",
        "value": 81,
        "count": 1
      },
      {
        "type": "unit",
        "name": "Swarovski",
        "value": 3436,
        "count": 5
      },
      {
        "type": "unit",
        "name": "Home Accessories",
        "value": 3418,
        "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"
    },
    {
      "id": 26994,
      "image": "https://warstars.com/images/swarovski_star_wars_ewok_wicket.jpg",
      "name": "Swarovski Star Wars Ewok Wicket",
      "price": 132,
      "url": "https://warstars.com/products/star_wars_ewok_wicket"
    },
    {
      "id": 27001,
      "image": "https://warstars.com/images/swarovski_star_wars_han_solo.jpg",
      "name": "Swarovski Star Wars Han Solo",
      "price": 212.5,
      "url": "https://warstars.com/products/star_wars_han_solo"
    },
    {
      "id": 28098,
      "image": "https://warstars.com/images/swarovski_star_wars_boba_fett.jpg",
      "name": "Swarovski Disney Star Wars Boba Fett",
      "price": 300,
      "url": "https://warstars.com/products/star_wars_boba_fett"
    },
    {
      "id": 22484,
      "image": "https://warstars.com/images/swarovski_star_wars_darth_vader.jpg",
      "name": "Swarovski Star Wars Darth Vader",
      "price": 320,
      "url": "https://warstars.com/products/star_wars_darth_vader"
    },
    {
      "id": 25623,
      "image": "https://warstars.com/images/swarovski_star_wars_x_wing_starfighter.jpg",
      "name": "Swarovski Star Wars X-Wing Starfighter",
      "price": 320,
      "url": "https://warstars.com/products/star_wars_x_wing_starfighter"
    },
    {
      "id": 27746,
      "image": "https://warstars.com/images/swarovski_star_wars_chewbacca.jpg",
      "name": "Swarovski Star Wars Chewbacca",
      "price": 340,
      "url": "https://warstars.com/products/star_wars_chewbacca"
    },
    {
      "id": 28097,
      "image": "https://warstars.com/images/swarovski_star_wars_obi_wan_kenobi.jpg",
      "name": "Swarovski Disney Star Wars Obi-Wan Kenobi",
      "price": 350,
      "url": "https://warstars.com/products/star_wars_obi_wan_kenobi"
    }
  ]
}

Utilizzo di Clerk.js #

Clerk.js è una libreria che semplifica la chiamata alle API di Clerks, l’applicazione del tracciamento e la gestione dello stile.

• L’impostazione funziona in modo molto simile, anche se le chiamate all’API vengono effettuate dal frontend, utilizzando snippet HTML.
• Includendo lo script Clerk.js nell’intestazione, è possibile utilizzare gli snippet direttamente nel frontend.
• Se si utilizzano estensioni o plugin (ad esempio per Magento2 o WooCommerce), probabilmente Clerk.js è già incluso.
• Clerk.js analizza il sito web alla ricerca di qualsiasi snippet con la classe clerk ed effettua chiamate API utilizzando i parametri data-.
• Lo styling può essere fatto con il linguaggio di template Liquid, all’interno dello snippet
• Clerk.js può gestire la paginazione senza ulteriore codifica, caricando più risultati sulla pagina al clic di un pulsante, utilizzando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML dei facet viene generato configurando lo snippet con i facet, le loro traduzioni e un blocco HTML di destinazione in cui inserirli. Per saperne di più sulle sfaccettature di Clerk.js, cliccare qui

Esempio di snippet completo:

<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>