/
Clerk (JTL-Shop 5)

Clerk (JTL-Shop 5)

Owned by Nick Drieschner
Last updated: Dec 02, 2024 by Pascal Kleindienst
32 min read

Einleitung

Dieses Plugin integriert den Clerk.io Service in Ihren JTL-Shop.

Somit sind personalisierte Produktempfehlungen, eine erweiterte Suche, individualisierte Slider und vieles weitere möglich.

Installation und Update

Systemvoraussetzungen

  • JTL-Shop 5.1+ (und die beinhalteten Bibliotheken)

  • JTL-Wawi 1.5

  • MySQL 5.7

  • Linux mit Apache 2 / Litespeed (andere Konstellationen sind möglich, aber nicht per se unterstützt)

  • PHP Version 8.0

  • Benötigte folgende PHP Erweiterungen:

    • cURL

    • GD

    • ImageMagick

    • JSON-Support

    • mbstring

    • MySQLi

    • Socket-Support

    • SPL

  • eingesetztes Template

    • NOVA

    • easyTemplate

    • andere Templates müssen ggf. mit Servicepartner geprüft werden

Weitere Voraussetzungen

Sie müssen bei Clerk.io registriert sein, um einen API Schlüssel zu erhalten.

Plugin-Installation

Die Installation des Plugins erfolgt im Standardverfahren für JTL-Shop 5, wie es hier beschrieben ist.

Plugin-Update

Für ein Update laden Sie das Plugin wie bei einer Installation in der neuesten Version hoch (und überschreiben ggf. alle vorhandenen Plugin Dateien) oder folgen Sie den Hinweisen des Extension Stores.

Gehen Sie dann in die Plugin Verwaltung und betätigen Sie den Update-Button.

Konfiguration (Shop)

Einstellungen des Plugins

Die Einstellungen des Plugins erreichen Sie über Plugins → Installierte Plugins → S360 Clerk → Einstellung

 

Bereich

Option

Bedeutung

Bereich

Option

Bedeutung

Allgemein

Cookieless Tracking nutzen

Tracking ohne Cookie Nutzung

 

Warenkorb Tracking nutzen?

Informiert Clerk über Änderungen am Warenkorb (allg. Tracking des Warenkorbs)

 

E-Mails anonymisieren

E-Mail Adressen werden anonymisiert (als Hash) an Clerk übertragen

 

Clerk JS Name

Falls gesetzt wird das Clerk Javascript nicht von https://cdn.clerk.io/clerk.js geladen sondern von https://custom.clerk.io/{name}.js wobei {name} der eingestellte Name ist.

Benötigt Plugin Version 1.0.6

 

 

 

Omni-Suche

Benötigt Plugin Version 1.0.6

 

 

 

In Webseite einfügen

Gibt an, ob die Omni-Suche über das Plugin eingebunden werden soll oder ob sie direkt über Clerk.js eingebunden werden soll.

In letzterem Fall haben die Plugin-Einstellungen für die Omni-Suche keine Auswirkung → die Einstellungen müssen in diesem Fall im Clerk Backend vorgenommen werden!

 

Omni-Suche aktivieren

Falls deaktiviert wird im Frontend die Clerk Omni-Suche nicht ausgespielt.

Falls aktiviert, haben die Einstellungen der Live-Suche und Suche (Ergebnisseite) keine Auswirkungen!

 

Selektor Omni-Suche

Selektor für die Omni-Suche unabhängig von Clerk

 

Clerk templateName Omni-Suche

Template für die Omni-Suche (Clerk Backend → Search → Content → Omnisuche → Insert into website → Im Code den Wert aus “data-template=”@WERT'“)

 

 

 

Live Suche (Header)

Live Suche aktivieren?

Falls deaktiviert wird im Frontend die Clerk Live Suche nicht ausgespielt.

 

Selektor Livesuche

Selektor für die Live-Suche unabhängig von Clerk

 

Clerk TemplateName Livesuche

Template für die Live-Suche (Clerk Backend → Search → Content → Livesuche → Insert into website → Im Code den Wert aus “data-template=”@WERT'“)

 

Anzahl Suchvorschläge in der Livesuche

Anzahl der Suchvorschläge die angezeigt werden soll

 

Anzahl Kategorievorschläge

Anzahl der Kategorie Vorschläge die angezeigt werden soll

 

Anzahl Seitenvorschläge

Anzahl der Seitenvorschläge die angezeigt werden soll

 

Position

Position des Live-Suche Ergebnisses in Bezug auf den Selektor

 

 

 

Suche (Ergebnisseite)

Ergebnisseite aktivieren?

Falls deaktiviert wird im Frontend die Clerk Ergebnisseite nicht ausgespielt.

 

Clerk TemplateName Suche

Template für die Live-Suche (Clerk Backend → Search → Content → Suche → Insert into website → Im Code den Wert aus “data-template=”@WERT'“)

 

Position Facetten

Position der Facetten

 

Facetten in URL anzeigen

Facetten in URL anzeigen

 

Clerk Facetten Attribute

Kommagetrennte Liste der verfügbaren Facetten (JTL Merkmale)

 

Clerk Facetten Attribute Multiple Werte

Kommagetrennte Liste der verfügbaren Facetten mit multiplen Werten (JTL Merkmale für ODER Filterung)

 

Bereich

Option

Bedeutung

Bereich

Option

Bedeutung

Data Feed

Cronverarbeitung

Art und Weise wie der Cron zur Generierung des Daten Feeds angestoßen werden soll (Im Abschnitt Möglichkeiten der Daten Feed Erstellung genauer erklärt)

 

Stapelgröße

Stapelgröße der Produkte des Feeds (Im Abschnitt Stapelgröße genauer erklärt)

 

 

 

Produkt Seite

Produktseiten Slider aktivieren?

Falls deaktiviert wird im Frontend der Slider auf der Produktseite nicht ausgespielt.

 

Artikel Selektor Slider

Selektor für den Artikel Slider unabhängig von Clerk

 

Clerk TemplateName Artikel

Namen der Slider Templates die ausgegeben werden sollen. Mehrere Template Namen können als komma-separierte Liste angegeben werden.

 

Slider

Einfügemethode, wie der Slider zum Selektor hinzugefügt werden soll (After, Append, Before, Prepand, ReplaceWith)

 

Duplikate filtern

Verhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)

 

 

 

Warenkorb Seite

Warenkorb Slider aktivieren?

Falls deaktiviert wird im Frontend der Slider auf der Warenkorbseite nicht ausgespielt.

 

Warenkorb Selektor Slider

Selektor für den Warenkorb Slider unabhängig von Clerk

 

Clerk TemplateName Warenkorb

Namen der Slider Templates die ausgegeben werden sollen. Mehrere Template Namen können als komma-separierte Liste angegeben werden.

 

Slider

Einfügemethode, wie der Slider zum Selektor hinzugefügt werden soll (After, Append, Before, Prepand, ReplaceWith)

 

Duplikate filtern

Verhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)

 

 

 

Powerstep

Powerstep Slider aktivieren?

Falls deaktiviert wird im Frontend der Slider im Powerstep nicht ausgespielt.

 

Powerstep Selektor

Selektor für den Powerstep Slider unabhängig von Clerk

 

Clerk TemplateName Powerstep

Namen der Slider Templates die ausgegeben werden sollen. Mehrere Template Namen können als komma-separierte Liste angegeben werden.

 

Powerstep Einfügemethode

Einfügemethode, wie der Slider zum Selektor hinzugefügt werden soll (After, Append, Before, Prepand, ReplaceWith)

 

Duplikate filtern

Verhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)

 

Bereich

Option

Bedeutung

Bereich

Option

Bedeutung

Kategorie Seite

Kategorieseiten Slider aktivieren?

Falls deaktiviert wird im Frontend der Slider auf der Kategorieseite nicht ausgespielt.

 

Kategorie Selektor Slider

Selektor für den Kategorie Slider unabhängig von Clerk

 

Clerk TemplateName Warenkorb

Namen der Slider Templates die ausgegeben werden sollen. Mehrere Template Namen können als komma-separierte Liste angegeben werden.

 

Slider

Einfügemethode, wie der Slider zum Selektor hinzugefügt werden soll (After, Append, Before, Prepand, ReplaceWith)

 

Duplikate filtern

Verhindert, dass nachfolgende Slider Produkte aus vorherigen Slidern enthalten (Standard: Ja)

 

 

 

Exit Intent (Ausstiegsabsicht)

Exit Intent Slider aktivieren?

Falls deaktiviert wird im Frontend der Exit Intent nicht ausgespielt.

 

Clerk TemplateName Exit Intent

Template für den Exit Intent

 

Erstellung von Datenfeeds

Einstellungen:

Die Einstellungen des Datenfeeds erreichen Sie über Plugins → Installierte Plugins → S360 Clerk → klick auf Zahnrad (siehe Bild)

Hier kann genau ausgewählt werden, welche Daten dem Feed hinzugefügt werden bzw. welche für Sie relevant sind.

 

Option

Bedeutung

Option

Bedeutung

API Key

Ihr von Clerk erhaltener API Schlüssel

Private Key

Ihr von Clerk bereitgestellter Legacy private API Key. Wird für die Zugriffsbeschränkung auf den Daten-Feed benötigt.

Sprache

Sprache des Daten Feeds

Kundengruppe

Preise für die Kundengruppe

Währung

Währung im Daten Feed

Facetten Design

Design der Facetten

Weitere Informationen sind aus der jeweiligen Reihe zu entnehmen (i-Icon).

Weitere Daten Feed Einstellungen

Möglichkeiten der Daten Feed Erstellung

Es gibt 3 Möglichkeiten die Generierung der Cron-Jobs anzustoßen:

  1. CLI → Bei CLI wird der Cronjob über den Shop CLI Befehl php cli s360_clerk_shop5:cron aufgerufen

  2. Wawi Abgleich → Cronjob wird beim Wawi Abgleich mit ausgeführt

  3. Aufgabenplaner → Der Cronjob wird zusammen mit anderen Cronjobs z.B Exporte über den Aufruf der cron_inc.php angestoßen. (Standard JTL Cron → JTL5-Shop Backend -> System-> Cron)

Gesamtablauf zur Erstellung des Feeds

  1. Feed im Shop Backend einstellen (Plugins → Installierte Plugins → S360 Clerk → klick auf Zahnrad (siehe Bild))

  2. Nach den Einstellungen, den Feed erstellen (Plugins → Installierte Plugins → S360 Clerk → klick auf Doppelpfeil)

  3. Nach erfolgreichem erstellen muss der Feed im Clerk.io Backend hinterlegt werden:

 

Stapelgröße

Anstatt alle Produkte auf einmal aus der Datenbank auszulesen, wird immer nur ein Stapel von Produkten auf einmal ausgelesen .

Bei einer großen Anzahl an Produkten, kann so der Speicherverbrauch stark reduziert werden., erhöht dabei allerdings die Laufzeit.

Ist der Wert auf 0 gesetzt, werden ALLE Produkte ausgegeben.

Konfiguration Shop bei Clerk.io (Allgemein)

Das Standardisierte Vorgehen zum hinzufügen neuer Elemente ist:

  1. Öffnen des Clerk.io Backends

  2. Design erstellen

  3. Content hinzufügen

  4. Einstellungen im Plugin Backend

Hinzufügen des Warenkorb-Sliders

Neue Slider können via Clerk Backend erzeugt und hinzugefügt werden.

Anlegen des Design erfolgt im Clerk.io Backend unter Recommendations → Designs.

Hier kann via HTML und CSS das Grund-Design angepasst werden.

Wichtig: Lieferstatus wird momentan nur vom EasyTemplate Slider unterstützt.

Vorlage Design Nova:

{% if products.length != 0 %} <div class="slick-slider-other is-not-opc"> <div class="hr-sect h2"> {{ headline }} </div> <div id="slick-slider-{{ snippets.settings.slider.id }}" class="carousel-arrows-inside carousel slick-smooth-loading slider-no-preview slick-type-product slick-lazy" data-slick-type="product-slider"> {% for product in products %} <div class="product-wrapper col"> <div id="result-wrapper_buy_form_{{ product.id }}" data-wrapper="true" class="productbox productbox-column"> <div class="productbox-inner"> <div class="row"> <div class="col col-12"> <div class="productbox-image"> <div class="productbox-images"> <a href="{{ product.url }}" title="{{ product.name }}"> <div class="productbox-image square square-image"> <div class="inner"> <picture> <img src="{{ product.image }}" class="img-fluid" loading="lazy" alt="{{ product.name }}" /> </picture> </div> </div> {% if product.top_article and product.top_article != false %} <div class="ribbon ribbon-4 productbox-ribbon"> {{ snippets.ribbons.4 }} </div> {% endif %} {% if product.on_sale and product.on_sale != false %} <div class="ribbon ribbon-2 productbox-ribbon"> {{ snippets.ribbons.2 }} </div> {% endif %} {% if product.in_stock