Clerk (JTL-Shop 5)
- 1 Einleitung
- 2 Installation und Update
- 3 Konfiguration (Shop)
- 4 Konfiguration Shop bei Clerk.io (Allgemein)
- 5 Hinzufügen der Live-Suche
- 5.1 Design:
- 5.1.1 HTML Datei:
- 5.1.2 CSS Datei:
- 5.2 Content:
- 5.1 Design:
- 6 Hinzufügen der Facetten
- 7 Hinzufügen der Suchergebnisse
- 8 Eigene zusätzliche Slider hinzufügen
- 8.1 EasyTemplate
- 8.2 OnPage Composer
- 9 PHP Events
- 10 Individualisierung
- 11 Formatierungen
- 12 Troubleshooting
- 12.1 Logs prüfen
- 12.1.1 Browser-Log
- 12.1.2 Shop-Log
- 12.1.3 Webserver-Log
- 12.1 Logs prüfen
- 13 FAQ
- 14 Changelog
- 15 Support und Kontakt
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 |
---|---|---|
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 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 |
---|---|---|
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 |
---|---|---|
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 |
---|---|
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:
CLI → Bei CLI wird der Cronjob über den Shop CLI Befehl php cli s360_clerk_shop5:cron aufgerufen
Wawi Abgleich → Cronjob wird beim Wawi Abgleich mit ausgeführt
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
Feed im Shop Backend einstellen (Plugins → Installierte Plugins → S360 Clerk → klick auf Zahnrad (siehe Bild))
Nach den Einstellungen, den Feed erstellen (Plugins → Installierte Plugins → S360 Clerk → klick auf Doppelpfeil)
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:
Öffnen des Clerk.io Backends
Design erstellen
Content hinzufügen
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