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 deportivas. 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 buscan los mismos pocos productos dentro de 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 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 recomendaciones, se facilita mucho la navegación para tus clientes.

Es probable que estos productos llamen la atención de nuevos clientes y, por tanto, aumenten las posibilidades de conversión.

Página de categoría completa #

Clerk puede usarse para mostrar todos los resultados en una página de categoría, permitiendo la clasificación inteligente de 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 librería Clerk.js como dos formas diferentes de gestionar 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 vez de una consulta de búsqueda.

Por ello, pueden usarse para mostrar todos los productos en las páginas de categoría reemplazando cualquier lógica existente del webshop para obtener productos por la API de Clerk.

Si usas una configuración de API del lado del servidor, normalmente puedes conservar el diseño existente obteniendo los datos del producto de Clerk, mostrando los visuales 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 frecuentemente)

El mejor endpoint a utilizar depende del tipo de negocio.

Muchas tiendas de moda con inventario que cambia a menudo, suelen beneficiarse más 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 generalmente los más vendidos.

Parámetros del endpoint de la API #

Aquí tienes un resumen de lo que hace cada argumento cuando se realiza una llamada a un endpoint de categoría.

Filtrado de resultados #

• Al enviar facets en la solicitud, Clerk retornará una lista de las posibles opciones de filtro para ese set de resultados.
  • Por ejemplo, si el producto más barato de la categoría cuesta €10 y el más caro €500, el rango de precio inferior podría ser €10-50, y el más alto €450+ o similar.
  • Una categoría puede tener 10 marcas diferentes y otra sólo 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 automáticamente mantiene el seguimiento de qué opciones están disponibles en cada categoría.
• También se puede hacer utilizando una interfaz 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 retornar 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 de 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 precio y 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 librería que facilita llamar a la API de Clerk.io, aplicar seguimiento y gestionar estilos.

Vista general #

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

• Incluye el script de Clerk.js en tu encabezado para poder usar los códigos embed 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 del grid de productos.
• Clerk.js puede gestionar la paginación sin código adicional cargando más resultados cuando el visitante hace clic en un botón, usando la siguiente función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• El HTML de los facets se genera configurando el código embed con los facets, sus traducciones y un bloque HTML objetivo donde insertarlos. Lee más sobre facets en Clerk.js.

Antes de agregar el código a tu tienda online, crea el diseño estándar de Category Page y el Element 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 bajo Grid Design y sigue las instrucciones de Code Design a continuación.

Crear un Element #

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

Agregarlo a tu sitio web #

Hay dos maneras de agregar el Element de Category Page a tu sitio web. Injection es la opción más fácil. Para más control sobre dónde aparecen los filtros y el grid de productos, usa código embebido y sigue la implementación personalizada a continuación.

Injection #

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

Configura un selector CSS único para el grid de productos de la página de categoría y elige dónde debe insertarse el Element. Debido a que este Element utiliza 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 Element inyectado los incluye automáticamente.

Lee más sobre cómo usar injection.

Implementación personalizada #

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

1. Abre la pestaña Insert into website del Element y copia el código embed.
2. En la plantilla de la página de categoría, añade un <div> vacío donde los filtros deben aparecer. Asígnale el ID clerk-category-filters.
3. Añade el código embed copiado donde el grid de productos debe aparecer. Asigna al elemento externo el ID clerk-category-products y mantén la clase clerk.
4. Reemplaza INSERT_CATEGORY_ID por el ID de la categoría que se está viendo. Tu tienda online debe mostrar el ID correcto en cada página de categoría.
5. Establece data-template al valor que coincide con el ID del Element que creaste. Si tienes dudas, abre el Element y ve a Insert into website > Using embedded code para comprobar 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, enumera los atributos del producto por los que los visitantes podrán filtrar. El ejemplo incluye precio, categorías y marca; reemplaza estos con los atributos que existan en tu catálogo.
8. Utiliza data-facets-titles para proporcionar las etiquetas que los visitantes deberían ver para cada atributo.
9. Establece data-facets-in-url="true" si los filtros seleccionados deben añadirse a la URL, para que los visitantes puedan compartir o volver a una página de categoría filtrada.

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

Code Design #

Si creaste un Code Design en blanco bajo Grid Design, pega el siguiente HTML en su panel HTML. Proporciona un grid de productos, un dropdown de ordenación y un botón de cargar más. El dropdown de ordenación actualiza los parámetros orderby y order del Element sin salir de 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 el grid de productos. Añade el contenedor de filtros y el código embed del Element en la plantilla de la página de categoría como se muestra a continuación. Lee más sobre cómo mostrar y actualizar Elements de Clerk.js.

Código embed #

A continuación encontrarás un ejemplo aparte para la plantilla de la página de categoría. El valor de data-template debe coincidir con el ID del Element que creaste, independientemente del nombre del Element. El Element y el diseño seleccionados determinan cómo se verá el grid de productos, mientras los atributos data-facets-* controlan qué filtros se muestran.

<!-- Facets are inserted here. -->
<div id="clerk-category-filters"></div>

<!-- Products are rendered here using the selected Element and design. -->
<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 por el valor de Insert into website > Using embedded code en la página del Element.