Uso de Clerk para mostrar páginas de categorías completas

Vea cómo utilizar nuestra lógica de Recomendaciones de categorías para mostrar todos los productos en las páginas de categorías.

Products:

Recommendations

IMPORTANTE: Reemplazar los productos de su categoría requiere conocimientos técnicos, y le recomendamos que busque ayuda de su propio desarrollador. Tenga en cuenta que nuestros desarrolladores internos en Clerk.io no pueden realizar esta tarea por usted.

Visión general

Clerk se puede utilizar para mostrar todos los resultados en una página de categoría, lo que permite una clasificación inteligente de los resultados, y el uso de Merchandising para un alto grado de control sobre qué productos se priorizan.

Este artículo describe el uso de nuestra API y de la librería Clerk.js como dos formas diferentes de manejar este renderizado.

Puntos finales de la API

Nuestros puntos finales recomendaciones de categorías funcionan exactamente igual que el punto final de nuestra página de búsqueda. La única diferencia es que estos puntos finales se basan en un ID de categoría en lugar de una consulta de búsqueda.

Debido a esto, se pueden utilizar para mostrar todos los productos en las páginas de categorías sustituyendo cualquier lógica existente en la tienda web para obtener productos con la API de Clerks. Si se utiliza una configuración de API del lado del servidor, normalmente se puede mantener el estilo existente simplemente obteniendo los datos del producto de Clerk, mientras que la representación visual se realiza a través del código de las tiendas web.

Estos son los dos puntos finales disponibles:

recomendaciones/categoría/popular
(Clasificado por los artículos más vendidos - cambia ocasionalmente)
recomendaciones/categoría/tendencias
(Clasificado por productos que son tendencia en ventas - cambia a menudo)

El mejor punto final a utilizar depende del tipo de negocio.

Las tiendas de moda con un inventario que cambia a menudo, suelen sacar el máximo partido de los productos en tendencia. Las tiendas con catálogos donde los clientes tienden a comprar los mismos artículos varias veces, como los suplementos o las tiendas de alimentación, deberían utilizar generalmente los productos más vendidos.

Parámetros del punto final de la API

He aquí un desglose de lo que hace cada argumento al realizar una llamada a un punto final de categoría

clave: La clave pública de la tienda
limit: La cantidad de productos a devolver
category: El ID de la categoría que se está visualizando
offset: El índice desde el que comenzar el conjunto de resultados. Se utiliza con limit para la paginación.
orderby: Un atributo para ordenar los resultados. Si no se envía, Clerk ordenará por artículos más vendidos
order: Puede ser asc o desc. Ordena los productos en orden ascendente o descendente
attributes: Una lista de atributos que Clerk debe devolver. Útil para configuraciones rápidas en las que Clerk devuelve todos los datos del producto. Si no se define, Clerk sólo devuelve los IDs de los productos.
filtro: Una cadena que configura Clerk para que sólo devuelva un subconjunto de productos. Se utiliza con los filtros existentes en la página o con las facetas de Clerk para permitir a los clientes limitar los resultados.
facetas: Una lista de atributos para ser devueltos como opciones de producto que luego se pueden convertir en un filtro cuando un visitante lo selecciona
Etiquetas La(s) etiqueta(s) asociada(s) a la página de categoría. Se utiliza para identificar el rendimiento en my.clerk.io
Visitante El ID de visitante del visitante actual navegando

Filtrado de resultados

Al enviar facets en la petición, Clerk devolverá una lista de las posibles opciones de filtrado para ese conjunto de resultados. Por ejemplo, si el producto más barato de la categoría es 10€ y el más caro es 500€, el cubo de precio más bajo podría ser 10-50€, y el más alto 450+€ o similar. Una categoría podría tener 10 marcas diferentes y otra sólo 3 en las facetas.
Cuando un visitante selecciona una opción, ésta debe convertirse en un filtro que se envía en la siguiente llamada a la API. Por ejemplo, filter='(precio > 10 y precio < 100) y marca="Swarovski"'.
Recomendamos crear una interfaz gráfica basada en las facetas de Clerks y listarlas como opciones seleccionables, ya que de este modo se realiza un seguimiento automático de las opciones disponibles en cada categoría.
También puede hacerse utilizando una GUI de filtro existente, siempre que las opciones de los visitantes puedan convertirse en una cadena de filtro
<x id=“871”/>Más información sobre filtros aquí<x id=“960”/>

Paginación de resultados

Los parámetros limit y offset se utilizan conjuntamente para la paginación
limit controla la cantidad de productos a devolver en cada llamada
offset controla el punto de partida en la lista completa de resultados
La primera llamada debe tener offset: 0, y cada llamada consecutiva offset: offset + limit.
- Página 1: limit: 60, offset: 0
- Página 2: limit: 60, offset: 60
- Página 3: limit: 60, offset: 120
- … y así sucesivamente
La clave count de la respuesta de la API contiene la cantidad total de productos de la categoría, independientemente del limit. Se puede utilizar para calcular la cantidad de páginas dividiendo count entre limit y redondeando hacia arriba. Por ejemplo: pages = ceil(count / limit)

Ejemplo completo de petición y respuesta a la API

He aquí un ejemplo completo de llamada y respuesta para mostrar productos en una categoría.

La visualización está configurada:

Productos de la categoría con ID 13
50 productos en la segunda página usando límite y offset de 50
Productos con el tipo “Star Wars” usando filtros
Ordenados por precio bajo-alto usando orderby precio con orden ascendente
Facetas para el precio y la categoría

// 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"
    }
  ]
}

Usando Clerk.js

Clerk.js es una biblioteca que facilita la llamada a la API de Clerks, la aplicación del seguimiento y el manejo del estilo.

La configuración funciona de forma muy similar, aunque las llamadas a la API se realizan desde el frontend, utilizando fragmentos de HTML
Incluyendo el script Clerk.js en tu cabecera, puedes usar fragmentos directamente en tu frontend
Si utilizas extensiones o plugins (por ejemplo, para Magento2 o WooCommerce), es probable que Clerk.js ya esté incluido.
Clerk.js escanea el sitio web en busca de fragmentos con la clase clerk, y realiza llamadas a la API utilizando los parámetros data-.
El estilo se puede realizar con el lenguaje de plantillas Liquid, dentro del fragmento.
Clerk.js puede manejar la paginación sin codificación extra, cargando más resultados en la página al pulsar un botón, usando esta función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
El HTML de las facetas se genera configurando el fragmento con las facetas, sus traducciones y un bloque HTML de destino en el que insertarlas. Más información sobre las facetas de Clerk.js aquí

Ejemplo de fragmento 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>