eKomi Badge einbinden

Hier möchten wir euch einmal zeigen wie man ein Kundenbewertungen-Widget von eKomi in seinen Shopware Shop einbinden kann. Hierfür ist zunächst ein kostenpflichtiger Account zu registrieren. Wir gehen hier jetzt schonmal davon aus, dass wir bereits über einen Account verfügen und bestenfalls auch schon ein paar Bewertungen eingesammelt haben.

Inhaltsübersicht:

1. eKomi bei Shopware einbinden – Manager Account
2. eKomi bei Shopware einbinden – Bewertungen Dashboard
3. eKomi bei Shopware einbinden – Zertifikat Seite & Widget Seite
4. eKomi Widget rechts unten
5. Widget rechts unten – Positionierung
6. Widget rechts unten – optische Optimierung
7. Widget rechts unten – auf mobiler Ansicht links
8. Alternativ Widget für mobile Ansicht
9. Alternativ Widget für mobile Ansicht – Optimierung
10. Magisches JavaScript
11. Weiterführende Links

1. eKomi bei Shopware einbinden – Manager Account

In diesem Fall loggen wir uns zunächst im Manager Bereich für eKomi Kunden an. Diesen finden wir unter: https://lite.ekomiapps.de/users/sign_in

Dort klicken wir im nächsten Schritt auf den grünen eKomi Connect Button, sodass sich ein zusätzliches Login Fenster öffnet:

Hier geben wir nun unsere Login-Daten ein. Wenn alles stimmt kommen wir als erste in unsere Shop-Übersicht. Hier bekommen wir dann unseren Shop / unsere Shops aufgelistet. In diesem Account sind zum Beispiel 4 Shops vorhanden von denen zwei noch gar nicht einer 26x und einer 75x bewertet wurde. Bei diesen beiden Shops würde es sich also schon lohnen das Badge einzubinden, um etwas mehr Vertrauen in unserem Shopware Shop zu schaffen.

2. eKomi bei Shopware einbinden – Bewertungen Dashboard

Da wo der graue Block ist stehen normalerweise die Firmendaten, die wir an dieser Stelle nicht veröffentlichen. Um zu den Badge Codes zu gelangen klicken wir bei dem entsprechendem Projekt, wir nehmen hier einmal die Seite mit den 75 Bewertungen, zunächst einmal auf den Link zum Dashboard.

3. eKomi bei Shopware einbinden – Zertifikat Seite & Widget Seite

Hier sehen wir nun den Durchschnitt der Bewertungen sowie noch ein paar zusätzliche Informationen und Links zu allen möglichen Bereichen die uns noch so interessieren könnten. Aktuell ist jedoch nur ein Link interessant für uns, nämlich der zweite von unten in der Sidebar. Sprich wir klicken hier einmal auf Zertifikat-Seite.

Hier seht ihr weiter unten normalerweise dann eure Firmendaten, die wir in diesem Beispiel wieder ausgeblendet haben. Wichtig ist für uns aber auch nur der Header in dem sich nun die Links zu den Widgets und zu den erweiterten Widgets befinden.

Wir werfen als Erstes einen Blick in den (normalen) Widgets Bereich. Hierbei werden wir als erstes dieses Widget hier versuchen in die Seite zu integrieren:

Es gibt knapp 10 verschiedene Widgets aber dieses hier ist besonders beliebt und passt uns gerade in den Kram.

4. eKomi Widget rechts unten

Den Code werden wir in der index.tpl Datei einbinden. Falls wir in unserem Child-Theme noch keine index.tpl Datei haben, legen wir diese zunächst einmal an und kopieren das hier in die 1. Zeile:

{extends file="parent:frontend/index/index.tpl"}


Das dorgt dafür, dass alle übrigen informationen aus dem Eltern-Theme übernommen werden. Im Folgenden kopieren wir dann diesen Block hier in unser Theme:


{* Anpassung für EKomi Widget *}
{block name="frontend_index_header_javascript_jquery"}

{$smarty.block.parent}
{/block}


Und über der Zeile mit dem $.smarty.block.parent Code binden wir nun den Code für das Widget ein. Zusätzlich empfiehlt es sich noch einen umschließenden div Bereich einzubinden, um später noch die Position etwas anzupassen. Das würde dann z.B. so aussehen:


{* Anpassung für EKomi Widget *}
{block name="frontend_index_header_javascript_jquery"}

Hier kommt der Code rein

{$smarty.block.parent}
{/block}


Also, genau dazwischen kommt jetzt der Code rein. Dann speichert ihr die Datei und kompiliert euer Theme. Kopiert den ganzen Block und fügt es da ein wo „Hier kommt der Code rein“ steht und löscht vorher den Text, falls ihr mit Copy & Paste arbeitet.

Zusatz-Tipp: Wer es besonders ordentlich machen will, kann an dieser Stelle eine zusätzliche TPL Datei anlegen, wo der Code reinkopiert, und von dort aus in die index.tpl Datei importiert wird. Das macht Sinn, wenn ihr zahlreiche Anpassungen an der index.tpl vornehmen und dabei die Übersicht behalten wollt.


{* Anpassung für EKomi Widget *}
{block name="frontend_index_header_javascript_jquery"}
{include file='frontend/index/ekomi2gether.tpl'}
{$smarty.block.parent}
{/block}


Die Datei ekomi2gether.tpl muss dann auf der gleichen Ebene wie die index.tpl liegen.

5. Widget rechts unten – Positionierung

Bindet man das Widget auf diese Weise ein, dann wird es zunächst einmal unter dem Footer angezeigt, was natürlich nicht wirklich Sinn der Sache ist:

Was tun wir? Genau – wir legen etwas CSS Code in unserer LESS Datei an. Das kann die all.less oder auch eine gesonderte LESS Datei beispielsweise namens ekomi2gether.less sein. Der Inhalt sieht dann folgendermaßen aus.


.ekomi2gether-rechtsunten {
position: fixed;
right: 10px;
bottom: 40px;
}


Hiermit fixieren wir das Widget rechts unten in der Mitte mit einem Abstand von 20px nach rechts und 40px nach unten. Ist es zu weit rechts überkreuzt es sich unschön mit der Scrollbar und zu weit unten lauern gerne mal die Cookie-Meldungen.

Also hier ist unser Ergebnis:

6. Widget rechts unten – optische Optimierung

Das sieht schonmal nicht schlecht aus. Was wir jetzt noch machen können ist, der Box einen kleinen Schatten und damit einen 3D Effekt zu verpassen. So sieht es aus als würde das Widget über der eigentlichen Seite schweben. Zudem geht es dann unter grauem Hintergrund optisch nicht so schnell unter.

Für diesen zweck können wir unserer Klasse einen box-shadow hinzufügen:


.ekomi2gether-rechtsunten {
position: fixed;
right: 20px;
bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 11px 3px !important;
}


Und wer die Box gerne noch ein Stück abrunden möchte, der kann dafür folgenden Code verwenden um z.B. einen Radius von 9px zu erwirken:


.ekomi2gether-rechtsunten {
position: fixed;
right: 20px;
bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 11px 3px !important;
border-radius: 9px;
.standard130170 {
border-radius: 9px;
}
}


mit diesen kleinen Anpassungen seht unsere Box dann gleich wie neu geboren und viel besser als vorher aus.

7. Widget rechts unten – auf mobiler Ansicht links

nachdem es auf dem Desktop jetzt schon ganz gut aussieht, kümmern wir uns als nächstes um die mobile Ansicht. Hier soll das Widget nichts recht, sondern links unten angezeigt werden. Hierfür benötigen wir eine zusätzliche Zeilen in unserem LESS Code.


.ekomi2gether-rechtsunten {
position: fixed;
left: 20px;
bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 11px 3px !important;
border-radius: 9px;
.standard130170 {
border-radius: 9px;
}
}
// AB @tabletViewportWidth: 48em; // 768px
@media screen and (min-width: @tabletViewportWidth) {
.ekomi2gether-rechtsunten {
right: 20px;
}
}


Hier sieht man den mobile first Ansatz. Die eigentliche Anpassung am Div-Bereich findet erst statt, wenn der Viewport mindestens 768px hat. Dann wird die Box also von links nach rechts bewegt. Das ist die Ansicht im Smartphone:

Wie man sieht ist das Widget für die mobile Ansicht viel zu mächtig und sollte deshalb auf kleineren Ansichten gegen ein ebenfalls kleineres Widget ausgetauscht werden um den Nutzer nicht damit zu erschlagen.

8. Alternativ Widget für mobile Ansicht

Auf der (normalen) Widget Seite ist die Auswahl nicht recht groß, daher ist das einzige Alternativ-Widget, was sich an dieser Stelle anbietet ein rundes Logo, ganz ohne Sterne oder eingebundene Bewertungen.

Wie gehen wir also vor? Zunächst einmal muss dafür gesorgt werden, dass unser erstes Widget für kleinere Viewports
ausgeblendet wird. Und dann binden wir das andere Widget ein, was wiederum für größere Viewports ausgeblendet wird.

Die Widgets packen wir dann wiederum in 2 unterschiedliche DIV-Beriche um darüber anschließend ein- und ausblenden zu steuern.    Das könnte dann so aussehen:

Auf der LESS Seite sollte es dann so aussehen:


.ekomi2gether-rechtsunten {
.ekomi2gether-mobile {
position: fixed;
bottom: 40px;
left: 20px;
}
.ekomi2gether-tablet {
display: none;
position: fixed;
right: 20px;
bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 11px 3px !important;
border-radius: 9px;
.standard130170 {
border-radius: 9px;
}
}
}
// AB @tabletViewportWidth: 48em; // 768px
@media screen and (min-width: @tabletViewportWidth) {
.ekomi2gether-rechtsunten {
.ekomi2gether-mobile {
display: none;
}
.ekomi2gether-tablet {
display: block;
}
}
}


Das hier ist dann unsere mobile Ansicht. Das sieht auf jeden Fall nicht mehr ganz so wuchtig aus, leider aber auch etwas langweiliger, da außer dem Siegel nichts zu sehen ist.

9. Alternativ Widget für mobile Ansicht – Optimierung

Außerdem ist das Siegel sogar immer noch recht wuchtig, und könnte noch etwas kleiner gemacht werden.    Die Breite ist bei 105px angesetzt, das ganze können wir einfach mal auf 80 runtersetzen. So wir dann die Klasse aufgelöst, der Rest bleibt gleich:


.ekomi2gether-mobile {
position: fixed;
bottom: 10px;
left: 10px;
.ekomi-rating-seal {
width: 80px;
height: 80px;
}
}


Wie man sieht habe ich auch noch etwas vom Abstand nach links und unten entfernt, so dass sich das aktuelle Ergebnis nun folgendermaßen präsentiert:

Eigentlich ganz ok, oder? Dann sind wir ja schon fast einer Meinung.

10. Magisches JavaScript

Wer jetzt noch etwas Magie mit Javascript reinbringen möchte packt zu den Klassen seiner Widgets zusätzlich auch noch IDs, um diese später per JS ansprechen zu können. Ich meine das so:

Ich packe den Code bewußt nicht rein, ihr solltet das natürlich machen. Aber wie man jetzt sieht haben wir den ganzen Kram nun jeweils um id=“ekomi2gether-mobile“ und id=“ekomi2gether-tablet“ ergänzt.

Zudem passt ihr die Klassen der beiden Widgets im LESS Code dann auch an, so dass es IDs sind:


.ekomi2gether-rechtsunten {
#ekomi2gether-mobile {
position: fixed;
bottom: 10px;
left: 10px;
transition: bottom 0.3s; /* Transition effect when sliding down (and up) */
.ekomi-rating-seal {
width: 80px;
height: 80px;
}
}
#ekomi2gether-tablet {
display: none !important;
position: fixed;
right: 20px;
bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 11px 3px !important;
border-radius: 9px;
transition: bottom 0.3s; /* Transition effect when sliding down (and up) */
.standard130170 {
border-radius: 9px;
}
}
}
// AB @tabletViewportWidth: 48em; // 768px
@media screen and (min-width: @tabletViewportWidth) {
.ekomi2gether-rechtsunten {
#ekomi2gether-mobile {
display: none !important;
}
#ekomi2gether-tablet {
display: block !important;
}
}
}


Jetzt könnt ihr je nach Geschmack zwei verschiedene Javascript Schnipsel verwenden um das mobile Icon beim scrollen zu verstecken, weil es sonst halt nervt.

Option a: Beim runter scrollen verstecken / beim hoch scrollen anzeigen

Mit diesem Code könnt ihr das Widget verstecken wenn ihr runter scrollt. Sobald man hoch scrollt wird es wieder sichtbar. Hierbei wird das Widget beim scrollen nach unten geschoben. Kopiert für die magische Option a folgenden Code:


/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("ekomi2gether-mobile").style.bottom = "10px";
} else {
document.getElementById("ekomi2gether-mobile").style.bottom = "-100px";
}
prevScrollpos = currentScrollPos;
}


Option b: Widget nur bei Scroll-Position 0 anzeigen

Ihr wollt das Widget nur anzeigen, wenn die Seite frisch geöffnet / nach dem runter scrollen wieder komplett hoch gescrollt wurde? Dann verwendet diese magische Zahlen-Und-Buchstaben-Kombination:


/* Hide the widget, soon as the user scrolls the page down */
$(window).scroll(function() {
if ($(this).scrollTop()>0) {
$('.ekomi2gether-mobile').fadeOut();
}
else {
$('.ekomi2gether-mobile').fadeIn();
}
});


Diesmal wird das Widget nicht nach unten geschoben, sondern statt dessen mit einem Fade-Effekt ausgeblendet. Erst wenn die Seite wieder komplett hoch gescrollt wurde zeigt sich das Widget wieder.

Das Javascript solltet ihr ordentlicherweise in der JS Datei eures Child-Themes einbinden. Wenn ihr krass sein wollt könnt ihr euer Theme auch gleich noch im Admin Bereich erweitern:

10.1 Box um HTML und JS Code über den Admin Bereich einzubinden
10.2 Theme.php, ab Zeile 466 (zumindest in unserem Theme):
10.3 config.ini anpassen eriwetern nicht vergessen


// Create the fieldset which is the container of our field
$mainFieldset = $this->createFieldSet(
'tab_ekomiwidget_FieldsetTitle',
'__tab_ekomiwidget_FieldsetTitle__',
['attributes' => $attributes]
);

// Link-Widget Aktivieren / Deaktiveren
$checkboxEkomiWidgetActive = $this->createCheckboxField(
'ekomiwidget_active',
'__ekomiwidget_active__',
false
);

$mainFieldset->addElement($checkboxEkomiWidgetActive);

// add main fieldset to tab
$reiter->addElement($mainFieldset);


Wir sehen, dass hier die folgenden Snippets verwendet werden:

tab_ekomiwidget_FieldsetTitle
ekomiwidget_active

10.4 Code Box einbinden (so wie bei Top Header Elemente)

10.5 Fade-Effekt für mobile
a) Keiner / None
b) Scrollen / On scroll
c) Runter scrollen / Scroll down

10.6 index.tpl anpassen
– Widget aktivierbar machen


{* Anpassung für EKomi Widget *}
{block name="frontend_index_header_javascript_jquery"}
{if $theme.{"ekomiwidget_active"} == "true"}
{include file='frontend/index/ekomi2gether.tpl'}
{/if}
{$smarty.block.parent}
{/block}


1.6 Auswahlfeld für Effekte
– Für mobile
– Fürs tablet
– ekomi2gether.tpl anpassen

So easy ist das!

11. Weiterführende Links

eKomi – the Feedback company:
https://www.ekomi.de/de/

eKomi Manager:
https://lite.ekomiapps.de/users/sign_in

eKomi Bewertungen bei Trustpilot:
https://de.trustpilot.com/review/www.ekomi.de

eKomi Plugin für Shopware 6:
https://store.shopware.com/offic45955498429f/ekomi-bewertungen-und-rezensionen.html

Shopware Plugin – eKomi Schnittstelle mit Rich Snippets & optimierte Bewertungsadarstellung:
https://store.shopware.com/nfx00624f/ekomi-schnittstelle-mit-rich-snippets-optimierte-bewertungsdarstellung.html

Du brauchst Hilfe bei der Umsetzung mit Shopware? Dann setze dich jetzt mit uns in Verbindung.