Recommendations

Sliders

Ermöglichen Sie es Kunden, mehr Produkte mit weniger Klicks zu sehen

Grundlagen #

Clerk.js verfügt über eine eingebaute Funktion zum Anzeigen von Produkten mit Slidern. Dieses Feature zeigt eine Reihe von Produkten mit einer Reihe 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 so viele neue Produkte wie möglich mit so wenigen Klicks wie möglich zu präsentieren.

Design Editor #

Beim Erstellen von Designs mit dem Design Editor sind die Vorlagendesigns bereits mit dem Slider-Komponenten vorausgewählt.

Die Slider-Komponente bietet eine Reihe von Optionen, mit denen du ihr Erscheinungsbild anpassen kannst:

Anzahl der angezeigten Artikel je nach Bildschirmgröße
Verschiedene Button-Stile
Position der Pfeile

Code Designs #

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

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

Eigene Slider-Pfeile #

Wenn du eigene Slider-Pfeile nutzen oder deren Position ändern möchtest, kannst du CSS zu den folgenden Klassen hinzufügen.

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

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.