Sliders

Grundlæggende #

Clerk.js leveres med en indbygget funktion til at vise produkter med sliders. Denne funktion viser en række produkter med et sæt pile, der lader kunder navigere mellem mange produkter med blot et par klik.

Det fungerer grundlæggende ved at oprette en lang, vandret liste med produkter, og derefter vise et fast “vindue” af produkter ad gangen, som styres med knapperne.

Slider-funktionaliteten er kodet til at vise en helt ny række produkter for hvert klik, for at vise så mange nye produkter som muligt med så få klik som muligt.

Design Editor #

Når du opretter designs med Design Editor, følger skabelondesignene med slider-komponenten forvalgt.

Slider-komponenten leveres med en række muligheder, så du kan tilpasse udseendet:

• Antal elementer, der vises efter skærmstørrelse
• Flere knapstile
• Pilens placering

Code Designs #

For code designs, vil tilføjelsen af klassen clerk-slider i containeren vise designet som en 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>

Standarddesigns #

Standarddesignet for Sliders inkluderer:

• Support for variant-dropdown: Lader kunder vælge variantattributter (f.eks. størrelse, farve) før tilføjelse til kurven.
• Mængdevælger.
• Naturlig Add-to-Cart-knap, der notificerer Clerk.js, hvilket sikrer at analyse og merchandising forbliver synkroniseret.
• Ryd, velstruktureret markup med klare kommentarer.
• Centraliserede variabler for styling og opførsel, hvilket gør det nemt at justere farver, afstande, labels og almindelige valgmuligheder uden at ændre kernekode.

Tilpassede slider-pile #

Hvis du ønsker at bruge dine egne slider-pile, eller ændre deres placering, kan du tilføje CSS til nedenstående klasser.

Den nye styling kan tilføjes som en del af Design i my.clerk.io. eller blot i dit eksisterende stylesheet.

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