Sliders

Nozioni di base #

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

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

La funzionalità dello slider è programmata per mostrare una nuova intera fila di prodotti ad ogni clic, così da visualizzare il maggior numero possibile di nuovi prodotti con il minor numero di clic.

Editor di Design #

Quando si creano design con il Design Editor, i template includono il componente slider pre-selezionato.

Il componente Slider dispone di diverse opzioni che permettono di personalizzarne l’aspetto:

• Quantità di elementi da mostrare in base alla dimensione dello schermo
• Diversi stili per i pulsanti
• Posizione delle frecce

Design con codice #

Per i design con codice, 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 al menu a tendina delle varianti: permette agli acquirenti di scegliere attributi varianti (es. taglia, colore) prima di aggiungere al carrello.
• Selettore di quantità.
• Pulsante nativo Aggiungi al carrello che notifica Clerk.js, garantendo che analytics e merchandising rimangano 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 cambiare il codice principale.

Frecce slider personalizzate #

Se desideri usare le tue frecce slider, o modificarne la posizione, puoi aggiungere CSS alle classi qui sotto.

Il nuovo stile può essere aggiunto come parte del Design in my.clerk.io. oppure semplicemente 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>