Category Page

Carrusel #

Las páginas de categoría se utilizan cuando un cliente está buscando un tipo particular de producto, pero no un producto específico como camisetas, sofás o zapatillas para correr. Si tuvieran un producto específico en mente, lo más probable es que lo hubieran buscado primero usando la función de Search.

Las categorías tienden a tener muchos productos, por lo que puede ser difícil navegarlas, pero muchos clientes buscan los mismos pocos productos dentro de las categorías.

Estos productos seleccionados suelen ser los mismos para cada cliente, por lo que probablemente serán los más vendidos. Esto se debe a que los más vendidos ofrecen al cliente una sensación de seguridad: si el producto fue popular entre otros, hay cierta prueba de valor.

Al colocar estos artículos en la parte superior de la página de categoría como un grupo de Recommendations, se hace mucho más fácil para tus clientes navegar.

Es probable que estos productos despierten el interés de nuevos clientes y, por lo tanto, aumenten las posibilidades de conversión.

Página de categoría completa #

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

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

Usando la API #

Nuestros endpoints de recomendaciones de categoría funcionan exactamente igual que nuestro endpoint de página de búsqueda. La única diferencia es que estos endpoints dependen de un ID de categoría en lugar de una consulta de búsqueda.

Debido a esto, pueden usarse para mostrar todos los productos en las páginas de categoría reemplazando cualquier lógica existente en el e-commerce para obtener productos, con la API de Clerk.

Si usas una configuración API del lado del servidor, generalmente puedes mantener el estilo existente obteniendo simplemente los datos del producto de Clerk, mientras renderizas los elementos visuales a través del código del e-commerce.

Estos son los dos endpoints disponibles:

• recommendations/category/popular
  (Clasificado por artículos más vendidos; cambia ocasionalmente)
• recommendations/category/trending
  (Clasificado por productos que están en tendencia de ventas; cambia frecuentemente)

El mejor endpoint para usar depende del tipo de negocio.

Muchas tiendas de moda con inventario que cambia frecuentemente generalmente sacan más provecho de los productos en tendencia.

Las tiendas con catálogos donde los clientes tienden a comprar los mismos artículos varias veces, como suplementos o tiendas de alimentos, deberían usar los más vendidos.

Parámetros del endpoint de la API #

Aquí tienes un desglose de lo que hace cada argumento al realizar una llamada a un endpoint de categoría.

Filtrado de resultados #

• Al enviar facets en la solicitud, Clerk devolverá una lista de las posibles opciones de filtro para ese conjunto de resultados.
  • Por ejemplo, si el producto más barato en la categoría es €10 y el más caro es €500, el rango 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 solo 3 en los facets.
• Cuando un visitante selecciona una opción, debe convertirse en un filtro que se envía en la siguiente llamada a la API.
  • Ejemplo: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Recomendamos crear una interfaz gráfica basada en los facets de Clerk y listarlos como opciones seleccionables ya que esto mantiene automáticamente el seguimiento de qué opciones están disponibles en cada categoría.
• También se puede hacer utilizando un GUI de filtro existente, siempre que las elecciones del visitante puedan convertirse en una cadena de filtro.

Puedes leer más sobre filtros en nuestra documentación para desarrolladores.

Paginación de resultados #

• Los parámetros limit y offset se usan juntos para la paginación
• limit controla la cantidad de productos a devolver por cada llamada
• offset controla el punto de inicio 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 el total de productos en la categoría, independientemente de limit. Puede usarse para calcular la cantidad de páginas dividiendo count entre limit y redondeando hacia arriba. Ejemplo: pages = ceil(count / limit)

Ejemplo completo de solicitud y respuesta API #

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

Está configurado para mostrar:

• Productos de la categoría con ID 13
• 50 productos en la segunda página usando limit y offset de 50
• Productos con el tipo “Star Wars” usando filtros
• Ordenados por precio de menor a mayor utilizando orderby price con orden ascendente
• Facets 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": 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"
    }
  ]
}

Usando Clerk.js #

Clerk.js es una biblioteca que facilita llamar a la API de Clerk, aplicar seguimiento y manejar el estilo.

Beneficios #

• La configuración funciona de forma muy similar, aunque las llamadas a la API se realizan desde el frontend, usando fragmentos HTML
• Incluyendo el script Clerk.js en tu encabezado, puedes usar fragmentos directamente en tu frontend
• Si usas alguna extensión o plugin (por ejemplo para Magento2 o WooCommerce), probablemente Clerk.js ya esté incluido
• Clerk.js escanea el sitio web en busca de cualquier fragmento con la clase clerk y realiza llamadas a la API usando los parámetros data-
• El estilo puede realizarse con el lenguaje de plantillas Liquid, dentro del snippet
• Clerk.js puede manejar la paginación sin código extra, cargando más resultados en la página con solo hacer clic en un botón, usando esta función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• El HTML de Facets se genera configurando el fragmento con los facets, sus traducciones y un bloque HTML objetivo para insertarlos. Lee más sobre los facets de Clerk.js aquí

Ejemplo de código #

A continuación, un snippet completo que muestra productos y facets en una página de categoría.

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