Recommendations

Sliders

Rendi facile per i clienti vedere più prodotti con meno clic

Fondamenti #

Clerk.js viene fornito con una funzione integrata per mostrare prodotti con slider. Questa funzionalità mostra una fila di prodotti con un insieme di frecce, che consente ai clienti di navigare tra molti prodotti con pochi clic.

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

La funzionalità dello slider è codificata per mostrare un’intera nuova fila di prodotti per ogni clic, per mostrare quanti più nuovi prodotti possibile con il minor numero di clic possibile.

Editor di Design #

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

Il componente Slider viene fornito con una serie di opzioni per consentirti di personalizzarne l’aspetto:

Quantità di articoli da mostrare in base alla dimensione dello schermo
Diversi stili di pulsanti
Posizione delle frecce

Design del Codice #

Per i design del codice, aggiungere la classe clerk-slider nel contenitore mostrerà il design 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 }}">Acquista ora</a>
      </li>
    {% endfor %}
  </ul>

Stile Personalizzato #

Se desideri utilizzare le tue frecce per lo slider, o vuoi cambiare la loro posizione, puoi aggiungere CSS alle classi sottostanti.

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

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.