Optionen
Allgemein #
Website-Inhalte erleichtern die Arbeit mit Empfehlungen und Suchergebnissen.
Die Designs werden bei Clerk.io gespeichert, und Sie müssen lediglich einen kleinen Embed-Code in die Seite einfügen, auf der Sie Produkte anzeigen möchten. Dies kann über den Abschnitt Embedded Code oder den Abschnitt Injection erfolgen.
Eine beliebige Anzahl von Inhaltsblöcken kann auf einem einzigen Design basieren, oder Sie können separate Designs für jeden Inhalt erstellen.
Sie können Ihre vorhandenen Inhalte überprüfen und neue erstellen, indem Sie auf Suche/Empfehlungen und dann auf Inhalt im Seitenmenü klicken:

Jeder einzigartige Inhaltsblock wird durch seine eigenen Einstellungen gesteuert. Sie können einen einzigartigen Namen für alle Inhaltsblöcke wählen, der auch als Tracking-Label fungiert.
Die Einstellungen-Seite jedes Inhaltsblocks ist in vier Abschnitte unterteilt, auf die Sie zugreifen können, indem Sie Inhalt bearbeiten klicken.
Benennen Sie Ihren Inhalt #
Steuert den Namen und die Tracking-Labels für den Inhaltsblock.

Produktlogik wählen #
Definiert, welche Art von Produkten im Inhalt angezeigt werden soll.
Sie können auch steuern, ob Filter angewendet werden sollen, wenn Sie beispielsweise nur Produkte über oder unter einem bestimmten Preis oder von einer bestimmten Marke anzeigen möchten.

Design auswählen #
Damit können Sie auswählen, wie viele Produkte angezeigt werden sollen und auf welchem Design der Inhalt basieren soll. Wenn Sie eine Titel/Überschrift Variable in Ihrem Design haben, können Sie hier auch die Titel hinzufügen, die für den Inhalt angezeigt werden sollen.

In die Website einfügen #
Inhaltsblöcke sind an einen Embedcode angehängt, der es ihnen ermöglicht, auf allen Seiten gerendert zu werden, auf denen Sie Clerk.js eingefügt haben. Sie können entweder einfach den Embedcode dort einfügen, wo dieser Inhalt angezeigt werden soll, oder unsere Injektionsfunktion verwenden.
Bitte beachten Sie, dass Embed-Codes Variablen wie Produkt-IDs, Kategorie-IDs oder E-Mail benötigen könnten, abhängig von der Logik.
Verwendung von eingebettetem Code #
Eingebetteter Code ist ein kleiner Code-Schnipsel, den Sie in Ihre Website einfügen können. Er kann gefunden werden, indem Sie Eingebetteten Code verwenden auswählen:

Verwendung von Injektion #
Injektion ist eine Funktion, die es Ihnen ermöglicht, Inhaltsblöcke in Ihre Website einzufügen, ohne den Embed-Code manuell hinzufügen zu müssen. Dies geschieht durch Auswahl von Injektion verwenden:

Nachfolgend finden Sie eine Beschreibung der verschiedenen Injektionsoptionen:
Option | Beschreibung |
---|---|
Einzigartiger CSS-Selektor zur Identifizierung | Fügen Sie einen einzigartigen CSS-Selektor ein, der den Inhaltsblock auf der Seite identifiziert. Wählen Sie auch aus, wo er injiziert werden soll; Nach, Vor, Innen oder Ersetzen. |
Duplikate ausschließen | Wählen Sie aus, ob Sie Produkte ausschließen möchten, die bereits in anderen Clerk-Inhaltsblöcken auf derselben Seite angezeigt werden. |
Kategorie-ID, Produkt-ID, E-Mail-CSS-Selektor | Wenn die Logik so eingestellt ist, dass Produkte aus einer bestimmten Kategorie, einem bestimmten Produkt oder einer bestimmten E-Mail-Adresse angezeigt werden, können Sie hier den CSS-Selektor der Kategorie, des Produkts oder der E-Mail-ID einfügen. |
Kategorie-, Produkt-, E-Mail-Attribut | Wenn die Logik so eingestellt ist, dass Produkte aus einer bestimmten Kategorie, einem bestimmten Produkt oder für eine bestimmte E-Mail-Adresse angezeigt werden, können Sie hier das Attribut einfügen, das den Kategorie-, Produkt- oder E-Mail-Wert enthält. Z.B. wenn das Attribut value-category="category-123" ist, würden Sie "value-category" in dieses Feld einfügen. |
Kategorie-ID, Produkt-ID, E-Mail-ID aus Attribut extrahieren und den String entfernen | Wenn das Attribut, das den Kategorie-, Produkt- oder E-Mail-Wert enthält, Teil eines längeren Strings ist, können Sie hier den Teil einfügen, der entfernt werden soll. Z.B. wenn das Attribut value="category-123" ist und Sie die ID extrahieren möchten, würden Sie "category-" in dieses Feld einfügen. |
Überschriften #
Das Verwalten von Überschriften ist mit der Standardkonfiguration in Inhalt einfach.
Auf der Inhalt bearbeiten-Seite klicken Sie auf Design auswählen, um das Eingabefeld für die Überschrift zu sehen:

Ändern Sie den Text im Überschrift-Feld und klicken Sie auf Speichern.
Die Änderung wird sofort angezeigt, nachdem Sie Ihren Webshop aktualisiert haben.
Dynamische Textfeld-Tags #
Unsere Standarddesigns verwenden Tags, um verschiedene Überschriften für jeden Inhalt festzulegen.
Diese Tags können in jedem Textfeld in Design Editor-Designs und überall in Code-Designs verwendet werden.
Tags haben die Syntax {{ variable }}
und können jeden Namen haben, den Sie wählen.
Beginnen Sie, indem Sie zu Designs gehen und auf Design bearbeiten für das, das Sie ändern möchten, klicken:

Auf der Design bearbeiten-Seite fügen Sie ein Überschrift-Tag mit {{ headline }}
im HTML-Bereich ein:

Klicken Sie auf Speichern & Schließen, und Sie können eine Überschrift aus Ihrem Inhalt-Tab schreiben.
Sie können so viele Textfelder hinzufügen, wie Sie möchten, Überschrift ist nur ein Beispiel.
Alles, was Sie im HTML-Bereich mit der {{ variable }}
-Syntax schreiben, wird als Eingabefeld aus Inhalt verwendbar sein.
Diese Tags können auch in jedem Textfeld in einem Design Editor-Design verwendet werden.
Entfernen von duplizierten Produkten #
Die Verwendung dieser Funktion zwingt das Laden mehrerer Clerk.io Empfehlungen nacheinander, anstatt gleichzeitig, wodurch zusätzliches Gewicht auf die Ladezeit der Seite gelegt wird.
Stellen Sie sicher, dass der Kompromiss in der Ladezeit es wert ist, die Duplikate zu vermeiden.
Clerk.js bietet zwei einfache Möglichkeiten, um Duplikate über mehrere Empfehlungs-Slider auf derselben Seite zu verhindern.
Eine Möglichkeit besteht darin, die Option Duplikate ausschließen im Abschnitt Inhalt injizieren zu verwenden, indem Sie den Clerk-Inhalt auswählen, von dem Sie Duplikate ausschließen möchten - entweder indem Sie ihn aus der Liste auswählen oder einen CSS-Selektor angeben:

Die andere Möglichkeit besteht darin, das data-exclude-from-Attribut auf dem Clerk-Block hinzuzufügen, von dem Sie die Duplikate entfernen möchten. Der Wert des Attributs sollte ein CSS-Selektor für den anderen Block sein, um Duplikate zu verhindern.
Im folgenden Beispiel schließt der .clerk2-Slider jedes Produkt aus, das sich im .clerk1-Slider befindet, und der .clerk3-Slider schließt alle Produkte aus, die sich entweder im .clerk1- oder .clerk2-Slider befinden.
<span class="clerk clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk2"
data-exclude-from=".clerk1"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk3"
data-exclude-from=".clerk1,.clerk2"
data-template="@clerk-banner-3">
</span>
Sie können die Ausschlussregel auch auf die ersten n Produkte beschränken (eine kluge Entscheidung, wenn Sie einen Slider mit 20 Produkten haben, aber nur vier gleichzeitig sichtbar sind).
Dies geschieht über die :limit(n)-Option (wobei n die erste Anzahl von Produkten ist, die Sie ausschließen möchten).
Hier ist dasselbe Beispiel wie oben, aber wo die Ausschluss-ID nur die ersten fünf Produkte betrifft.
<span class="clerk clerk1"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk2"
id="clerk2"
data-exclude-from=".clerk1:limit(5)"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk3"
id="clerk3"
data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
data-template="@clerk-banner-3">
</span>
Ausschließen bestimmter Produkte #
Um zu vermeiden, dass bestimmte Produkte angezeigt werden, fügen Sie einfach das Attribut data-exclude zu einem vorhandenen Embedcode hinzu.
Dies sollte eine Liste der Produkt-IDs sein, die Sie nicht im Block angezeigt haben möchten.
Zum Beispiel:
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[45654]">
</span>
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.