Sliders

Grundlagen #

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

Im Grunde wird eine lange, horizontale Liste von Produkten erstellt und dann jeweils ein festes „Fenster“ von Produkten angezeigt, 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 mit möglichst wenigen Klicks möglichst viele neue Produkte zu zeigen.

Design Editor #

Beim Erstellen von Designs mit dem Design Editor sind die Vorlagen-Designs standardmäßig mit der Slider-Komponente ausgewählt.

Die Slider-Komponente bietet mehrere Optionen, um das Erscheinungsbild individuell anzupassen:

• Anzahl der anzuzeigenden Artikel nach Bildschirmgröße
• Verschiedene Button-Stile
• Position der Pfeile

Code Designs #

Für Code Designs wird durch Hinzufügen der Klasse clerk-slider im Container das Design als Slider angezeigt:

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

• Unterstützung für Varianten-Dropdown: Ermöglicht es Käufern, Varianten-Attribute (z. B. Größe, Farbe) vor dem Hinzufügen zum Warenkorb auszuwählen.
• Mengenauswahl.
• Native Add-to-Cart-Schaltfläche, die Clerk.js benachrichtigt, wodurch sichergestellt wird, dass Analysen und Merchandising synchron bleiben.
• Sauberes, gut strukturiertes Markup mit klaren Kommentaren.
• Zentrale Variablen für Styling und Verhalten, sodass Farben, Abstände, Bezeichnungen und allgemeine Optionen einfach angepasst werden können, ohne den Kerncode zu ändern.

Eigene Slider-Pfeile #

Wenn Sie eigene Slider-Pfeile verwenden oder deren Platzierung ändern möchten, können Sie CSS zu den untenstehenden Klassen hinzufügen.

Das neue Styling kann als Teil des Designs in my.clerk.io. oder einfach in Ihrem 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>