Shopware

Shopware 5
Shopware 6
Weitere Informationen

Shopware 5

Allgemein

Diese Anleitung beschreibt die Integration des SiteCockpit-Widgets in einen Shopware 5 Shop mithilfe des eingebetteten Codes (Embed-Code). Die Einbindung erfolgt direkt über den Theme Manager von Shopware 5.

Theme Manager aufrufen

Navigieren Sie im Shopware-Backend zum Menüpunkt:
Einstellungen → Theme Manager.

Gewünschtes Theme auswählen

Wählen Sie das Theme aus, das Sie für Ihre Shop-Ansicht verwenden möchten.
Klicken Sie anschließend auf den Button „Theme konfigurieren“.

Theme-Konfiguration öffnen

Im neuen Fenster sehen Sie die Seite „Theme Konfiguration“.
Wählen Sie hier den Reiter „Konfiguration“ aus.

Embed-Code einfügen

Scrollen Sie bis zum Seitenende zum Abschnitt „Erweiterte Einstellungen“.
Im Eingabefeld „Weitere JavaScript-Bibliotheken:“ fügen Sie den Embed-Code aus Ihrem SiteCockpit-Dashboard ein.
Klicken Sie danach auf „Speichern“.

Theme kompilieren

Nach dem Speichern erscheint ein Hinweis, das Theme zu kompilieren.
Bestätigen Sie den Vorgang, damit die Änderungen wirksam werden.

Shopware 6

Allgemeine Informationen

In dieser Anleitung zeigen wir Ihnen, wie Sie den easyVision Embed-Code in Ihren Shopware 6 Shop integrieren können.

Für Shopware 6 stehen Ihnen mehrere Möglichkeiten zur Verfügung, den Code in Ihr Theme oder Layout einzubinden. Je nach technischer Erfahrung und gewünschter Update-Sicherheit empfehlen sich unterschiedliche Ansätze:

Variante 1 ist die schnellste, jedoch nicht update-sicher.
Variante 2 verwendet ein Child-Theme und ist die empfohlene Methode für eine dauerhafte und wartbare Integration.
Variante 3 erfolgt bequem über ein Plugin ohne direkten Code-Zugriff.

Variante 1: Template direkt editieren (NICHT empfohlen)

Diese Methode ist nicht update-sicher und wird nicht empfohlen, da Änderungen beim nächsten Shopware-Update überschrieben werden können. Shopware empfiehlt stattdessen die Nutzung eines Child-Themes (siehe Variante 2).

Template-Datei herunterladen

Melden Sie sich per FTP oder Dateimanager auf Ihrem Server an.
Navigieren Sie in folgendes Verzeichnis: vendor/shopware/storefront/Resources/views/storefront/layout

Laden Sie die Datei footer.html.twig herunter.
Duplizieren Sie diese Datei als Backup. Beispiel: Backup_footer.html.twig

Embed-Code einfügen

Öffnen Sie die Datei footer.html.twig in einem Texteditor.

Fügen Sie nach der Zeile </footer> Ihren individuellen Embed-Code ein:

<script type="module" src="https://cdn.sitecockpit.com/cdn/app.js" data-easy-vision-key="1xxxxxxx-1xxx-xxx6-bxxx-1xxxxxxxxxx9"></script>

Datei hochladen

Laden Sie die geänderte Datei wieder in das gleiche Verzeichnis hoch.
Überschreiben Sie die bestehende Datei.

Theme kompilieren & Cache leeren

Führen Sie im Anschluss folgende Befehle aus:

bin/console theme:compile
bin/console cache:clear

Die Integration ist damit abgeschlossen.

Variante 2: Integration über ein Child-Template (empfohlen)

Child-Theme erstellen

Melden Sie sich per SSH auf Ihrem Server an und führen Sie folgenden Befehl aus:

bin/console theme:create S360BeispielTheme

# Die Ausgabe sollte folgendermaßen aussehen:

Creating theme structure under .../development/custom/plugins/S360BeispielTheme

Nach erfolgreicher Erstellung führen Sie aus:

bin/console plugin:refresh

# Die Ausgabe sollte folgendermaßen aussehen:

[OK] Plugin list refreshed                                                                              

Shopware Plugin Service
=======================

 ----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- ------------- 
  Plugin                  Label                                Version       Upgrade version   Author   Installed   Active   Upgradeable  
 ----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- ------------- 
  S360BeispielTheme       Theme S360BeispielTheme plugin       9999999-dev                              No          No       No           
 ----------------------- ------------------------------------ ------------- ----------------- -------- ----------- -------- ------------- 

 1 plugins, 0 installed, 0 active , 0 upgradeable

Dann installieren und aktivieren Sie das Theme:

bin/console plugin:install --activate S360BeispielTheme

# Die Ausgabe sollte folgendermaßen aussehen:

Shopware Plugin Lifecycle Service
=================================

 Install 1 plugin(s):
 * Theme S360BeispielTheme plugin (vdev-trunk)

 Plugin "S360BeispielTheme" has been installed and activated successfully.

 [OK] Installed 1 plugin(s).

Theme einem Verkaufskanal zuweisen

bin/console theme:change

# Sie erhalten mehrere Möglichkeiten zur Auswahl, in unserem Beispiel wählen wir "Storefront" und unser Theme "S360BeispielTheme"

Please select a sales channel:
[0] Storefront | 64bbbe810d824c339a6c191779b2c205
[1] Headless | 98432def39fc4624b33213a56b8c944d
0

Please select a theme:
[0] Storefront
[1] S360BeispielTheme
1

Set "S360BeispielTheme" as new theme for sales channel "Storefront"
Compiling theme 13e0a4a46af547479b1347617926995b for sales channel S360BeispielTheme

Wählen Sie den gewünschten Sales Channel (z. B. Storefront) und anschließend Ihr Theme (z. B. S360BeispielTheme).

Embed-Code einfügen

Navigieren Sie in Ihr Child-Theme-Verzeichnis: custom/plugins/S360BeispielTheme/src/Resources/views/storefront/layout
Erstellen oder bearbeiten Sie dort die Datei: meta.html.twig

Fügen Sie folgenden Inhalt ein:

{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %} {# important to extend so the defult theme is loaded #}
{% block layout_head_javascript_hmr_mode %}
    {{ parent() }} {# load parent/plugins #}
    <script type="module" src="https://cdn.sitecockpit.com/cdn/app.js" data-easy-vision-key="1xxxxxxx-1xxx-xxx6-bxxx-1xxxxxxxxxx9"></script>
{% endblock %}Please contact our support team to request the plugin.

Der Embed-Code befindet sich damit im <head>-Bereich der Seite.

Theme kompilieren & Cache leeren

bin/console theme:compile
bin/console cache:clear

Variante 3: Integration via Plugin (ohne Code-Änderung)

Integration des SiteCockpit-Plugins

SiteCockpit bietet für Shopware Versionen 6.4, 6.5 und 6.6 ein eigenes Plugin an, mit welchem die Integration einfach durchzuführen ist. Kontaktieren Sie hierzu gerne unseren Support.

Plugin installieren

Fragen Sie das Plugin bei unserem Support oder Vertrieb an. Sie erhalten eine .zip-Datei mit der zu Ihrem Shop passenden Version.
Installieren und aktivieren Sie es über das Shopware Backend.