Sliders

Grundlagen #

Clerk.js verfügt über eine integrierte Funktion, um Produkte mit Slidern anzuzeigen. Diese Funktion zeigt eine Reihe von Produkten mit einem Satz von Pfeilen, mit denen Kunden viele Produkte mit nur wenigen Klicks durchsuchen können.

Im Grunde funktioniert es, indem eine lange, horizontale Liste von Produkten erstellt wird und dann jeweils ein festes „Fenster“ von Produkten angezeigt wird, das mit den Buttons gesteuert wird.

Die Slider-Funktionalität ist so programmiert, dass bei jedem Klick eine komplett neue Reihe von Produkten angezeigt wird, um möglichst viele neue Produkte mit möglichst wenigen Klicks anzeigen zu können.

Design Editor #

Beim Erstellen von Designs mit dem Design Editor sind die Vorlagen mit der Slider-Komponente bereits vorausgewählt.

Die Slider-Komponente bietet verschiedene Optionen, mit denen du das Aussehen anpassen kannst:

• Anzahl der anzuzeigenden Elemente je Bildschirmgröße
• Verschiedene Button-Stile
• Position der Pfeile

Code Designs #

Für Code Designs wird das Design als Slider angezeigt, indem du die Klasse clerk-slider im Container hinzufügst:

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

Das Standarddesign für Slider umfasst:

• Variants dropdown support: Ermöglicht Käufern, Variantenattribute (z. B. Größe, Farbe) vor dem Hinzufügen zum Warenkorb auszuwählen.
• Mengen-Auswahl.
• Native Add-to-Cart-Button, der Clerk.js benachrichtigt, sodass Analysen und Merchandising synchron bleiben.
• Sauberes, gut strukturiertes Markup mit klaren Kommentaren.
• Zentralisierte Variablen für Styling und Verhalten, wodurch es einfach ist, Farben, Abstände, Labels und gemeinsame Optionen anzupassen, ohne den Basiscode zu verändern.

Eigene Slider-Pfeile #

Wenn du eigene Slider-Pfeile verwenden oder deren Platzierung ändern möchtest, kannst du CSS zu den untenstehenden Klassen hinzufügen.

Das neue Styling kann als Teil des Designs in my.clerk.io. oder einfach in deinem bestehenden Stylesheet hinzugefügt werden.

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