Uso de Clerk.io para mostrar una página de categoría completa

Vea cómo puede utilizar la lógica de los más vendidos en una categoría para representar toda una categoría con Clerk.io.

IMPORTANTE

**Es crucial tener en cuenta que la sustitución de sus productos de categoría en su tienda web requiere conocimientos técnicos, y le sugerimos que busque ayuda de su propio desarrollador.

Por favor, tenga en cuenta que nuestros desarrolladores internos en Clerk.io no pueden realizar esta tarea por usted.

La lógica de Clerk.io de Los más vendidos en categorías permite mostrar tanto Facetas ( filtros ) como clasificar productos .

Esto significa que puede utilizarse para mostrar una página de categoría completa.

Reemplazar los productos de su categoría con los resultados de Clerk:

Para hacer esto, debe hacer lo siguiente:

  • Crear un diseño de cuadrícula en su my.clerk.io backend para mostrar los productos.

  • Ocultar / desactivar sus productos existentes en categorías

  • Inserta un embedcode de Clerk.io para mostrar productos en las páginas de categorías, insertando dinámicamente el ID de la categoría, igual que harías con un banner de recomendaciones.

Un ejemplo simple de un embedcode generando una página de categoría con Facets, y ordenada por los precios más bajos primero se puede ver aquí:

{% raw %}<div id="clerk-category-filters"></div>
<ul id="clerk-category-results"></ul>

<span
    id="clerk-category"
    class="clerk"
    data-template="@category-page-results"
    data-target="#clerk-category-results"
    data-category="{{ collection.id }}"

    data-facets-target="#clerk-category-filters"
    data-facets-attributes='["price","brand"]'
    data-facets-titles='{"price":"Price","brand":"Manufacturer"}'
    data-orderby="price"
    data-order="asc">
</span>
{% endraw %}

Si no utiliza Shopify, asegúrese de reemplazar {{ collection.id }} con un shortcode que inserte el ID de su categoría.

Configuración de un Fallback

Dado que después de esto, Clerk.io mostrará efectivamente la mayoría de los productos en la tienda online, es importante tener una opción Fallback en caso de que Clerk.io no responda.

Aunque esto ocurre muy raramente, como atestigua nuestra Página de estado , nunca se puede estar demasiado seguro.

Una manera fácil de hacer esto es en el frontend es:

  • Usando display:none; en sus categorías-productos existentes.

  • Usando un script que use un Evento para confirmar que Clerk devolvió productos.

  • Usando el método .show() de jQuery para mostrar los productos existentes si Clerk no responde.

Este script comprueba si Clerk ha respondido en 750ms y si no, muestra los productos existentes:

<script type="text/javascript">
      var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             document.querySelector(category_page_selector).style.display = '';
          }
        }
      ,750)
</script>

Simplemente sustituya su .category-container por la clase o ID de su HTML product-container.

Ejemplo completo de Shopify

Aquí hay un ejemplo de cómo lograr esto en Shopify.

1. En my.clerk.io, vaya a Búsqueda -> Diseños -> Nuevo Diseño(Necesita crear un diseño de cuadrícula similar a una página de Búsqueda para sus categorías)

2. De las opciones, elija Página de Búsqueda, dele al Diseño un buen nombre, como “Resultados de la Página de Categorías” y haga clic en Crear Diseño:

3. En la siguiente pantalla puede diseñar la página de resultados a su gusto utilizando el Editor de Diseño. Cuando haya terminado, haga clic en Guardar diseño:.

4. Ir a Recomendaciones -> Contenido -> Nuevo Contenido:

5. Nombre su contenido “Resultados de la página de categoría “ y haga clic en Crear contenido:

6. En Elegir lógica de producto, seleccione Los más vendidos de la categoría:.

7. En Seleccionar Diseño, elija un buen número de productos a mostrar por página y seleccione el Diseño que ha creado.

8. Haga clic en Actualizar contenido.

9. Ahora ve al backend de tu tienda, y localiza el archivo que genera tus páginas de categorías. En Shopify, esto es a menudo:

Tienda Online -> Temas -> Acciones -> Editar Código -> Secciones -> collection-template.liquid:

10. Localice el código que contiene todos los productos en su página de categoría. Puede utilizar su navegador Inspect tool para encontrar fácilmente esto en cualquiera de sus páginas de categoría:

11. Hay varias maneras de ocultar los productos existentes, pero una manera fácil es simplemente añadir style=“display:none;” a la clase contenedora:

12. Ahora tienes que incrustar los resultados de Clerk.io. Para hacerlo más fácil, hemos preparado el siguiente embedcode que ya tiene facetas pre-estilizadas. Mostrará facetas basadas en precio y proveedor pero esto puede ser extendido:

{% raw %}<div class="page-width" id="Collection">

    <div id="clerk-show-facets">Show/Hide filters</div>
    <div id="clerk-facets-container">
      <div id="clerk-category-filters"></div>
    </div>

    <span
        id="clerk-category"
        class="clerk"
        data-template="@category-page-results"
        data-target="#clerk-category-results"
        data-category="{{ collection.id }}"
        data-facets-target="#clerk-category-filters"
        data-facets-attributes='["price","vendor"]'
        data-facets-titles='{"price":"Price","vendor":"Manufacturer"}'>
    </span>

    <ul id="clerk-category-results"></ul>

    <script>
      document.querySelector("#clerk-show-facets").addEventListener('click', function(event) {
        el = document.querySelector("#clerk-facets-container");
        if(el.style.display == '' || el.style.display == 'block'){
          el.style.display = 'none';
        } else {
          el.style.display = '';
        }
      });
    </script>
    <style>
      #clerk-show-facets {
          width: 50%;
          height: 40px;
          margin: 0px auto 20px auto;
          background-color: #2cae39;
          color: white;
          text-align: center;
          border-radius: 3px;
          line-height: 40px;
        }

      #clerk-category-results {
          display: inline-block;
          width: 100%;
      }

      #load-more-results {
          margin: 10px 10px 5px 10px;
          padding: 10px 20px;
          border-radius: 3px;
          background-color: #E8B22F !important;
          color: white;
          line-height: 1em;
          cursor: pointer;
      }

      #clerk-category-load-more-button {
          display: none;
      }

      .clerk-button-container {
          text-align: center;
      }

      .clerk-product {
          box-sizing: border-box;

          float: left;

          width: calc(25% - 10px);

          margin: 5px;
          padding: 5px;

          text-align: center;
          line-height: 1.2em;

          border: 1px solid #eee;
          border-radius: 3px;
      }

      .clerk-product img {
          max-width: 100%;
          max-height: 180px;

          margin: 5px 10px;
      }

      .clerk-product-name {
          overflow: hidden;
          color: black;
          height: 2.3em;

          margin: 5px 10px;
      }

      .clerk-price-wrapper {
          height: 20px !important;
          margin-bottom: 10px;
      }

      .clerk-new-price{
          color: black;
      }

      .clerk-product-price {
          margin: 5px;
          color: black;
          font-weight: bold;
      }

      .clerk-old-price {
          font-size: 0.8em;
          color: black;
      }

      .clerk-cta-button, .button {
          margin: 10px 10px 5px 10px;

          padding: 10px 20px;

          border-radius: 3px;

          background-color: #E8B22F !important;
          color: white !important;

          line-height: 1em;
      }

      .clerk-slider {
          list-style: none;

          width: 100%;

          margin: 10px 0;
          padding: 0;
      }

      .clerk-product > a, .clerk-product > a:hover, .clerk-product > a:visited {
          display: block;

          color: inherit;
          text-decoration: inherit;
      }

      @media only screen and (max-width : 800px) {
            .clerk-product {
                width: calc(50% - 10px);
            }
            #clerk-category-filters {
                width: 100%;
                float: left;
            }
            #clerk-facets-container {
                display: none;
            }
      }

      @media only screen and (min-width : 800px) {
          #clerk-category-results {
              width: 78%;
              float: right;
          }
          #clerk-category-filters {
              width: 20%;
              float: left;
          }
          #clerk-show-facets {
              display: none;
          }
      }
    </style>
 </div>
  <script type="text/javascript">
        var clerk_response = false;
      var category_page_selector = ".category-container"

      Clerk('on','response', function(data,content){
        if (content.result.length > 0) {
            clerk_response = true;
        }
      });

      setTimeout(
        function(){
          if (clerk_response == false) {
             document.querySelector(category_page_selector).style.display = '';
          }
        }
      ,750)
  </script>
{% endraw %}

13. Inserta arriba el embedcode del contenedor que acabas de ocultar:

14. Pulsa Guardar:

15. Los resultados de su categoría se muestran ahora por Clerk.io:

Después de este paso usted puede, por supuesto, el estilo de las páginas de la manera que desee con Diseños.