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 habrían buscado primero usando la función de Search.

Las categorías suelen tener muchos productos, por lo que puede ser difícil navegar por ellas, pero muchos clientes buscan los mismos pocos productos en 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 una 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 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 probabilidades de conversión.

Página de categoría completa #

Clerk se puede usar para mostrar todos los resultados en una página de categoría, permitiendo un ordenamiento inteligente de los resultados, y usando Merchandising para tener 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 category recommendations funcionan exactamente igual que nuestro endpoint de search page. 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 del webshop para obtener productos con la API de Clerk.

Si utilizas una configuración de API lado servidor, normalmente puedes mantener el estilo visual existente simplemente obteniendo los datos del producto de Clerk, mientras renderizas los elementos visuales a través del código del webshop.

Estos son los dos endpoints disponibles:

• recommendations/category/popular
  (Clasifica por los artículos más vendidos - cambia ocasionalmente)
• recommendations/category/trending
  (Clasifica por productos en tendencia en ventas - cambia frecuentemente)

El mejor endpoint a usar depende del tipo de negocio.

Muchas tiendas de moda con inventario que cambia con frecuencia, generalmente obtienen mejores resultados usando productos en tendencia.

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

Parámetros del endpoint de la API #

A continuación, un desglose de lo que hace cada argumento al realizar una llamada a un endpoint de categoría.

Filtrar resultados #

• Cuando se envían 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 cuesta €10 y el más caro €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 distintas y otra solo 3 en las facets.
• Cuando un visitante selecciona una opción, esta debe 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 las facets de Clerk y listarlas como opciones seleccionables, ya que esto mantiene actualizadas automáticamente las opciones disponibles en cada categoría.
• También puede hacerse usando una GUI de filtro ya existente, siempre que las selecciones de los visitantes se puedan convertir en una cadena de filtro.

Puedes leer más sobre los 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 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 en la respuesta de la API contiene la cantidad total de productos en la categoría, independientemente de limit. Se puede usar para calcular la cantidad de páginas dividiendo count por limit y redondeando hacia arriba. Ejemplo: pages = ceil(count / limit)

Ejemplo completo de solicitud y respuesta de la API #

A continuación se muestra 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 usando 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 realizar llamadas a la API de Clerk, aplicar seguimiento y manejar estilos.

Beneficios #

• La configuración funciona de manera muy similar, aunque las llamadas a la API se realizan desde el frontend, usando fragmentos HTML
• Al incluir el script de Clerk.js en tu encabezado, puedes usar los fragmentos directamente en tu frontend
• Si usas alguna extensión o plugin (ej. para Magento2 o WooCommerce), seguramente 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-
• La personalización de estilos se puede hacer con el lenguaje de plantillas Liquid, dentro del fragmento
• Clerk.js puede manejar la paginación sin programación 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 las facets, sus traducciones y un bloque HTML de destino donde insertarlas. Lee más sobre facets de Clerk.js aquí

Ejemplo de código #

A continuación se muestra un fragmento completo que presenta 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>