Eigene Bildelemente (Widgets) integrieren (Beispiel am Shopauskunft Widget)

Gestern stand ich vor der Problematik, ein Widget von Shopauskunft einzubauen. Ein Bewertungsportal für Onlineshops, welches wir über den Händlerbund nutzen können.

Leider gibt es dazu kein Plugin über den Shopware Store. Also mussten die Codes manuel platziert werden.

Dazu habe ich zunächst das Shopauskunft Widget im Backend der Seite konfiguriert.

Danach steht der Code etwas tiefer zur Verfügung.

Im nächsten Schritt habe ich diesen Code im Footer eingefügt. Startet Euer ftp Programm (z.B. Filezilla) und sucht unter:

/Themes/Frontend/EuerThemeName/frontend/index

Ich setze an dieser Stelle voraus, dass Ihr Euer eigenes Theme schon nutzt, anderenfalls wären Eure Änderungen nicht Updatesicher. Ansonsten stellt Shopware diese Dokumentation zur Verfügung:

Änderungen am Template vornehmen

Ich selber lege immer vor Änderungen eine Sicherheitskopie der aktuellen Datei an und ergänze den Namen mit dem Tagesdatum.

Mit einem Texteditor (z.B. Notepad++) den o.g. Code einfügen.

Nun wird das Widget im unteren Teil Deines Shopware Onlineshops angezeigt. Sieht natürlich nicht so dolle aus. Daher stellt Shopauskunft einen kleinen Codeschnipsel zur Verfügung, der dieses Widget unten rechts fest platziert:

@media only screen and (min-width: 768px)  {   div#shopauskunft_widget {      display: block;      position: fixed;      right: 10px;      bottom: 10px;   }}

Aber wohin damit?

Dazu kann im Showare Backend eine zusätzliche css Datei angegeben werden. Ladet zunächst eine neue css Datei mit dem o.g. Code via ftp hoch.

Jetzt muss man Shopware 5 nur noch mitteilen, dass diese Datei genutzt werden soll. Dazu geht Ihr ins Backend unter Einstellungen/ Theme Manager…

… wählt Euer Theme und klickt auf Theme konfigurieren.

Unter dem Tab-Reiter Konfiguration…

… tragt Ihr unter „Weitere CSS-Dateien“ Eure css Datei ein:

<link href=“/themes/Frontend/EuerThemeName/frontend/_public/src/css/shopauskunft.css?template=itintime_170425&is_preview=on“ media=“all“ rel=“stylesheet“ type=“text/css“ />

Jetzt noch den Shopcache leeren und Theme kompilieren.

Et voila… Euer Widget sieht klasse aus! 🙂

Für das Versenden der Bewertungsmails ist noch das RBA-Widget von Shopauskunft notwendig. Wie das eingerichtet wird, zeige ich Euch im Beitrag:

RBA-Widget von Shopauskunft in Shopware 5 installieren