Recommendations

Sliders

Gør det nemt for kunderne at se flere produkter med færre klik

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 af pile, der lader kunderne navigere mange produkter med blot et par klik.

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

Slider-funktionen er kodet til at vise en helt ny række af 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, kommer skabelon-designene med slider-komponenten forudvalgt.

Slider-komponenten kommer med en række muligheder for at lade dig tilpasse dens udseende:

Antal varer, der skal vises efter skærmstørrelse
Flere knapstile
Position af pilene

Kodedesigns #

For kodedesigns, 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 }}">Køb nu</a>
      </li>
    {% endfor %}
  </ul>

Tilpasset styling #

Hvis du vil bruge dine egne slider-pile, eller ønsker at æ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 simpelthen 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>

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.