Sliders

Conceptos básicos #

Clerk.js incluye una función incorporada para mostrar productos con deslizadores. Esta función muestra una fila de productos con un conjunto de flechas que permite a los clientes navegar por muchos productos con solo unos pocos clics.

Básicamente, funciona creando una lista horizontal larga de productos, y luego muestra una “ventana” fija de productos a la vez, que se controla con los botones.

La funcionalidad del deslizador está programada para mostrar una fila completa de productos en cada clic, para mostrar la mayor cantidad posible de nuevos productos con la menor cantidad de clics.

Editor de diseño #

Al crear diseños con el Editor de diseño, los diseños de plantilla vienen con el componente de deslizador preseleccionado.

El componente Slider viene con varias opciones que te permiten personalizar su apariencia:

• Cantidad de elementos a mostrar según el tamaño de la pantalla
• Varios estilos de botones
• Posición de las flechas

Diseños de código #

Para los diseños de código, agregar la clase clerk-slider en el contenedor mostrará el diseño como un deslizador:

<ul class="product-list clerk-slider">
    {% for product in products %}
      <li 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>
      </li>
    {% endfor %}
  </ul>

Diseños estándar #

El diseño estándar para los Sliders incluye:

• Soporte de menú desplegable de variantes: Permite a los compradores elegir atributos de variante (por ejemplo, talla, color) antes de añadir al carrito.
• Selector de cantidad.
• Botón nativo “Add-to-Cart” que notifica a Clerk.js, asegurando que la analítica y la gestión de productos estén sincronizadas.
• Marcado limpio y bien estructurado con comentarios claros.
• Variables centralizadas para el estilo y comportamiento, lo que hace fácil ajustar colores, espacios, etiquetas y opciones comunes sin cambiar el código principal.

Flechas personalizadas para el deslizador #

Si deseas usar tus propias flechas para el deslizador, o quieres cambiar su ubicación, puedes agregar CSS a las siguientes clases.

El nuevo estilo se puede agregar como parte del Diseño en my.clerk.io. o simplemente en tu hoja de estilos existente.

<style type="text/css">
    @keyframes arrowPop {
        0% {
            width: 20%;
        }
        50% {
            width: 0%;
        }
        100% {
            width: 20%;
        }
    }

    .clerk-slider-nav {
        background: #333;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:0;
        opacity:0.8;
        filter: drop-shadow(0 0 5px #333);
        transition:0.3s ease;
    }

    .clerk-slider-nav:hover {
        opacity:1;
        transition:0.3s ease;
    }
    .clerk-slider-nav:hover:before {
        animation:arrowPop 0.3s ease;
    }
    .clerk-slider-nav-next {
        flex-direction:row-reverse;
    }

    .clerk-slider-nav:after {
        content:"";
        display:block;
        height:40%;
        width:40%;
        transform: rotate(45deg);
        border: solid white;
    }
    .clerk-slider-nav-prev:after {
        border-width: 0px 0px 2px 2px;
    }

    .clerk-slider-nav-next:after {
        border-width: 2px 2px 0px 0px;
    }

    .clerk-slider-nav:before {
        content:"";
        width:20%;
    }
</style>