Die Einkaufswelt in Shopware wird dynamisch nachgeladen
Aber wie bekommt man mit, dass die Einkaufswelt fertig geladen wurde?
An einem konkreten Beispiel möchte ich euch zeigen wie ihr, auf Basis des Tutorials "Shopware responsive JS Plugins manipulieren", auf das Plugin-Event der Einkaufswelt Einfluss nehmen könnt.
Manchmal macht man CSS Einstellungen auf bestimmte Elemente, die unter Umständen gar nicht da sind. In diesem Beispiel wird .panel--title eine Hintergrund Line als Grafik geladen und das darin enthalten span Element soll sich darüber legen.
<style>
.panel--title {
text-align: center;
background: transparent url(../img/bg_line.png) center no-repeat;
position: relative;
padding: 1.25rem 0rem .625rem 0rem;
border: none;
}
.panel--title span {
background: #fff;
padding: 4px 12px;
position: relative;
top: -30px;
}
</style>
<div class="panel--title">
<span>Überschrift einer Kategorie</span>
</div>
Das sieht dann so aus.
Das Problem ist, dass das span Element zwar im Template (z.B. im Listing) hinzugefügt werden kann, aber bei statischen Shopseiten oder Textbausteinen wird es sehr aufwändig, dieses Element manuell einzutragen. Also macht man sich einen kleinen JavaScript Helfer, der das span Element hinzufügt.
function setPanelTitle(elements){
$.each(elements, function(i, el){
var ele = $(el),
hasSpan = ele.children('span');
if(!hasSpan.length){
ele.addClass('panel--title');
ele.html('<span>'+ele.html()+'</span>');
}
});
}
setPanelTitle($('.panel--title, .last-seen-products--title, .forms--title'));
Damit hat man sich eine menge Arbeit gespart und der Shopbetreiber braucht nicht machen.
Nun zum Problem der Einkaufswelt
Das JavaScript macht brav seine arbeit. Aber bei einer Einkaufswelt geht das nicht. Da es dynamisch nachgeladen wird. Also muss man die Funktion setPanelTitle() ausführen, wenn die Einkaufswelt fertig geladen wurde. Auf Basis des Tutorials "Shopware responsive JS Plugins manipulieren" zeige ich euch, wie Ihr auf das Plugin-Event für die Einkaufswelt Einfluß nehmen könnt.
In der JavaScript Datei
themes/Frontend/Responsive/frontend/_public/src/js/jquery.emotion.js
findet ihr folgende $.publish() Anweisung:
$.publish('plugin/swEmotionLoader/onLoadEmotionFinished', me);
Diese Anweisung wird dann ausgeführt, wenn die Einkaufswelt per Ajax fertig geladen wurde. Genau dann können wir unsere setPanelTitle() Funktion per $.subscribe() ausführen.
Das würde dann so aussehen:
$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
setPanelTitle($('.panel--title'));
});
Jetzt werden auch in der Einkaufswelt, alle Elemente mit der Klasse panel--title das span Element hinzugefügt und wir haben die Überschriften so wie wir sie haben wollen.
Die komplette JavaScript Anweisung die ich im Einsatz habe, sieht so aus:
function setPanelTitle(elements){
$.each(elements, function(i, el){
var ele = $(el),
hasSpan = ele.children('span');
if(!hasSpan.length){
ele.addClass('panel--title');
ele.html('<span>'+ele.html()+'</span>');
}
});
}
setPanelTitle($('.panel--title, .last-seen-products--title, .forms--title'));
$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {
setPanelTitle($('.panel--title'));
});