# Shopware 5 - Wissensdatenbank
Bevor Du ein Ticket an unseren Support sendest, solltest Du prüfen, ob Dein Anliegen nicht bereits über die Wissensdatenbank erläutert wird.
# Anzeigen auf Funktion
Durch die Theme-Konfiguration einiger Plugins kann die Anzeige des Plugins direkt auf Seitenbreiche beschränkt werden. Dazu gibt es ein Auswahlfeld "Anzeigen auf". Durch die Auswahl der Seitenbereiche mit der Maus können hiermit sogenannte Controller ausgewählt werden.
Anzeigen auf - Funktion in der Plugin Konfiguration
## Übersicht
`index => Startseite`
`listing => Produkt-Listings`
`detail => Detailseite`
`campaign => Emotion Landingpages`
`blog => Blog register => Registrieren`
`note => Merkzettel`
`custom => Content Seiten`
`forms => Formular Seiten`
`search => Suche`
`newsletter => Newsletter Seite`
`account => Account`
`checkout => Warenkorb / Checkout / Kasse`
`BonusSystem => Bonus System (Shopware Premium Plugin)`
`AboCommerce => Abo Commerce (Shopware Premium Plugin)`
`LiveShopping => Live Shopping (Shopware Premium Plugin)`
`Wishlist => Wishlist (Shopware Premium Plugin)`
`Bundle => Bundle (Shopware Premium Plugin)`
## Weitere Controller
Gelegentlich kann es vorkommen, dass durch ein anderes Plugin oder eine individuelle Programmierung weitere Controller im Shop implementiert wurden. Hierzu kann die Liste erweitert werden. Dazu müssen die Werte statt mit der Maus auszuwählen direkt in das Feld geschrieben werden. Hierbei werden dann die Werte aus der obigen Liste benötigt.
### Controller Namen finden
Den Namen des jeweiligen Controllers kann man ggf. aus der Adresszeile oder aus der Klasse im Body "is--ctl-**controllerName**" entnommen werden. Dazu ist es notwendig im Quellcode nachzuschauen.
# Google Fonts und die DSGVO
Die in vielen Themes und Plugins angebotene Funktion zur Einbindung von Google Fonts ist seit Einführung der DSGVO häufig diskutiert. Mit dem Urteil des LG München vom 20.01.2022 Az. 3 O 17493/20 gibt es mittlerweile Klarheit - **die dynamische Einbindung von US-Webdiensten in eine Internetseite z.B. Google Fonts ist ohne eine Einwilligung des Nutzers datenschutzwidrig.**
Aber nicht nur Google Fonts sind davon betroffen. Die Einbindung von Google Maps, Google reCAPTCHA und anderen Diensten sind nicht allein wegen der Verwendung von Tracking-Cookies ein Problem. Auch diese Dienste binden Google Schriften über die Google API ein.
## Google Fonts lokal einbinden
Folge unserer Anleitung zum lokalen hosten von Schriften:
{% content-ref url="/pages/ZiRNy6iECrCUkIX4LTnz" %}
[Fonts lokal hosten](/faq/fonts-lokal-hosten)
{% endcontent-ref %}
# Fonts lokal hosten
Wir zeigen Dir hier, wie Du Schriften lokal einbinden kannst am Beispiel von Google Fonts. Diese Anleitung kannst Du auf unsere Themes und Plugins anwenden.
Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden. Diese Anleitung bezieht sich auf unsere **Themes** wie auch unsere Plugins **Angebote Sales Countdown Banner**, **Nachrichten & Hinweise Leiste**, **Google Schriften / Fonts Changer**.
## Einfache Einbindung
### 1. Verbindung zur Google API kappen
Als erstes stelle sicher, dass keine Schriften von einem anderen Server wie z.B. Google geladen werden. Entferne dazu einfach den Link in der jeweiligen Konfiguration des eingesetzten Themes oder Plugins.
{% tabs %}
{% tab title="Theme" %}
Prüfe auch die anderen Felder, welche link-Tags enthalten könnten.
{% endtab %}
{% tab title="Countdown Banner" %}
{% endtab %}
{% tab title="Nachrichten Banner" %}
{% endtab %}
{% tab title="Font Changer" %}
{% endtab %}
{% endtabs %}
### 2. Schriften aussuchen
Nun geht es darum die Schriften selbst zu hosten. Dazu müssen die Schriftarten erst einmal heruntergeladen werden. Um die Schriften von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von [Herokuapp](https://google-webfonts-helper.herokuapp.com/fonts) nutzen.
{% embed url="" %}
Gib den Namen der gewünschten Schriftart in der **Suche (1)** ein, und wähle die **Schriftschnitte (2)** aus, die Du in Deinem Theme oder Plugin verwenden möchtest.
Das **Schriftgewicht (2)** solltest Du entsprechend Deiner eingestellten Theme- bzw. Plugin-Konfiguration auswählen.
Schriftgewicht im Theme
### 3. CSS einfügen
Der CSS-Code aus dem Schritt 3 der google-webfonts-helper Anleitung muss in Deinem Shop geladen werden. Verbinde Dich daher mit einem FTP-Programm mit Deinem Server und gehe in das Stammverzeichnis Deiner Shopware 5 Installation.
Lege hier einen Ordner mit dem Namen `fonts` an.
Bevor Du den Code kopierst, passe die Pfade der Urls an. Dazu kannst Du das sogenannte **Prefix (1) im** **Eingabefeld** herauslöschen. Die Pfade im CSS-Code passen sich automatisch an.
Lege eine CSS-Datei mit dem Namen der Schriftart, z.B. `raleway.css` an und Kopiere den CSS-Code in diese Datei.
Lade die `raleway.css` Datei in den soeben erstellten `fonts`-Order auf Deinem Server.
### 4. Schriften auf den Server laden
Unter Schritt 4 "Download files" kannst Du eine **Zip-Datei (1)** der Schriften herunterladen.
Entpacke das heruntergeladene ZIP-Archiv mit den Schriften auf Deinem Computer und lade die **einzelnen Schrift-Dateien** per FTP-Client in den zuvor erstellten `font`-Ordner. Das ganze sollte nun wie folgt aussehen.
### 5. Theme Konfiguration anpassen & kompilieren
Damit die Schriften nun geladen werden, muss die CSS-Datei `raleway.css` mit dem Theme bzw. Plugin aufgerufen werden. Das CSS sollte sich nun mit Deiner Domain aufrufen lassen. z.B. \
`https://www.deine-domain.de/fonts/raleway.css`
Zum Einbinden der `fonts.css` muss ein HTML \-Tag mit der Url erstellt werden.
``
Füge diesen Link nun in die markierten Felder Deiner Theme- oder Plugin-Konfiguration ein. (Nutzt Du ein uns dieselbe Schrift in mehreren Plugins, muss der \-Tag nur einmalig eingegeben werden.)
{% hint style="info" %}
Verfahre so mit jeder weiteren Schriftart.
{% endhint %}
{% tabs %}
{% tab title="Theme" %}
{% endtab %}
{% tab title="Countdown Banner" %}
{% endtab %}
{% tab title="Nachrichten Banner" %}
{% endtab %}
{% tab title="Font Changer" %}
{% endtab %}
{% endtabs %}
## Fortgeschrittene Einbindung
{% hint style="warning" %}
Die Anleitung für Fortgeschrittene sieht leichte Kenntnisse in der Theme-Bearbeitung von Shopware vor und das Vorhandensein eines Child-Themes:
{% endhint %}
Anstatt die Schriften vom Google Server zu laden, kannst Du diese auch lokal auf dem eigenen Server ablegen und einbinden.
### 1. Verbindung zur Google API kappen
### 2. Schriften herunterladen
Um die Schriften von Google Fonts herunterladen zu können, kannst Du den kostenlosen Dienst von [Herokuapp](https://google-webfonts-helper.herokuapp.com/fonts) nutzen.
Gib den Namen der gewünschten Schriftart in der Suche ein, und wähle die Schriftschnitte aus, die Du in Deinem Shop verwenden möchtest.
Die Schriftfamilien müssen mit den definierten Schriften der Theme-Konfiguration übereinstimmen.
### 3. Schriften auf den Server laden
Falls Du keine Ableitung des Themes in Form eines Child-Themes besitzt, erstelle Dir eine Ableitung nach dieser [Anleitung](https://docs.shopware.com/de/shopware-5-de/einstellungen/theme-manager#theme-erstellen) oder verwende die Einbindung ohne Child-Theme.
Entpacke das ZIP-Archiv mit den Schriften und lade die Fonts per FTP-Client in den Schriften-Ordner Deiner Theme-Ableitung. Du findest den Ordner unter `/themes/Frontend/DeinChildTheme/frontend/_public/src/fonts`
### 4. CSS einfügen
Nun fehlt nur noch der erzeugt CSS-Code aus Schritt 3 des Dienstes. Erstelle Dir zunächst eine Datei mit dem Namen `all.less`, falls diese in Deinem Child-Theme noch nicht vorhanden ist. Die Datei gehört in den Ordner `/themes/Frontend/DeinChildTheme/frontend/_public/src/less`. Hinterlege in dieser Datei den CSS Code aus Schritt 3 - Copy CSS.
### 5. Theme Konfiguration anpassen & kompilieren
Vergiss nicht im Theme unter Typografie & Farben > Schriftbild die ausgewählten Schriftschnitte anzugleichen.
# SVG Logo wird nicht angezeigt
## **Problembeschreibung**
Das eingebundene Logo als SVG-Grafik wird nicht angezeigt.
## **Erläuterung**
Eine SVG Grafik wird auf eine Art Leinwand (engl. canvas) angelegt. Dies ist ein eigentlich unendlich große Fläche, die aber in einem Viewport mit festen Maßen angezeigt wird. Teile des canvas außerhalb des Viewports werden abgeschnitten und sind nicht sichtbar.
Beim Einbinden des Logos ist es nötig eine vorhandene SVG so zu skalieren, dass diese in ein bestimmtes Elternelement passt - dem Headerbereich. Mit dem viewBox-Attribut kannst Du ein Rechteck mit fester Pixelbreite bestimmen, das dann innerhalb des verfügbaren Viewports des Header skaliert werden kann.
Voraussetzung für eine korrekte Darstellung von SVGs ist also, dass diese für das Web korrekt angelegt werden: Soll eine SVG Datei wie eine JPG oder PNG Grafik behandelt werden, benötigt diese eine **viewbox**, eine **width** sowie eine **height** Angabe. Weitere Inforamtionen dazu findest Du hier: In der SVG Datei fehlen daher möglicherweise Angaben zu Breite und Höhe der Grafik. Falls du die Datei aus Illustrator gespeichert hast, werden diese nicht standardmäßig mitgegeben.
## **Lösungsvorschlag**
Öffne die SVG-Grafik in einem Editor und setze die Werte für viewbox, width und height nachträglich. Hilfe:
# Theme als Ursache identifizieren
## Theme als Ursache identifizieren
Du kannst Dein Theme ganz einfach als Ursache einer Fehldarstellung identifizieren oder auch ausschließen. Gehe dazu wie folgt vor:
{% hint style="info" %}
Lösche bitte zunächst einmal den Cache des Shops und prüfe das betroffene Plugin / die betroffene Fehldarstellung. So kannst Du direkt ausschließen, dass das Problem mit dem Cache zusammenhängt.
{% endhint %}
1. Navigiere in den Theme Manager
2. Aktiviere die Vorschau das Responsive Theme durch den Button "Theme Vorschau". Keine Sorge, nur Du wirst eine Vorschau des Responsive Themes sehen. Deine Kunden sehen weiterhin Dein individuelles Theme.
3. Prüfe das betroffene Plugin im Frontend Deines Shops
1. Plugin funktioniert noch immer nicht => Theme als Ursache ausgeschlossen
2. Plugin funktioniert nun => Theme als Ursache identifiziert. Nun muss die betroffene Stelle im Theme lokalisiert und behoben werden.
4. Stoppe die Vorschaufunktion
{% hint style="warning" %}
Die Vorschaufunktion funktioniert in Shopware 5 leider nicht immer. Auch beim Navigieren im Frontend kann es vorkommen, dass die Vorschaufunktion nicht korrekt funktioniert. Dann sollte statt der Vorschau das Responsive Theme kurz direkt aktiviert werden.
{% endhint %}
# Plugin als Ursache identifizieren
## Plugin als Ursache identifizieren
Du kannst andere Plugins ganz einfach als Ursache einer Fehldarstellung identifizieren oder auch ausschließen. Gehe dazu wie folgt vor:
1. Navigiere in den Plugin Manager
2. Aktiviere das Option "Sicherheitsmodus". Dadurch werden alle Shopware fremden Plugins deaktiviert. (Die Option "Sicherheitsmodus" ist erst ab Shopware Version 5.3 implementiert. Alternativ kannst du alle Plugins händisch deaktivieren)
3. Aktiviere nun ausschließlich das betroffene Plugin im Plugin Manager
4. Prüfe das betroffene Plugin im Frontend Deines Shops
1. Plugin funktioniert noch immer nicht => Andere Plugins als Ursache ausgeschlossen
2. Plugin funktioniert nun => Andere Plugins als Ursache identifiziert. Nun muss durch etappenweise aktivieren und prüfen der Plugins das ursächliche Plugin identifiziert werden.
5. Danach schalte die Option "Sicherheitsmodus" wieder aus
Last updated 49 minutes ago
# Plugin wird nicht angezeigt
Gelegentlich passiert es - ein Plugin ist installiert, konfiguriert, das Theme ist kompiliert und der Cache wurde auch gelöscht. Dennoch stimmt die Anzeige in der Storefront nicht... Ärgerlich!
Individuelle Themes oder andere Plugins können die Funktionsweise jedes Plugins beeinträchtigen. Wir achten daher durch Abgrenzung der Variablen und der Einbindung der Plugins auf eine Shopware-konforme und möglichst kompatible Einbindung der Plugins im Frontend.
Da ein aktives Theme in der Regel die letzte Instanz in der Vererbungskette ist, können an dieser Stelle Plugin-Einstellungen überschrieben werden.
## Warum wird das Plugin in der Storefront nicht angezeigt?
Um diese Frage zu beantworten müssen wir ein grobes Verständis darüber erlangen, wie Plugins und Themes Inhalte in der Storefront darstellen.
{% hint style="success" %}
Keine Sorge, dafür sind keine Programmierkenntnisse notwendig, also weiter:
{% endhint %}
In Shopware können ganze Dateien und Bereiche (Blöcke genannt) innerhalb von Dateien **erweitert** oder **überschrieben** werden. **Erweitern** bedeutet, dass neuer Code zu bestehendem Code hinzugefügt wird. **Überschreiben** bedeutet, dass neuer Code anderen Code komplett ersetzt - soweit klar?
Showpare ist deshalb durch den gesamten Code hinweg mit solchen Einstiegspunkten (Blöcken) gespricht. Dadurch ist es möglich praktisch "minimal invasiv" Veränderungen vorzunehmen.
### Das Problem des "Überschreibens"
Beim **Überschreiben** von Blöcken oder ganzen Dateien kann es vorkommen, dass andere Plugins oder Themes an diesen Stellen nicht mehr wirken können - deren Inhalte wurden dann überschrieben. Versuchen nun **mehrere Plugins denselben Block** zu überschreiben oder zu erweitern, werden nur jene Inhalte in der Storefront sichtbar, dessen Plugin zuletzt diesen Block **überschrieben** hat.
{% hint style="warning" %}
In der Regel sollte daher ein Block oder eine Datei nur erweitert werden, um andere Plugins und Themes nicht in ihrer Funktionsweise zu beeinträchtigen. Nicht immer ist das möglich.
{% endhint %}
### Beispiel Überschreiben eines Blocks:
```markup
{block name="frontend_index_logo"}
//...
{/block}
```
### Beispiel Erweitern eines Blocks:
Vereinfacht gesagt, sorgt `{$smarty.block.parent}` dafür, dass die Inhalte von anderen Plugins oder Themes ebenfalls geladen werden können.
```markup
{block name="frontend_index_logo"}
{$smarty.block.parent} // lädt vorige Inhalte
//...
{/block}
```
## Lösungsvorschlag:
Um herauszufinden welches Plugin oder Theme der "Übeltäter" ist und andere Plugins in ihrer Funktion hindern, kannst Du im Plugin-Manager Plugins deaktivieren, welche als mögliche Auslöser in Betracht kommen. Das sind in der Regel Plugins, welche in der Storefront eine Veränderung hervorrufen. Im folgenden haben wir zwei Anleitungen, wie man Themes und auch Plugins als Ursache identifizieren kann.
{% content-ref url="/pages/-MJBRpDcUWgQ4YzMDkY4" %}
[Plugin als Ursache identifizieren](/faq/plugin-als-ursache-identifizieren)
{% endcontent-ref %}
{% content-ref url="/pages/-MJBSSjrYNUDItWfMQG8" %}
[Theme als Ursache identifizieren](/faq/theme-als-ursache-identifizieren)
{% endcontent-ref %}
Ist das betroffene Theme oder Plugin identifiziert sollte der Hersteller nähere Auskunft und bei der Problemlösung helfen können.
{% hint style="info" %}
Natürlich kann man auch im Quellcode der Themes und Plugins nach dem betreffenden Block durchsuchen und so den "Übeltäter" überführen.
{% endhint %}
### Ich benötige Hilfe bei der Suche:
Gerne helfen wir bei der Suche des Plugins. Da wir nicht Betreiber des Shops sind, können wir jedoch nicht einfach Plugins oder gar Themes in einem Live-System deaktivieren. Solltest Du uns mit der Suche nach dem "Übeltäter" beauftragen wollen, kannst Du uns in einem Support-Ticket folgende Daten hinterlassen:
* eigenständiger Shopware Backend-Benutzer mit Admin-Zugriff
* eigenständiger SSH/SFTP/FTP-Zugang (Host, Benutzer, Passwort)
# Plugin wird in Subshop nicht angezeigt
## Problembeschreibung:
Häufig liegt hier das Problem vor, dass die Inhalte der Auswahlfelder der Konfiguration kopiert und in die Subshops übertragen werden und nicht erneut angewählt werden.
Gerade bei den Auswahlfeldern **"Sichtbar auf"** oder **"Anzeigen auf"** werden die Konfigurationen schnell mal **markiert**, **kopiert** und in die Auswahlfelder der Subshops **hineinkopiert**.
## Warum ist das Kopieren von Einstellungen in Shopware Auswahlfeldern ein Problem?
Leider sind die Konfigurations-Bausteine von shopware zur Erstellung der Auswahlfelder so konzipiert, dass nur eine Auswahl mit der Maus eine Verknüpfung zwischen dem eigentlichen Wert und dem Label entsteht.
Beispiel:
* Label: *Startseite* verknüpft mit Wert: *index*
* Label: *Produkt-Listing* verknüpft mit Wert: *listing*
**Der Vorteil** ist, dass man so auch weitere Werte eintragen kann, dann aber die tatsächlichen Werte (values) angeben muss.
**Der Nachteil** ist, dass hineinkopierte Labels (Startseite, Produkt-Listing usw.) nicht automatisch mit dem Wert verknüpft werden.
## Lösungsvorschlag:
Wähle die Werte in Auswahlfeldern immer mit der Maus aus. Auch bei Sub- oder Sprachshops sollte die Auswahl in Auswahlfeldern mit der Maus erfolgen.
Beachte daher bitte die Hilfestellungen, welche sich hinter den Fragezeichen verbergen
# Plugin-Konfiguration lässt sich nicht speichern
## Problembeschreibung:
In machen Plugin-Konfigurationen wurden Farbvariablen (z.B. @brand-primary) als Default-Wert bei der Installation des Plugins gesetzt, um Elemente direkt in der im Theme definierten Hauptfarbe des Shops zu gestalten. In neueren Shopware Versionen lassen sich Konfigurationen mit solchen Farbfeldern nicht mehr speichern. Diese werden als invalide gekennzeichnet.
{% hint style="warning" %}
In machen Fällen wird das Feld nicht als invalide gekennzeichnet.
{% endhint %}
## **Lösungsvorschlag:**
Prüfe vor dem Speichern alle Felder auf Fehler. Diese werden als gezackte Linie im Feld angezeigt.
{% hint style="danger" %}
**Wichtig:** Prüfe auch alle Felder in den **Sub- und Sprachshop-Tabs**, da nur gespeichert werden kann, wenn alle Felder aller Sub- und Sprachshops valide sind.
{% endhint %}
# Umschreiben von Lizenzen
Häufig werden Plugins sinnvollerweise zunächst in einer Staging bzw. Testumgebung getestet und sollen erst nach erfolgreichen Tests in die Live-Umgebung eingespielt werden. Dazu ist ein Umschreiben der Lizenz notwendig sofern die Testumgebung nicht in einem Unterordner des eigentlichen Onlineshops betrieben wird.
**Umschreibungen von Lizenzen werden durch Shopware durchgeführt**, da Shopware für den Vertrieb der Plugins über die Plattformen des Plugin-Managers und des Shopware Community Stores zuständig ist. Hersteller können keine Umschreibungen von Lizenzdomains durchführen.
# Vollversion wird als Testversion angezeigt
## Problembeschreibung:
Nach dem Kauf eines Plugins aus einer Testphase heraus wird dieses nicht direkt als Vollversion im Plugin-Manager oder Lizenz-Manager dargestellt. Shopware prüft bei Plugins ohne Lizenzcode lediglich alle 24 Stunden eine Veränderung der Lizenz.
## Lösungsvorschlag:
* Hier reicht es in der Regel aus abzuwarten, bis auch im Backend des Shops das gekaufte Plugin als Vollversion gekennzeichnet wird.
* Es kann hilfreich sein, den Backend Cache zu leeren
* Die Testlizenz kann im Lizenz-Manager einfach gelöscht werden
* Eine **Neuinstallation** des betroffenen Plugins ist **nicht notwendig**.
Sollte die Umstellung der Testversion zur Vollversion auch nach 24 Stunden nicht korrekt dargestellt werden, kannst Du dich telefonisch oder per Ticket an shopware wenden. Shopware ist für den Vertrieb der Plugins über die Plattformen des Plugin-Managers und des shopware Community Stores zuständig. Hersteller haben an dieser Stelle keine Handhabe.
Du kannst also nach dem Kauf der Vollversion direkt mit Deinen Einstellungen aus der Testversion weiterarbeiten. Es sind keine weiteren Schritte notwendig.
# Testversion vs Vollversion
**Es gibt keinen funktionellen oder inhaltlichen Unterschied** zwischen Testversion und Vollversion eines Plugins oder Themes. Dir stehen daher bereits in der Testversion alle Funktionen des Plugins oder Themes zur Verfügung. Du kannst somint in Ruhe alle Funktionen ausprobieren und testen.
Daher ist nach dem Kauf der Vollversion auch keine Neuinstallation eines Plugins oder Themes notwendig.
Bei einer Testversion ist lediglich die Lizenz beschränkt. Nach dem Ablauf des Testzeitraums von 30 Tagen kannst Du entscheiden, ob Du das Plugin kaufen und weiter nutzen möchtest.
# Theme Kompilierung Fehler nach Update
## Problembeschreibung
Manchmal werden **neue Variablen** für neue Konfigurationen durch ein Update hinzugefügt.
Neue Veriablen werden in Shopware leider erst beim Öffnen des Theme-Managers bekannt gemacht und an die Datenbank gegeben.
Eine solche Routine beim Update gibt es leider nicht. Daher sollte beim Update eine Meldung erschienen sein mit folgendem Inhalt:
> "Update erfolgreich. Zum Abschluss des Updates bitte unbedingt den Theme Manager öffnen und erst danach das Theme erneut kompilieren. Vielen Dank!"
## Fehlermeldung:
Während der Bearbeitung von Shop "XYZ" ist ein Fehler aufgetreten: variable @NameDerVariable is undefined in file /var/www/html/custom/plugins/zenitXYZ/Resources/Themes/Frontend/XYZ/frontend/\_public/src/less/\_modules/detail.less in detail.less on line 158, column 13 156| 157| // product actions 158| & when (@detail-notepad = button) { 159| @media screen and (min-width: @tabletViewportWidth) { 160| nav.product--actions { 161| position: relative
## Lösungsvorschlag
Öffnen den Theme-Manager und speichere die Theme Konfiguration erneut ab - danach sollte die Kompilierung des Themes wie gewohnt durchlaufen.
# Emotion SEO Headline Element
# SEO Tools erkennen H1-H6 nicht
SEO-Tools: Content bzw. Quellcode der Einkaufswelten oder Ajax-Content wird nicht erkannt
Häufig wurden bereits Bedenken bei den mit Ajax-nachgeladenen Einkaufswelten und der Suchmaschinenoptimierung im Forum diskutiert.
Kurzum erkennen verschiedenen SEO Tools die Inhalte der Einkaufswelten nicht und melden daher, dass beispielsweise H1 Überschriften fehlen. Die Bots der Suchmaschinenbetreiber hingegen können mit den Einkaufswelten von Shopware umgehen und deren Inhalte indizieren.
Showpare empfiehlt hier daher ein anderes SEO Tool zu verwenden, welches auch per Ajax nachgeladene Inhalte analysieren kann.
Hier ein Auszug auf der Showpare Dokumentation zum Theme SEO Guide:
**SEO-Tools: Content bzw. Quellcode der Einkaufswelten oder Ajax-Content wird nicht erkannt**
Der Content einer Einkaufswelt wird nur in den Developer-Konsolen und nicht in der Quelltextansicht der Browser auftauchen.
Damit externe Crawler oder SEO-Tools den Quelltext einer Einkaufswelt erkennen, müssen diese Boilierplate-Code unterstützen. Der Google-Bot selbst tut dies.
Die Developertools der Browser oder beispielsweise SEO-Tools von Firmen wie Sistrix tun dies nicht. Deren Bots erkennen den in Einkaufswelten eingebetteten html-Content nicht. Dies ist kein Fehler von Shopware sondern liegt daran, dass die Tools in Ajax eingebetteten Content nicht erkennen.
Damit der Content von Einkaufswelten von Ihren SEO-Tools erkannt werden kann, muss das Tool in Ajax eingebetteten Content erkennen. Wir empfehlen daher zur Onpage-Analyse das kostenloses SEO Analyse Tool Ryte. Ryte erkennt den Einkaufswelten Quellcode optimal, so wie es auch der Google Mobile Crawler tut.
{% hint style="warning" %}
Verlasse dich diesbezüglich nicht auf die Aussagen solcher Tools beim Erfassen des Quellcodes Ihrer Einkaufswelten. Die Tools erfassen nur das, was sie auch verstehen.
{% endhint %}
Weitere Informationen:\
\
# Labels & Badges
# Lagerbestand Minimalwert Grenze
ab Version 1.4.1 steht dem Minimalwert auch eine Minimalwert-Grenze bereit
Über die **Anzeigeart (2)** können die genauen Lagerbestände verschleiert werden. Als Anzeigewert dient dann der **Anzeige ab (1)** Wert.
**Minimalwert ab (3)** bildet eine zusätzliche Bedingung für die Anzeige des Minimalwertes. Damit es es möglich, alle Bestände <= `10` mit dem exakten Wert abzubilden und alle Bestände darüber mit `10+` abzubilden.
{% hint style="warning" %}
Der **Minimalwert ab (3)** muss dazu natürlich größer sein, als **Anzeige ab (1)**.
{% endhint %}
Beispiel:
# Individuelle Labels
Über das Plugin können jedem Artikel bis zu drei individuelle Labels mit individuellem Tooltip angeheftet werden.
In der Plugin-Konfiguration kannst Du für jedes der drei Felder **Tooltip**, **Farbe** und die **Anzeige auf der Detailseite** grundlegend konfigurieren. In den **Artikelstammdaten** kannst Du dann den Wert für jedes Label einzeln setzen. Dort ist es auch möglich, die Tooltips zu überschreiben.
# Icons in den individuellen Labels
Auch Icons können in den Labels angezeigt werden. Bediene Dich dazu einfach den Shopware Icons oder den in Deinem Theme hinterlegten Icon-Sets. Shopware Icons unter:
Code-Beispiel: HTML
```
```
# Individuelle Labels bei Varianten
Die individuellen Labels können auch auf Variantenartikel angewendet werden und so im Frontend beispielsweise auf der Detailseite beim Variantenwechsel ebenfalls angezeigt werden.
## Backend
Dazu gibt es in der jeweiligen Variante des Artikel die gleichen Felder zur Pflege der individuellen Labels wie im Artikel Stamm. Wähle dazu einfach die jeweilige Variante aus und pflege die individuellen Labels.
# Parallax Banner
# Allgemeines
## Parallax Banner
Der Parallax Effekt gehört zu den beliebtesten Effekten im Webdesign. Technisch gesehen lässt dieser Effekt das Hintergrundbild mit einer geringeren Geschwindigkeit im Vergleich zu dem Vordergrundbildbewegen, wenn man die Seite nach unten scrollt. Durch diesen Effekt entsteht ein Gefühl von Tiefe und Dynamik.
## Parallax Verstehen
Beim Parallax-Effekt wird das Bild an einer festen Position im Browserfenster **fixiert** und erweckt dadurch beim Scrollen den Anschein, dass die Inhalte oder Bilder in den Ebenen darüber über das Hintergrundbild geschoben werden. *(background-attachment: fixed)* ist daher die Basis für den Parallax Effekt.
Zusätzlich werden die fixierten Bilder und Ebenen mit Javascript beim Scrollen nach oben oder unten bewegt *(Konfiguration: Geschwindigkeit)*. So können die Bilder in unterschiedlicher Richtung aneinander vorbeigeschoben werden, wie die Schuhe in unserer Demo.
### Hinweise
**background-attachment: fixed** ist relativ zum Viewport. Das bedeutet, dass sich die Größe des Bildes nach dem Browser-Fenster richtet und nicht nach der Größe des Einkaufswelten Elements im Raster.
* Der Effekt eignet sich besonders für vollflächige Einkaufswelten.
* Es können mehrschichtige, aber auch **einfachere Banner Elemente** mit nur einem Bild erzeugt werden. Es besteht kein Zwang mehrere Bilder und Ebenen zu verwenden.
* Der Einkaufswelten Modus **Fluid** eignet sich am besten für diesen Effekt.
* Der Einkaufswelten Modus **Resize** lässt aus technischen Grünen keine fixierte Positionierung von Bilder zu. Die Bilder beziehen sich in Ihrer Größe daher nicht auf den Viewport des Browsers, sondern auf die Größe des Einkaufswelten-Elements.\
**Interessant:** Kleinere und nebeneinanderliegende Parallax-Banner sind möglich. Die einzelnen Bilder lassen sich beim Scrollen durch die Konfiguration **Geschwindigkeit** beim Mitscrollen beschleunigen oder bremsen.
* Die über Bild 1 (Hintergrundbild) liegenden Bilder sollten Bilder mit transparentem Hintergrund sein - Dateiformate hierzu wären \*.png oder \*.gif
{% hint style="success" %}
**Hilfreich:** Verwende die Einkaufswelten Vorlage um einen Banner zu erstellen.
{% endhint %}
# Einrichtung
Nachdem Du eine Einkaufswelt angelegt hast kannst, findest Du im Reiter "Elemente" ein neues Element "Parallax Banner" oder "Parallax Text Slider Banner". Ziehe dieses Element in das rechts stehende Grid und spanne es auf gewünschte Größe auf.
{% hint style="info" %}
Die Erläuterungen richten sich nach unserer Demo und die mitgelieferte installierte Einkaufswelten-Vorlage unter
{% endhint %}
## Bildmaterial
Das Bildmaterial für den Hintergrund sollte `2000x2000` Pixel betragen. Quadratische Bilder eignen sich bei dem rechteckigen Browser-Fenster (Viewport) sehr gut, da Bilder beim Scrollen verschoben werden. Rechteckige Bilder im Querformat eignen sich daher nicht, da die obere Kante des Bildes beim Scrollen zu sehen sein würde.
Die Bilder in den übrigen Ebenen (Bild 2 und Bild 3) sollten transparente PNG oder GIF Dateien sein. Eine Vorgabe für das Seitenverhältnis besteht hier nicht. Anders als beim Hintgerundbild sollten hier Objekte gezeigt werden, welche sich über den Hintergrund bewegen.
## Konfiguration - Bildgröße
Die Bildgröße kann für jedes Bild einzeln eingestellt werden. Dabei können alle Befehle eingegeben werden, welche CSS zur Verfügung stellt. **Wichtig**: Ist die `attachment` Eigenschaft auf `fixed` gesetzt, was im Einkaufsweltenmodus **Fluid** der Fall ist, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs.
* **auto** - Das `auto` Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
* **cover** - Das `cover` Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.
* **contain** - Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.
* **Pixelwerte z.B.: 100px 100px** - Ein Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.
* **Prozentwerte** z.B.: 80% 80% - Ein Wert, der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert. Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements. Negative Prozentwerte sind nicht erlaubt.
Beispiel:
In unserer [Demo](http://plugins.zenitdesign.de/sw-demo-4/hoehenluft-abenteuer/) haben wir das Hintergrundbild für die Schuhe auf \[cover] gesetzt und so über den gesamten Viewport des Browser gestreckt. Für die kleineren Viewpors auf Smartphone oder Tablets haben wir das Banner-Element erneut erzeugt und den Wert für den Hintergrund für die Breite auf auto und die Höhe auf 120% gesetzt \[auto 120%].
## Konfiguration - Geschwindigkeit
Die Geschwindigkeit des Bildes beim Herunterscrollen.
* Je näher der Wert bei 0 liegt, desto schneller wird das Bild bewegt.
* **Negative** Werte bewegen das Bild nach unten.
* **Positive** Werte bewegen das Bild nach oben.
* Wert 0 fixiert das Bild und beschleunigt es nicht.
```
Sinnvolle Werte: [ -10 bis 10 ] - z.B.: 5
```
Beispiel:
* 5 = Das Bild wird mit mäßiger Geschwindigkeit nach oben bewegt
* -3 = Das Bild wird mit schneller Geschwindigkeit nach unten bewegt
* 0 = Das Bild bleibt stehen
## Konfiguration - Offset Y
Mit Offset Y ist die Positionierung des Bildes vom oberen Rand zu verstehen. Damit kannst Du dein Bild nach oben oder unten setzen, um es für seine Bewegung beim Scrollen auszurichten.
* Eingabe in Pixeln
* Werte können positiv und negativ sein
Beispiel 1:
In unserer [Demo](http://plugins.zenitdesign.de/demo-4/hoehenluft-abenteuer/) haben wir so den Schuh für den link Fuß auf der obersten Ebene mit einem negative Wert `-400` um 400 Pixel nach oben verschoben. Beim Herunterscrollen wird dieser nun schneller nach unten bewegt als gescrollt wird und überlagert dadurch ab einem bestimmten Punkt den Schuh des rechten Fußes.
Beispiel 2:
Abhängig von der Größe sowie Richtung und Geschwindigkeit (Feld "Geschwindigkeit") des Bildes sollte man den Offset Wert verwenden. Wird das Bild z.B. nach unten bewegt sollte es zuvor durch einen negativen Offset-Wert etwas weiter nach oben gesetzt werden. In unserer [Demo](http://plugins.zenitdesign.de/demo-4/hoehenluft-abenteuer/) haben wir dies mit dem dunklen Hintergrund bei den Schuhen realisiert, da man beim Herunterscrollen sonst die obere Kante des Bildes erreichen und sehen würde.
## Konfiguration - Overlay
Das Overlay ist eine farbige Ebene, welche zwischen den Bildern und dem optionalen Text liegt. Sie dient dazu, die Lesbarkeit des Textes zu verbessern und die Bilder gegebenenfalls zu "dämpfen".
# Responsive Einstellungen
Je nach Komplexität, Konfiguration und Bildmaterial kann es sinnvoll sein, das eingesetzte Parallax Element für andere Viewports (Mobile Portrait, Mobile Landscape usw.) erneut zu definieren und mit leicht anderen Einstellungen einzurichten. Dazu ist es möglich das konfigurierte Element auf einem Viewport [auszublenden ](http://community.shopware.com/Einkaufswelten_detail_1852.html#Ausgeblendete_Elemente)und dafür ein neues Parallax Element einzurichten. Dies ist in der Regel nur bei komplexeren Parallax Bannern notwendig, wie in unserer [Demo ](http://plugins.zenitdesign.de/sw-demo-4/hoehenluft-abenteuer/)mit den Schuhen.
# Kleine Elemente, nicht seitenfüllende Darstellung
Prinzipiell wirkt der Parallax-Banner am besten bei großflächigen oder gar seitenfüllenden Darstellungen. Sollen dennoch mehrere Parallax Banner nebeneinander oder nicht seitenfüllende Parallax Banner dargestellt werden, ist folgendes zu beachten:
* Im Modus "**Fluid**" sind die Bilder für den Effekt fixiert (**background-attachment: fixed)** und damit relativ zum Viewport. Die Bilder und Größen orientieren sich daher nicht an den aufgespannten Elementen.
**Lösung:** Verwende den Einkaufswelten Modus "**Resize**". Hier werden die Bilder nicht fixiert und orientieren sich an der Größe des aufgespannten Elements im Grid. Die einzelnen Bilder lassen sich beim Scrollen durch die Konfiguration **Geschwindigkeit** beim Mitscrollen beschleunigen oder bremsen, sind jedoch nicht fixiert.
# Nachrichten Banner
# Bildgröße und Bildformat
In den Einstellungen des Banners kann eine Bilddatei für den Hintergrund hochgeladen werden. Die angezeigte Hintergrundgröße und Positionierung können dabei über die Konfigurationen "Hintergrund Größe" und Hintergrund Position" eingestellt werden. Wie auch bei den Einkaufswelten von Shopware gibt es kein Allgemein-Rezept für die Bildgröße des Banners, da hier viele Faktoren wie etwa das Format des Banners, die Größeneinstellung und Positionierung des Bildes eine Rolle spielen.
**Hintergrund Größe** - diese Eigenschaft definiert die Abmessungen eines Hintergrundbildes.
**auto** - Das *auto* Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
**cover** - Das *cover* Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.\
**contain** - Das *contain* Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.
**Hintergrund Position** - diese Eigenschaft bestimmt die Position des Hintergrundbildes im Bereich des Banners.
In den meisten Fällen sollen die Hintergrundbilder füllend dargestellt, sodass diese den kompletten Banner Bereich ausfüllen. Hier greift die Eigenschaft für die Hintergrund Größe *cover*. Für diesen Fall sind Bildgrößen ratsam, welche prinzipiell die komplette Browserbreite füllen können. Eine gängige Größe ergibt sich aus der Auflösung vieler heutiger Monitore, sodass die Breite der HD-Aulösung als Richtwert verwendet werden kann.
{% hint style="warning" %}
**1920** Pixel in der Breite ist hier eine gute Basis.
{% endhint %}
Die Höhe wiederum ist abhängig vom Motiv, sollte jedoch nicht niedriger als die Höhe des Banners gewählt werden. Insbesondere die kleinen mobilen Geräte wie Smartphones stellen den Banner nicht mehr horizontal, sondern eher quadratisch oder sogar hochkant dar, sodass das Bildformat diese Anforderung erfüllen sollte.
# Countdown Banner
# Anpassen der Texte durch Textbausteine
Um die Übersetzung und die Anpassung von Texten in Templates zu vereinfachen benutzt Shopware Textbausteine, die im Template durch Smarty-Variablen abgerufen werden. Somit müssen für Änderungen des Textes keine Anpassungen am Plugin vorgenommen werden. Das Modul zur Pflege der Textbausteine des Shops befindet sich unter *Einstellungen > Textbausteine*.
Die Texte für den Countdown-Banner sind als Textbausteine angelegt und können einfach über das Backend angepasst werden.
Beispiel:
Suche den Textbaustein **zenitSaleBarCountdownOffersIn** um den Text "**Angebote in**" anzupassen.
Übersicht der Textbausteine (Name = "Wert"):
```
countdownWeeks = "Wochen"
countdownDays = "Tage"
countdownHours = "Std."
countdownMinutes = "Min."
countdownSeconds = "Sek."
zenitSaleBarCountdownOffersIn = "Angebote in:"
zenitSaleBarCountdownOffersFor = "Angebote noch:"
```
# Bildgröße und Bildformat
In den Einstellungen des Banners kann eine Bilddatei für den Hintergrund hochgeladen werden. Die angezeigte Hintergrundgröße und Positionierung können dabei über die Konfigurationen "Hintergrund Größe" und Hintergrund Position" eingestellt werden. Wie auch bei den Einkaufswelten von Shopware gibt es kein Allgemein-Rezept für die Bildgröße des Banners, da hier viele Faktoren wie etwa das Format des Banners, die Größeneinstellung und Positionierung des Bildes eine Rolle spielen.
**Hintergrund Größe** - diese Eigenschaft definiert die Abmessungen eines Hintergrundbildes.
**auto** - Das *auto* Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
**cover** - Das *cover* Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.\
**contain** - Das *contain* Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.
**Hintergrund Position** - diese Eigenschaft bestimmt die Position des Hintergrundbildes im Bereich des Banners.
In den meisten Fällen sollen die Hintergrundbilder füllend dargestellt, sodass diese den kompletten Banner Bereich ausfüllen. Hier greift die Eigenschaft für die Hintergrund Größe *cover*. Für diesen Fall sind Bildgrößen ratsam, welche prinzipiell die komplette Browserbreite füllen können. Eine gängige Größe ergibt sich aus der Auflösung vieler heutiger Monitore, sodass die Breite der HD-Aulösung als Richtwert verwendet werden kann.
{% hint style="warning" %}
**1920** Pixel in der Breite ist hier eine gute Basis.
{% endhint %}
Die Höhe wiederum ist abhängig vom Motiv, sollte jedoch nicht niedriger als die Höhe des Banners gewählt werden. Insbesondere die kleinen mobilen Geräte wie Smartphones stellen den Banner nicht mehr horizontal, sondern eher quadratisch oder sogar hochkant dar, sodass das Bildformat diese Anforderung erfüllen sollte.
# Datenschutzhinweise
# Kein Inhalt im Datenschutz-Popup
### Problembeschreibung
Ist in der Plugin-Konfiguration eingestellt, dass die Datenschutzerklärung in einem Popup geöffnet wird. In manchen Fällen kann es vorkommen, dass kein Inhalt in das Pop geladen wird.
### Erläuterung
Beim Aufrufen des Popups werden Inhalte per Ajax nachgeladen. Dein Shop läuft in Teilen in SSL verschlüsselung. Deine Datenschutzseite jedoch ohne SSL. In eine SSL verschlüsselte Seite können keine Inhalte aus einer nicht-SSL verschlüsselten Seite hineingeladen werden. Daher bleibt das Popup auf allen SSL verschlüsselten Seiten leer.
### Lösungsvorschlag:
Aktiviere SSL global in deinem Shop.
Navigiere zu Einstellungen > Grundeinstellungen > Shopeinstellungen. Unter "Shopeinstellungen" finden Sie den Punkt "Shops". Hier werden Deine Shop angezeigt. Wähle den Hauptshop mit einem Klick auf das Stiftsymbol aus.
Nun setze den Haken bei "Überall SSL verwenden". So wird die gesamte Seite per https aufgerufen.
# Google Schriften / Fonts Changer
# Schriften auswählen und einrichten
Besuche die Seite von Googel Fonts
{% embed url="" %}
### Schriftart aussuchen
Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt:
Klicke auf das Plus Symbol zum Hinzufügen der Schrift - nun erscheint unten ein dunkler Balken
Klicke auf den dunklen Balken und kopiere Dir die folgenden Informationen
### Link in der Plugin Konfiguration hinterlegen
Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: ``
Kopiere diesen Text in das entsprechende Feld deiner Plugin-Konfiguration
Notiere Dir nun den Namen der Schriftfamilie - z.B.: **'Domine', serif**
Kopiere auch diesen Text in das entsprechende Feld deiner Plugin-Konfiguration
### Speichern & Kompilieren
Speichern der Theme-Konfiguration und Theme Kompilieren
{% hint style="warning" %}
Achte darauf, abschließend das Theme zu kompilieren, damit die Schriften in das Theme integriert werden.
{% endhint %}
# Schriften in Digital Publishing nutzen
Manchmal möchte man die über das Plugin implementierten Google-Schriftarten auch in Digital Publishing verwenden. Da das Plugin die Schriften für das Frontend bereitstellt und dort global genutzt werden können, ist dies durch Eintragen der Schriftfamilie in Digital Publishing möglich.
Da das Plugin nicht direkt Digital Publishing erweitert und nur im Frontend "wirkt", stehen die Schriften nicht in dem Auswahlfeld zur Verfügung. **Durch Eintragen der Schriftart können diese dennoch genutzt werden.**
Trage zum Verwenden der Schrift daher einfach den Schriftnamen in das Feld Schriftart wie im Screenshot zu sehen. Da die Schriften nur im Frontend bereitgestellt werden, sind diese im Backend innerhalb der Vorschau nicht zu sehen.
# Banner Mapping Advanced
# Erstellen eines Bild-Mappings
Das Plugin Banner Mapping Advanced greift auf die erstellten Mappings der Einkaufswelten Banner zu. Das Mapping ist eine Standard-Funktion von Shopware und kann in den Einkaufswelten Bannern Elementen erstellt werden.
Navigiere dazu unter **Marketing** > **Einkaufswelten**. Hier kannst Du eine bestehende Einkaufswelt bearbeiten oder eine neue Einkaufswelt anlegen. (Weitere Informationen zum Anlegen einer Einkaufswelt findest Du hier: )
Nachdem Du eine Einkaufswelt angelegt hast kannst Du ein Banner Element im Raster der Einkaufswelt platzieren. Über die Felder des Elementes kannst Du ein Bild hochladen, welches als Banner genutzt wird.
Im Banner Element kannst Du ein Banner einbinden und entsprechend verlinken, das Link-Ziel definieren, einen Titel vergeben und eine CSS-Klasse auf das Element setzen. Wenn hier ein Banner hochgeladen wird, erscheint dies als Vorschau im unteren Bereich des Elements. Die Vorschau enthält ein 3x3 Raster, dies erfährt Bedeutung, wenn Deine Einkaufswelt den fluiden Effekt nutzt. Der Effekt sieht vor, Elemente immer zu füllen, dazu wird an einigen Stellen auch Bildmaterial abgeschnitten. Über das Setzen des Rasters kann hierzu ein Ausgangpunkt für den Zoom verwendet werden. So wird sichergestellt, dass der wichtigste Inhalt des Bildes stets zu sehen bleibt. Setze diese Einstellung durch Klicken in das entspechende Feld im Raster.
Weiter kann im Banner Element noch die Mapping-Funktion genutzt werden. Dadurch ist es möglich, einzelne Bereiche des Banners zu verlinken und z.B. auf verschiedene Artikeldetailseiten zu verweisen. Per Klick auf **Bild-Mapping anlegen:** öffnet sich die folgende Ansicht:
Durch Klicken auf den Button "**Neues Mapping Anlegen**" **(A)** können beliebig viele Mappings angelegt werden. Diese erscheinen als Liste unterhalb des Bildes **(B)**. Im Folgenden erscheint ein Rechteck **(1)**, welches über die Ziehpunkte verschoben und vergrößert oder verkleinert werden kann:
Hier wird das Banner in Originalgröße angezeigt und Du kannst nun neue Mappings erstellen. Diese kannst Du frei auf dem Banner **(1)** platzieren und über die dazugehörige Zeile im Mapping **(2)** verlinken. Hierbei kann der **(3)** Link-Typ (intern, extern), **(4)** Titel, sowie **(5)** "Titel als Tooltipp" konfiguriert werden. Das Mapping verhält sich analog zum Zoom. Es zoomt also dynamisch mit, sodass die Positionen im Bild weiterhin bestehen bleiben.
# Payment / Shipping Bar
# Icon Tooltips einrichten
Dazu muss in der Konfiguration des Plugins die Funktion aktiviert sein. Nachdem die Option der Tooltips aktiviert wurde, muss gegebenfalls einmalig das Frontend des Shops geladen werden, damit die hinzugefügten Textbausteine im Backend registriert werden.
Die Tooltips werden im Backend unter den Textbausteinen abgelegt: **"Einstellungen" > "Textbausteine" im Namespace "frontend" > "plugins" > "index" > "payment\_icons" / "shipping\_icons"**. Für jedes angelegte Icon findet sich dort ein Snippet, welches in allen installierten Sprachen gesetzt werden kann. Sobald der Textbaustein einen Inhalt besitzt, wieder diese als Tooltip im Frontend Ihres Shops am entsprechenden Icon ausgegeben. Sollten Sie einen Tooltip nicht mehr wünschen, können Sie den Textbaustein löschen oder einfach leeren.
# Icons werden in Subshops nicht angezeigt
## **Problembeschreibung**
Ein Subshop soll mit den gleichen Icons befüllt werden wie der Hauptshop. Im Subshop werden die Icons der Zahlungs- oder Versandanbieter nicht angezeigt, obwohl die Konfiguration auch für den Subshop getätigt wurde.
## **Mögliche Ursache**
Z.B.: Unzulässiges Vorgehen: **Copy & Paste** Dabei wird häufig der Inhalt aus dem Auswahlfeld von Subshop X kopiert und in das Auswahlfeld des Subshop Y übertragen. Bei Shopware Auswahlfeldern ist dies jedoch eine unzulässige Vorgehensweise, da so keine Verknüpfung der Werte zustande kommt.
## **Lösungsvorschlag**
Icons mit der Maus aus der Liste des Auswahlfeldes wählen.
# Falsche Icons nach Update
## **Problembeschreibung**
Die Icons werden falsch dargestellt, weil in der kompilierten und gecachten Theme CSS-Datei alte Daten vorliegen. Beim Update des Plugins aktualisieren sich die Konfiguration und die LESS/CSS Dateien. Damit aber die Änderungen der LESS/CSS Dateien im Frontend landen, ist ein Löschen des Caches und ein erneutes Kompilieren notwendig. Der Aufruf der Icons aus der Konfiguration heraus, muss dagegen nicht durch ein Kompilieren an das Frontend übergeben werden. So ergibt sich ohne erneute Kompilierung nach dem Update im Frontend ein Mix aus alten und neuen Daten.
### **Vereinfachtes Beispiel**
In der Theme Konfiguration steht für das Vorkasse-Icon der Code "xyz". In der noch nicht neu kompilierten Theme CSS-Datei, welche im Frontend für die Anzeige der Icons zuständig ist, steht "xyz" jedoch noch für das EC-Lastschrift-Icon. Wenn Du nun den Cache leerst und das Theme neu kompilierst, erneuert sich die Theme CSS-Datei und "xyz" steht dann korrekterweise für das Vorkasse-Icon.
## **Lösungsvorschlag**
1. Cache leeren
2. Theme neu kompilieren
# Could not convert database value
## Problembeschreibung
Das Plugin kann nicht mehr bearbeitet werden und erzeugt beim öffnen einen Fehler:
> Ups! Ein Fehler ist aufgetreten! Die nachfolgenden Hinweise sollten Ihnen weiterhelfen. Could not convert database value **"**s:50:**"**DOMAIN..." to Doctrine Type object in vendor/doctrine/dbal/lib/Doctrine/DBAL/Types/ConversionException.php on line 46 Stack trace: #0 vendor/doctrine/dbal/lib/Doctrine/DBAL/Types/ObjectType.php(59): Doctrine\DBAL\Types\ConversionException::conversionFailed('s:50:"...', 'object') #1 vendor/doctrine/orm/lib/Doctrine/ORM/Internal/Hydration/AbstractHydrator.php(303): Doctrine\DBAL\Types\ObjectType->convertToPHPValue('s:50:"...', Object(Doctrine\DBAL\Platforms\MySqlPlatform)) #2 \[...]
Ein solcher Fehler kann entstehen, wenn in die Konfigurationsfelder des Plugins ein Sonderzeichen oder ein Zeichen mit einer **fremden Codierung** eingetragen wurde, welches die Datenbank nicht verarbeiten kann.
In der Datenbanktabelle **s\_core\_config\_values** werden die Werte der Plugin-Konfigurationen hinterlegt. Hier muss über die Datenbank das Feld z.B. durch Suchen des Inhalts ausfindig gemacht und korrigiert werden.
## Das Problem
Einige Felder in der Datenbank sind mit einer Serialisierung gesichert. In diesem konkreten Beispiel passt die Zeichenzahl "50" nicht auf die tatsächliche Zeichenzahl im Wert des Feldes. (s:50:"INHALT DES FELDES").
## **Lösungsvorschlag**
* Einspielen eines Backups vor der Eintragung der invaliden Zeichen in Shopware
oder
* Sollte Möglichkeit 1 keine Option sein, muss hier manuell in die Datenbank eingegriffen werden.
* **Achtung:** Eine Deinstallation bzw. Neuinstallation des Plugins löst das Problem nicht, da hier in der Datenbank ein invalider Eintrag existiert, der nicht verarbeitet werden kann.\
\
Navigiere dazu in die Tabelle **s\_core\_config\_values** und suche das entsprechende Konfigurationsfeld, in welches Du die invaliden Zeichen eingetragen hast.
* Dieses Feld kannst Du bearbeiten und den Wert auf die richtige Zeichenzahl korrigieren oder herauslöschen.
* Danach sollte das Plugin wieder de- und installiert werden bzw. weiter genutzt werden können. Prinzipiell sollte darauf geachtet werden Shopware keine Icons oder fremdcodierte Inhalte einzufügen, bei welchen nicht sicher gestellt ist, dass die Datenbank damit umgehen kann.
# Row size too large. The maximum row size for the used table type, not counting BLOBs
## Problembeschreibung
Beim Installieren des Plugins erscheint folgende Fehlermeldung:
```sql
An exception occurred while executing 'ALTER TABLE `s_articles_attributes` ADD `stratus_attr_youtube_id` VARCHAR(500) NULL DEFAULT NULL': SQLSTATE[42000]:
Syntax error or access violation: 1118 Row size too large.
The maximum row size for the used table type, not counting BLOBs, is 65535. This includes storage overhead, check the manual. You have to change some columns to TEXT or BLOBs
```
Beim Installieren von Plugins und Themes können sogenannte **Freitextfelder / Attribute** erzeugt werden. Das sind Datenbankfelder, welche in von Shopware vorgegebene Tabellen hinzugefügt werden können.
{% embed url="" %}
Was sind Freitextfelder in Shopware?
{% endembed %}
Zwar kann man theoretisch tausend Spalten haben - diese dürfen aber ingesamt nicht mehr als 65535 haben. Die Freitextfelder sind entweder zu großzügig von Shopware definiert, oder es gibt zu viele große Felder.
## Das Problem
Das sogenannte Attributsystem in Shopware setzt beim Anlegen der Felder den Datentyp und deren Größe anhand der ausgewählten Feldtypen (Einfacher Text, Größerer Text, Checkbox, usw.) **automatisch**.
Die Fehlermeldung besagt nun (vereinfacht), dass die maximale Anzahl dieser Felder erreicht ist, da einige Datenbanken, wie die des Typs InnoDB, eine maximale "row size" von 65535 haben.
## Problemlösung:
Überflüssige und nicht benötigte Freitextfelder löschen. Stellt dies keine Option dar, sollte der Hinweis in der Fehlermeldung befolgt werden und die Felder in der Datenbank verkleinert werden. Hier sollte der Hoster zu Rate gezogen werden.
### Referenzen:
{% embed url="" %}
{% embed url="" %}
{% embed url="" %}