Utilizzo di Clerk per mostrare le pagine complete delle categorie

Scoprite come utilizzare le logiche di raccomandazione delle categorie per mostrare tutti i prodotti nelle pagine delle categorie.

Products:

Recommendations

IMPORTANTE: ** La sostituzione dei prodotti della categoria richiede competenze tecniche e si consiglia di chiedere assistenza al proprio sviluppatore.** ** Si prega di notare che i nostri sviluppatori interni di Clerk.io non sono in grado di eseguire questa operazione per voi.**

Panoramica

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

recommendations/category/popular
(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=“871”/>Per saperne di più sui filtri, leggere qui<x id=“960”/>

Paginazione dei risultati

I parametri limit e offset vengono usati 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 sulla 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.

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