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 tuviera un producto específico en mente, lo más probable es que lo hubiera buscado primero usando la función de Search.

Las categorías tienden a 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 cierta prueba de su valor.

Al colocar estos artículos en la parte superior de la página de categoría como un grupo de Recommendations, facilitas mucho más 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 usar para mostrar todos los resultados en una página de categoría, permitiendo una clasificación inteligente de los resultados y usando Merchandising para obtener 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.

Uso de 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, se pueden usar para mostrar todos los productos en páginas de categorías reemplazando cualquier lógica existente en el webshop para obtener productos, utilizando la API de Clerk.

Si usas una configuración de API del lado del servidor, normalmente puedes conservar el estilo existente simplemente obteniendo los datos de producto de Clerk, mientras que los elementos visuales se muestran mediante el código del webshop.

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 con frecuencia)

El mejor endpoint a utilizar depende del tipo de negocio.

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

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

Parámetros del endpoint de la API #

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

Filtrar resultados #

• Al enviar facets en la petición, 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 las facets.
• Cuando un visitante selecciona una opción, 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 los facets de Clerk y listarlos como opciones seleccionables, ya que esto automáticamente realiza un seguimiento de qué opciones están disponibles en cada categoría.
• También se puede hacer utilizando una interfaz gráfica de filtro existente, siempre y cuando las decisiones del visitante puedan convertirse en una cadena de filtro

Puedes leer más acerca de 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 para 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. 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 petición y respuesta a la 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” utilizando 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"
    }
  ]
}

Uso de Clerk.js #

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

Visión general #

Clerk.js te permite mostrar una página de categoría completa desde el frontend utilizando fragmentos de HTML.

• Incluye el script Clerk.js en tu encabezado para que puedas usar códigos embebidos en tu sitio web.
• Clerk.js escanea el sitio web en busca de elementos con la clase clerk y lee sus parámetros data-.
• Usa el lenguaje de plantillas Liquid en un Code Design para controlar el HTML y el estilo de la cuadrícula de productos.
• Clerk.js puede manejar la paginación sin código adicional, cargando más resultados cuando el visitante hace clic en un botón, utilizando esta función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• El HTML de facets se genera configurando el código embebido con los facets, sus traducciones y un bloque HTML de destino donde insertarlos. Lee más sobre los facets de Clerk.js.

Antes de agregar el código a tu webshop, crea el diseño estándar de Category Page y el Elemento en my.clerk.io.

Crear un diseño #

Para una página de categoría completa estándar, crea el diseño estándar de Category Page:

1. Ve a Recommendations > Designs y haz clic en New Design.
2. Elige Grid Design, luego selecciona el diseño estándar Category Page.
3. Guarda el diseño.

Para un diseño personalizado, elige un Code Design en blanco en Grid Design y sigue las instrucciones de Code Design más abajo.

Crear un Elemento #

1. Ve a Recommendations > Elements y crea un nuevo Elemento.
2. Nombra el Elemento Category Page Grid.
3. Selecciona Bestsellers In Category como la lógica de productos.
4. Selecciona el diseño que creaste en Crear un diseño.
5. Si el diseño seleccionado soporta facets, habilita Facets, define los Limits igual que para Omnisearch y selecciona los facets que quieras mostrar.
6. Establece el límite de productos en al menos 40.
7. Guarda el Elemento.

Añadirlo a tu sitio web #

Hay dos maneras de agregar el Elemento de Category Page a tu sitio web. Injection es la opción más sencilla. Para un mayor control sobre dónde aparecen los filtros y la cuadrícula de productos, usa el código embebido y sigue la implementación personalizada a continuación.

Injection #

Abre la pestaña Insert into website del Elemento y selecciona Using injection.

Configura un selector CSS único para la cuadrícula de productos de la página de categoría y elige dónde se debe insertar el Elemento. Dado que este Elemento utiliza una lógica de categoría, también configura el Category ID CSS selector para que Clerk.js pueda leer el ID de la categoría actual y mostrar los productos correctos para esa categoría.

Cuando el diseño seleccionado soporta facets, el Elemento inyectado los incluye automáticamente.

Lee más sobre usar injection.

Implementación personalizada #

La implementación personalizada necesita un elemento HTML para los filtros y un código embebido de Clerk.js para los productos. Los filtros se insertan en el primer elemento, mientras que los productos se muestran dentro del código embebido.

1. Abre la pestaña Insert into website del Elemento y copia el código embebido.
2. En la plantilla de la página de categoría, añade un <div> vacío donde se mostrarán los filtros. Asígnale el ID clerk-category-filters.
3. Añade el código embebido copiado donde debe aparecer la cuadrícula de productos. Da a su elemento externo el ID clerk-category-products y conserva la clase clerk.
4. Reemplaza INSERT_CATEGORY_ID con el ID de la categoría que se está viendo actualmente. Tu webshop debe mostrar el ID correcto para cada página de categoría.
5. Establece data-template con el valor que coincida con el ID del Elemento que creaste. Si tienes dudas, abre el Elemento y ve a Insert into website > Using embedded code para verificar o copiar el valor correcto.
6. Asegúrate de que data-facets-target apunte al elemento de filtros: #clerk-category-filters.
7. En data-facets-attributes lista los atributos de producto por los que los visitantes deberían poder filtrar. El ejemplo incluye precio, categorías y marca; reemplázalos por atributos que existan en tu catálogo.
8. Usa data-facets-titles para proporcionar las etiquetas que los visitantes verán para cada atributo.
9. Establece data-facets-in-url="true" si los filtros seleccionados deben agregarse a la URL, para que los visitantes puedan compartir o regresar a una página de categoría filtrada.

Si Clerk.js aún no está instalado en tu webshop, añade el script Clerk.js a tu página antes de usar el código embebido. El valor de data-category, el selector data-facets-target y los dos IDs de página de categoría deben coincidir con los valores en tu plantilla.

Code Design #

Si creaste un Code Design en blanco bajo Grid Design, pega el siguiente HTML en su panel de HTML. Ofrece una cuadrícula de productos, un menú desplegable de ordenamiento y un botón para cargar más. El menú actualiza los parámetros orderby y order del Elemento sin dejar la página de categoría. El valor de order debe ser asc o 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>

El diseño solo controla la cuadrícula de productos. Añade el contenedor de filtros y el código embebido del Elemento a la plantilla de la categoría como se muestra a continuación. Lee más sobre mostrar y actualizar Elementos de Clerk.js.

Código embebido #

A continuación se muestra un ejemplo independiente para la plantilla de la página de categoría. El valor de data-template debe coincidir con el ID del Elemento que creaste, independientemente del nombre del Elemento. El Elemento y diseño seleccionados determinan el aspecto de la cuadrícula de productos, mientras los atributos data-facets-* controlan los filtros que se muestran.

<!-- Aquí se insertan los facets. -->
<div id="clerk-category-filters"></div>

<!-- Los productos se muestran aquí usando el Elemento y diseño seleccionados. -->
<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>

Reemplaza INSERT_ELEMENT_TEMPLATE con el valor de Insert into website > Using embedded code en la página del Elemento.