Category Page

Slider #

Le pagine di categoria vengono utilizzate quando un cliente sta cercando una particolare tipologia di prodotto, ma non un prodotto specifico come t-shirt, divani o scarpe da corsa. Se avesse un prodotto specifico in mente, molto probabilmente lo avrebbe cercato prima utilizzando 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 nelle categorie.

Questi prodotti selezionati tendono ad essere gli stessi per ogni cliente, quindi probabilmente sono i best-seller. Questo perché i best-seller offrono al cliente una sensazione di sicurezza: se il prodotto è stato popolare tra altri c’è una certa prova di valore.

Posizionando questi articoli nella parte superiore della pagina di categoria come un gruppo di Recommendations, si facilita molto la navigazione per i clienti.

È probabile che questi prodotti attireranno l’interesse dei nuovi clienti e quindi aumenteranno le possibilità di conversione.

Pagina di categoria completa #

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

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

Uso delle 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 visualizzare tutti i prodotti nelle pagine di categoria, sostituendo qualsiasi logica web esistente per il recupero dei prodotti, con la API di Clerk.

Se si utilizza una configurazione server side dell’API, di solito è possibile mantenere lo stile esistente semplicemente ottenendo i dati dei prodotti da Clerk, mentre la visualizzazione avviene tramite il codice del webshop.

Questi sono i due endpoint disponibili:

• recommendations/category/popular
  (Classificato per articoli più venduti - cambia occasionalmente)
• recommendations/category/trending
  (Classificato per prodotti che stanno andando di moda nelle vendite - cambia spesso)

Il miglior endpoint da utilizzare dipende dal tipo di business.

Molti negozi di moda con 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 alimentari, dovrebbero generalmente utilizzare i best-seller.

Parametri 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 le facets nella richiesta, Clerk restituirà un elenco delle possibili opzioni di filtro per quel set di risultati.
  • Ad esempio, se il prodotto meno costoso nella categoria costa €10 e il più costoso €500, la fascia di prezzo più bassa potrebbe essere €10-50 e la più alta €450+ o simile.
  • Una categoria potrebbe avere 10 marche diverse e un’altra solo 3 nelle facets.
• Quando un visitatore seleziona un’opzione, dovrebbe essere convertita in un filtro inviato nella successiva chiamata API.
  • Esempio: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Si consiglia di creare un’interfaccia grafica in base alle facets di Clerk e di elencarle come opzioni selezionabili in quanto tiene automaticamente traccia delle opzioni disponibili in ciascuna categoria.
• Può essere fatto anche utilizzando una GUI di filtro esistente, purché le scelte del visitatore possano essere convertite in una stringa filtro.

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

Paginazione dei risultati #

• I parametri limit e offset sono utilizzati insieme per la paginazione
• limit controlla il numero 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 consecutiva 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 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 di una categoria.

È configurato per mostrare:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina usando limit e offset di 50
• Prodotti con tipo “Star Wars” usando i filtri
• Ordinati per prezzo dal basso all’alto usando orderby prezzo con ordine ascendente
• Facets 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": 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"
    }
  ]
}

Uso di Clerk.js #

Clerk.js è una libreria che semplifica la chiamata alle API di Clerk.io, l’applicazione del tracking e la gestione dello styling.

Conserva il contenuto della categoria #

Quando si utilizza Clerk.js per sostituire una pagina di categoria, si consiglia generalmente di mantenere i prodotti esistenti della piattaforma webshop sotto come fallback. Lascia che la piattaforma li visualizzi nell’HTML iniziale, poi lascia che Clerk.js sostituisca la griglia prodotti dopo che i suoi prodotti sono stati caricati con successo.

Mantieni anche il titolo della categoria (H1), gli altri titoli e la descrizione della categoria renderizzati dalla piattaforma webshop. Mantieni questo contenuto fuori dalla griglia prodotti che sostituisci, così rimane disponibile senza JavaScript.

Google esegue JavaScript durante la renderizzazione delle pagine, ma il caricamento ed esecuzione con successo non sono garantiti, e non tutti i crawler dei motori di ricerca eseguono JavaScript. Consulta la guida SEO JavaScript di Google.

Mantenere i prodotti e il contenuto categoria della piattaforma nell’HTML iniziale permette ai motori di ricerca di leggerli anche se JavaScript non viene caricato. I visitatori avranno anche una pagina categoria utilizzabile se Clerk.js o la richiesta prodotti fallisce.

Nascondi o sostituisci i prodotti originali solo una volta che la griglia di Clerk.js è stata caricata con successo. Evita di rimuoverli dal template della piattaforma o di nasconderli con CSS che si applica anche quando JavaScript non è disponibile.

Verifica la tua implementazione con JavaScript disabilitato e con le richieste Clerk.io bloccate. In entrambi i casi, le intestazioni della piattaforma, il testo della categoria e i link ai prodotti dovrebbero rimanere visibili. Con Clerk.js funzionante, verifica che sia presente una sola griglia di prodotti e un solo H1 della categoria.

Panoramica #

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

• Includi lo script Clerk.js nell’header per poter usare i codici embed sul tuo sito web.
• Clerk.js esegue la scansione del sito per gli elementi con classe clerk e legge i loro parametri data-.
• Usa il linguaggio di template Liquid in una Code Design per controllare l’HTML della griglia prodotti e lo styling.
• Clerk.js può gestire la paginazione senza codice extra caricando più risultati quando un visitatore clicca un pulsante, usando la funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML delle facets viene generato configurando il codice embed con le facets, le loro traduzioni e un blocco HTML target in cui inserirle. Leggi di più sulle facets di Clerk.js.

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

Crea un design #

Per una pagina di categoria completa standard, crea il design standard Category Page:

1. Vai su Recommendations > Designs e clicca su New Design.
2. Scegli Grid Design, poi seleziona il design standard Category Page.
3. Salva il design.

Per un layout personalizzato, scegli un Code Design vuoto sotto Grid Design e segui le istruzioni Code Design qui sotto.

Crea un Element #

1. Vai su Recommendations > Elements e crea un nuovo Element.
2. Nomina l’Element Category Page Grid.
3. Seleziona Bestsellers In Category come logica del prodotto.
4. Seleziona il design creato nella sezione Crea un design.
5. Se il design selezionato supporta le facets, abilita le Facets, imposta i Limits come faresti per Omnisearch, e seleziona le facets che vuoi visualizzare.
6. Imposta il limite dei prodotti almeno a 40.
7. Salva l’Element.

Aggiungi al tuo sito web #

Ci sono due modi per aggiungere l’Element Category Page al tuo sito. Injection è l’opzione più semplice. Per un maggiore controllo su dove appaiono i filtri e la griglia prodotti, utilizza il codice embed e segui la personalizzazione sotto.

Injection #

Apri la scheda Insert into website dell’Element e seleziona Using injection.

Configura un selettore CSS univoco per la griglia prodotti della category-page e scegli dove deve essere inserito l’Element. Poiché questo Element usa una logica di categoria, configura anche il Category ID CSS selector così Clerk.js può leggere l’ID della categoria corrente e mostrare i prodotti corretti per quella categoria.

Targettizza la griglia di prodotti, non un contenitore che include anche il titolo e la descrizione della categoria. Segui Preserva il contenuto della categoria per mantenere i prodotti della piattaforma disponibili fino a visualizzazione completata.

Quando il design selezionato supporta le facets, l’Element inserito le include automaticamente.

Leggi di più su come usare l’injection.

Implementazione personalizzata #

L’implementazione personalizzata richiede un elemento HTML per i filtri e un codice embed Clerk.js per i prodotti. I filtri sono inseriti nel primo elemento, mentre i prodotti sono visualizzati all’interno del codice embed.

Mantieni l’output prodotto esistente della piattaforma nel template di categoria come descritto in Preserva il contenuto della categoria. Il solo codice embed non gestisce questo fallback; la tua implementazione deve mantenere la griglia originale visibile fino a caricamento dei prodotti di Clerk.js.

1. Apri la scheda Insert into website dell’Element e copia il codice embed.
2. Nel template della pagina di categoria, aggiungi un <div> vuoto dove devono apparire i filtri. Dai l’ID clerk-category-filters.
3. Aggiungi il codice embed copiato dove deve apparire la griglia prodotti. Assegna 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 fornire l’ID corretto su ogni pagina categoria.
5. Imposta data-template sul valore che corrisponde all’ID dell’Element creato. In caso di dubbio, 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 prodotto che i visitatori dovrebbero poter filtrare. L’esempio include price, categories e brand; sostituiscili con attributi presenti nel tuo catalogo.
8. Usa data-facets-titles per fornire le etichette che i visitatori vedranno 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 a una pagina categoria filtrata.

Se Clerk.js non è già installato sul tuo webshop, aggiungi lo script Clerk.js alla pagina prima di usare il codice embed. Il valore data-category, il selettore data-facets-target e i due ID della pagina categoria devono corrispondere ai valori del tuo template.

Code Design #

Se hai creato un Code Design vuoto sotto Grid Design, incolla il seguente HTML nel suo pannello HTML. Fornisce una griglia prodotti, un menu a tendina per l’ordinamento e un pulsante per caricare altro. Il menu a tendina 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 basso all’alto</option>
      <option value="price:desc">Prezzo: dall’alto al basso</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 di prodotti. Aggiungi il contenitore filtri e il codice embed dell’Element nel template della pagina di categoria come mostrato sotto. Leggi di più su visualizzazione e aggiornamento degli Elementi Clerk.js.

Codice embed #

Qui sotto un esempio separato per il template della pagina categoria. Il valore data-template deve corrispondere all’ID dell’Element creato, indipendentemente dal nome dell’Element. L’Element e il design selezionati determinano come appare la griglia di prodotti, mentre gli attributi data-facets-* controllano quali filtri vengono mostrati.

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

<!-- I prodotti sono visualizzati qui usando Element e 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": "Marca"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Mostra di più"
  data-facets-searchbox-text="Cerca">
</span>

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