Category Page

Slider #

Le pagine di categoria 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 avesse avuto 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 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 altri consumatori, c’è una prova di valore.

Posizionando questi articoli nella parte superiore della pagina di categoria come gruppo di Recommendations, si rende molto più facile la navigazione per i clienti.

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

Pagina di 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 elevato grado di controllo su quali prodotti vengono prioritizzati.

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

Utilizzo dell’API #

I nostri endpoint di category recommendations funzionano esattamente come il nostro endpoint di search page. 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 di categoria sostituendo qualsiasi logica esistente del webshop per il recupero dei prodotti, con l’API di Clerk.

Se si utilizza una configurazione API lato server, di solito si può mantenere lo stile esistente semplicemente ottenendo i dati dei prodotti da Clerk, mentre il rendering visivo avviene tramite il codice del webshop.

Questi sono i due endpoint disponibili:

• recommendations/category/popular
  (Classificato in base ai prodotti più venduti - cambia occasionalmente)
• recommendations/category/trending
  (Classificato in base ai prodotti in tendenza di vendita - cambia spesso)

L’endpoint migliore da utilizzare dipende dal tipo di attività.

Molti negozi di moda con inventario che cambia spesso, generalmente ottengono i migliori risultati dai prodotti di tendenza.

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

Parametri degli endpoint API #

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

Filtrare i risultati #

• Quando vengono inviate le facets nella richiesta, Clerk restituisce un elenco delle possibili opzioni di filtro per quell’insieme di risultati.
  • Ad esempio, se il prodotto più economico della categoria è €10 e il più caro è €500, il bucket di prezzo più basso potrebbe essere €10-50, e il più alto €450+ o simili.
  • Una categoria potrebbe avere 10 marche diverse e un’altra solo 3 nelle facets.
• Quando un visitatore seleziona un’opzione, questa dovrebbe essere convertita in un filtro da inviare nella prossima chiamata API.
  • Esempio: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Si consiglia di creare un’interfaccia grafica basata sulle facets di Clerk e di elencarle come opzioni selezionabili, in quanto ciò tiene automaticamente traccia delle opzioni disponibili in ciascuna categoria.
• Può essere fatto anche utilizzando un’interfaccia filtro già esistente, purché le scelte del visitatore possano essere convertite in una stringa filtro.

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

Paginazione dei risultati #

• I parametri limit e offset vengono usati 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 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. Esempio: pages = ceil(count / limit)

Esempio completo di richiesta e risposta API #

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

È configurato per mostrare:

• Prodotti dalla categoria con ID 13
• 50 prodotti nella seconda pagina usando limit e offset di 50
• Prodotti con il tipo “Star Wars” usando filtri
• Ordinati per prezzo crescente utilizzando orderby price in 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.io, applicare il tracking e gestire lo stile.

Panoramica #

Clerk.js ti consente di visualizzare una pagina categoria completa dal frontend usando frammenti HTML.

• Includi lo script Clerk.js nella tua intestazione per poter usare i codici di incorporamento sul sito web.
• Clerk.js analizza il sito alla ricerca di elementi con la classe clerk e legge i relativi parametri data-.
• Utilizza il linguaggio di templating Liquid in un Code Design per controllare l’HTML e lo stile della griglia di prodotti.
• Clerk.js può gestire la paginazione senza bisogno di ulteriore codice caricando altri risultati quando un visitatore clicca un bottone, utilizzando questa funzione: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• L’HTML delle facets viene generato configurando il codice di incorporamento con le facets, le relative traduzioni e un blocco HTML obiettivo in cui inserirle. Leggi di più sulle facets di Clerk.js.

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

Crea un design #

Per una pagina categoria standard completa, 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 per il Code Design riportate di seguito.

Crea un Element #

1. Vai su Recommendations > Elements e crea un nuovo Element.
2. Assegna all’Element il nome Category Page Grid.
3. Seleziona Bestsellers In Category come logica prodotto.
4. Seleziona il design creato alla voce Crea un design.
5. Se il design selezionato supporta le facets, abilita Facets, imposta i Limits come faresti per Omnisearch e scegli le facets che vuoi mostrare.
6. Imposta il limite prodotti ad almeno 40.
7. Salva l’Element.

Aggiungi al tuo sito #

Ci sono due modi per aggiungere l’Element Category Page al tuo sito. Injection è l’opzione più semplice. Per maggior controllo su dove appaiono i filtri e la griglia dei prodotti, usa il codice di incorporamento e segui l’implementazione personalizzata sotto.

Injection #

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

Configura un selettore CSS univoco per la griglia prodotto della pagina categoria e scegli dove inserire l’Element. Poiché questo Element usa la logica categoria, configura anche il Category ID CSS selector così Clerk.js può leggere l’ID categoria corrente e mostrare i prodotti corretti per quella categoria.

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

Leggi di più su using injection.

Implementazione personalizzata #

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

1. Apri la scheda Insert into website dell’Element e copia il codice di incorporamento.
2. Nel template della pagina di categoria, aggiungi un <div> vuoto dove devono comparire i filtri. Assegnagli l’ID clerk-category-filters.
3. Aggiungi il codice di incorporamento copiato dove deve apparire la griglia prodotti. Assegna al suo elemento esterno l’ID clerk-category-products e lascia la classe clerk.
4. Sostituisci INSERT_CATEGORY_ID con l’ID della categoria attualmente in visualizzazione. Il tuo webshop deve fornire l’ID corretto per ogni pagina categoria.
5. Imposta data-template con il 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 devono poter filtrare. L’esempio include prezzo, categorie e marca; sostituiscili con gli attributi realmente presenti nel tuo catalogo.
8. Usa data-facets-titles per fornire le etichette che i visitatori dovrebbero vedere per ogni attributo.
9. Imposta data-facets-in-url="true" se i filtri selezionati devono essere aggiunti all’URL in modo che i visitatori possano 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 di incorporamento. Il valore data-category, il selettore data-facets-target e i due ID della pagina categoria devono corrispondere ai valori nel 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 bottone “carica altri”. Il menu a tendina aggiorna i parametri orderby e order dell’Element senza uscire dalla pagina categoria. Il valore order deve essere asc oppure desc.

<div class="clerk-category-page">
  <div class="clerk-category-toolbar">
    <label for="clerk-category-sort-{{ content.id }}">Sort by</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">Price: Low to high</option>
      <option value="price:desc">Price: High to low</option>
      <option value="name:asc">Name: A-Z</option>
      <option value="name:desc">Name: 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);">
      Load more products
    </button>
  {% endif %}
</div>

Il design controlla solo la griglia prodotti. Aggiungi il contenitore dei filtri e il codice di incorporamento dell’Element nel template della pagina categoria come mostrato sotto. Leggi di più su visualizzare e aggiornare gli Element di Clerk.js.

Codice di incorporamento #

Di seguito un esempio separato per il template della pagina categoria. Il valore data-template deve corrispondere all’ID dell’Element creato, indipendentemente dal suo nome. L’Element e il design selezionati determinano l’aspetto della griglia, mentre gli attributi data-facets-* controllano quali filtri sono mostrati.

<!-- Facets are inserted here. -->
<div id="clerk-category-filters"></div>

<!-- Products are rendered here using the selected Element and design. -->
<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": "Price", "categories": "Categories", "brand": "Brand"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for ">
</span>

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