Category Page

Control deslizante #

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 utilizando la función de búsqueda.

Las categorías tienden a tener muchos productos, por lo que puede ser difícil navegar por ellas, pero muchos clientes están buscando los mismos pocos productos en las categorías.

Estos productos seleccionados tienden a 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 alguna prueba de su valor.

Al colocar estos artículos en la parte superior de la página de categoría como un grupo de recomendaciones, se facilita mucho la navegación para tus clientes.

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 renderizar todos los resultados en una página de categoría, permitiendo una 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 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, se pueden utilizar para renderizar todos los productos en las páginas de categoría al reemplazar cualquier lógica existente de la tienda en línea para obtener productos, con la API de Clerk.

Si utilizas una configuración de API del lado del servidor, generalmente puedes mantener el estilo existente simplemente obteniendo los datos del producto de Clerk, mientras renderizas los visuales a través del código de la tienda en línea.

Estos son los dos endpoints disponibles:

• recommendations/category/popular
  (Clasificados por los artículos más vendidos - cambia ocasionalmente)
• recommendations/category/trending
  (Clasificados por productos que están en tendencia en ventas - cambia a menudo)

El mejor endpoint a utilizar depende del tipo de negocio.

Muchas tiendas de moda con inventario que cambia a menudo, generalmente obtienen más de los productos en tendencia.

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

Parámetros del endpoint de API #

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

Filtrando 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, debería convertirse en un filtro que se envía en la siguiente llamada a la API.
  • Por 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 un seguimiento de qué opciones están disponibles en cada categoría.
• También se puede hacer utilizando una GUI de filtro existente, siempre que las elecciones de los visitantes puedan convertirse en una cadena de filtro.

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

Paginando resultados #

• Los parámetros limit y offset se utilizan 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 la cantidad total de productos en la categoría, independientemente de limit. Se puede utilizar para calcular la cantidad de páginas dividiendo count por limit y redondeando hacia arriba. Por ejemplo: pages = ceil(count / limit)

Ejemplo completo de solicitud y respuesta de API #

Aquí hay 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 utilizando limit y offset de 50
• Productos con el tipo “Star Wars” utilizando filtros
• Ordenados por precio de bajo a alto utilizando orderby precio con orden ascendente
• Facets para el precio y la categoría

// Solicitud
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": ["Página de Categoría - Popular"],
          "visitor": "xfgu47fd2"
        }'

// Respuesta
{
  "status": "ok",
  "result": [
    27988,
    25629,
    22482
  ],
  "count": 11,
  "facets": {
    "categories": [
      {
        "type": "unit",
        "name": "Accesorios para el hogar",
        "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": "Adorno de Caza TIE de Swarovski Star Wars",
      "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, El Niño",
      "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 Maestro Yoda",
      "price": 131.52,
      "url": "https://warstars.com/products/star_wars_master_yoda"
    }
  ]
}

Usando Clerk.js #

Clerk.js es una biblioteca que facilita la llamada a la API de Clerk, aplicando seguimiento y manejando el estilo.

Beneficios #

• La configuración funciona de manera muy similar, aunque las llamadas a la API se realizan desde el frontend, utilizando fragmentos de HTML.
• Al incluir el script de Clerk.js en tu encabezado, puedes usar fragmentos directamente en tu frontend.
• Si utilizas alguna de las extensiones o complementos (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 hacer con el lenguaje de plantillas Liquid, dentro del fragmento.
• Clerk.js puede manejar la paginación sin codificación adicional, cargando más resultados en la página con el clic de un botón, utilizando esta función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• El HTML de los 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 se muestra un fragmento 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": "Precios", "categories": "Colecciones", "brand": "Vendedor"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="Ver Más"
  data-facets-searchbox-text="Buscar por ">
  
  <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 }}">Comprar Ahora</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#clerk-category-products', 'more', 60);">
              Mostrar Más Resultados
        </div>
    {% endif %}
  </div>
</span>