Sliders

Nozioni di base #

Clerk.js include una funzione integrata per mostrare i prodotti con slider. Questa funzione mostra una fila di prodotti con una serie di frecce che consentono ai clienti di navigare tra molti prodotti con pochi clic.

Funziona essenzialmente creando un lungo elenco orizzontale di prodotti e mostrando poi una “finestra” fissa di prodotti alla volta, controllata dai pulsanti.

La funzionalità slider è programmata per mostrare un’intera nuova fila di prodotti a ogni clic, in modo da mostrare il maggior numero possibile di nuovi prodotti con il minor numero di clic possibile.

Design Editor #

Quando crei design con il Design Editor, i template di design includono il componente slider già pre-selezionato.

Il componente Slider offre diverse opzioni per personalizzarne l’aspetto:

• Numero di elementi da mostrare in base alla dimensione dello schermo
• Diversi stili di pulsanti
• Posizione delle frecce

Design con codice #

Per i code designs, aggiungendo la classe clerk-slider al contenitore, il design verrà visualizzato come uno slider:

<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>

Design standard #

Il design standard per gli Slider include:

• Supporto per varianti tramite menu a discesa: permette agli acquirenti di scegliere gli attributi della variante (es. taglia, colore) prima di aggiungere al carrello.
• Selettore della quantità.
• Pulsante “Aggiungi al carrello” nativo che notifica Clerk.js, assicurando che analytics e merchandising restino sincronizzati.
• Markup pulito e ben strutturato con commenti chiari.
• Variabili centralizzate per stile e comportamento, che rendono semplice modificare colori, spaziature, etichette e opzioni comuni senza alterare il codice principale.

Frecce slider personalizzate #

Se desideri usare frecce personali per lo slider, o modificare la loro posizione, puoi aggiungere CSS alle classi qui sotto.

Il nuovo stile può essere aggiunto come parte del Design in my.clerk.io. oppure direttamente nel tuo foglio di stile esistente.

<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>