Category Page

Slider #

Las páginas de categorías se utilizan cuando un cliente busca 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 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 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, existe cierta prueba de su valor.

Al colocar estos artículos en la parte superior de la página de la 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 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 una ordenación inteligente de los resultados, y usando Merchandising para un alto grado de control sobre qué productos se priorizan.

Este artículo describe el uso de nuestra API y de 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 actual de la tienda web para obtener productos con la API de Clerk.

Si utilizas una configuración de API del lado del servidor, normalmente puedes mantener el estilo existente simplemente obteniendo los datos de productos desde Clerk, mientras renders los visuales a través del código de la tienda web.

Estos son los dos endpoints disponibles:

• recommendations/category/popular
  (Clasificados por 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 con frecuencia generalmente obtienen mejores resultados con productos en tendencia.

Las tiendas con catálogos en los que 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 API #

A continuación se desglosa 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.
  • Ejemplo: si el producto más barato de 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 puede 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.
  • Ejemplo: filter=’(price > 10 and price < 100) and brand=”Swarovski"'
• Se recomienda crear una interfaz gráfica basada en las facets de Clerk y listarlas como opciones seleccionables, ya que así se lleva el control automático de qué opciones están disponibles en cada categoría.
• También se puede hacer usando una interfaz gráfica de filtros existente, siempre que las opciones 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 utilizan juntos para la paginación
• limit controla la cantidad de productos que devuelve 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 número total de productos en la categoría, independientemente del 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 API #

A continuación se muestra un ejemplo completo de una solicitud 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 del tipo “Star Wars” usando filtros
• Ordenados por precio de menor a mayor usando orderby price y 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 el estilo.

Conservar el contenido de la categoría #

Al usar Clerk.js para reemplazar una página de categoría, generalmente recomendamos mantener los productos existentes de la plataforma de la tienda debajo como respaldo. Deja que la plataforma los renderice en el HTML inicial y luego deja que Clerk.js reemplace la cuadrícula de productos después de que sus productos se hayan renderizado correctamente.

También mantiene el título de la categoría (H1), otros encabezados y la descripción de la categoría que renderiza la plataforma de la tienda. Mantén este contenido fuera de la cuadrícula de productos que reemplazas, para que permanezca disponible incluso sin JavaScript.

Google ejecuta JavaScript al renderizar las páginas, pero la carga y ejecución exitosa no están garantizadas, y no todos los rastreadores de motores de búsqueda ejecutan JavaScript. Consulta la guía de SEO para JavaScript de Google.

Mantener los productos y el contenido de la categoría de la plataforma en el HTML inicial permite a los motores de búsqueda leerlos incluso si JavaScript no se carga. Los visitantes también tendrán disponible una página de categoría utilizable si Clerk.js o su solicitud de productos falla.

Solo oculta o reemplaza los productos originales una vez que la cuadrícula de Clerk.js se haya renderizado correctamente. Evita eliminarlos de la plantilla de la plataforma o ocultarlos con CSS que también se aplique cuando JavaScript no esté disponible.

Verifica tu implementación con JavaScript deshabilitado y con las solicitudes de Clerk.io bloqueadas. En ambos casos, los encabezados de la plataforma, el texto de la categoría y los enlaces de productos deben permanecer visibles. Con Clerk.js funcionando, verifica que solo se muestre una cuadrícula de productos y un H1 de categoría.

Descripción general #

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

• Incluye el script Clerk.js en tu cabecera para poder utilizar los códigos de inserción en tu sitio web.
• Clerk.js escanea el sitio web en busca de elementos con la clase clerk y lee sus parámetros data-.
• Utiliza 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 paginación sin programación adicional, cargando más resultados cuando un visitante hace clic en un botón, usando esta función: Clerk('content', '#SNIPPET_ID', 'more', LIMIT);
• El HTML de facets se genera configurando el código de inserción con las facets, sus traducciones y un bloque HTML objetivo donde insertarlas. Lee más sobre las facets en Clerk.js.

Antes de añadir el código a tu tienda web, crea el diseño estándar de página de categoría y el Element en my.clerk.io.

Crear un diseño #

Para una página de categoría estándar completa, crea el diseño estándar 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 a continuación.

Crear un Element #

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

Añadirlo a tu sitio web #

Hay dos formas de agregar el Element de página de categoría a tu sitio web. Injection es la opción más sencilla. Para tener más control sobre dónde aparecen los filtros y la cuadrícula de productos, utiliza 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 la cuadrícula de productos de la página de categoría y elige dónde debe insertarse el Element. Debido a que este Element utiliza una lógica por 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.

Apunta a la cuadrícula de productos en lugar de un contenedor que también incluya el encabezado y la descripción de la categoría. Sigue Preservar contenido de la categoría para mantener disponibles los productos de la plataforma hasta que el reemplazo se haya renderizado.

Cuando el diseño seleccionado soporta facets, el Element inyectado las 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 de inserción Clerk.js para los productos. Los filtros se insertan en el primer elemento, mientras que los productos se renderizan dentro del código insertado.

Mantén la salida de productos existente de la plataforma en la plantilla de la categoría tal como se describe en Conservar el contenido de la categoría. El código de inserción solo no gestiona este respaldo; tu implementación debe mantener visible la cuadrícula original hasta que los productos de Clerk.js se hayan renderizado.

1. Abre la pestaña Insert into website del Element y copia el código de inserción.
2. En la plantilla de la página de categoría, añade un <div> vacío donde deben aparecer los filtros. Asígnale el ID clerk-category-filters.
3. Añade el código de inserción copiado donde debe aparecer la cuadrícula de productos. Asigna a su elemento exterior 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á visualizando actualmente. Tu tienda web debe proporcionar el ID correcto para cada página de categoría.
5. Configura data-template con el 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, indica los atributos de productos por los que los visitantes deben poder filtrar. El ejemplo incluye price, categories y brand; reemplázalos por los atributos existentes en tu catálogo.
8. Usa data-facets-titles para proporcionar las etiquetas visibles de cada atributo.
9. Configura data-facets-in-url="true" si quieres que los filtros seleccionados se añadan 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 tienda web, añade el script Clerk.js antes de usar el código insertado. El valor 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 HTML. Proporciona una cuadrícula de productos, un desplegable de ordenación y un botón para cargar más productos. El desplegable 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 la cuadrícula de productos. Agrega el contenedor de filtros y el código de inserción del Element en la plantilla de la página de categoría como se muestra a continuación. Lee más sobre cómo renderizar y actualizar Elements de Clerk.js.

Código de inserción #

A continuación un ejemplo separado para la plantilla de la página de categoría. El valor de data-template debe coincidir con el ID del Element que creaste, sin importar el nombre del Element. El Element seleccionado y el diseño determinan el aspecto de la cuadrícula de productos, mientras que 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 que aparece en Insert into website > Using embedded code en la página del Element.