Sprungmarken Titelbild

Ziel war es unserer Agentur, eine Sprungmarke via Hash in der URL in einem Onlineshop auf Shopware 5-Basis anzusteuern, heißt zu dieser Sprungmarke (zu einem Element mit der id "irgendeinesprungmarke" automatisch nach unten zu scrollen, nachdem man in den Browser z.B. https://irgendeinonlineshop.de#irgendeinesprungmarke eingibt. Prinzipiell ist dieser Mechanismus erst einmal anwendungsunabhängig, er funktioniert in einem Magento 2-Onlineshop genauso wie auf einer statischen HTML-Website. Nicht so in Shopware 5, wenn der Anchor in einer Einkaufswelt verbaut ist, egal ob AJAX-basiert geladen oder nicht.

Das Problem ist nämlich hierbei, dass die Einkaufswelt auf der Website nachgeladen wird. So in unserer Internetagentur beispielsweise auf der Kategorieseite mit Artikelliste. Das heißt: Anker wird in URL mitgegeben, entsprechende ID aber nicht im Coder gefunden, also findet der Sprung zur Sprungmarke nicht statt. Abhilfe (für AJAX-ladende) Einkaufswelten bietet hier der Shopware subscriber "plugin/swEmotionLoader/onLoadEmotionFinished", der uns die Möglichkeit gibt, die Sprungmarke anzusteuern, nachdem die Einkaufswelt geladen ist.

 

Wir legen somit lediglich eine Javascript-Datei an unter /themes/Frontend/IRGENDEINTHEMENAME/frontend/_public/src/js/, z.B. "jquery.econcess.js" und implementieren die Sprunglogik, lesen also den Anker aus der URL aus (hier mit jQuery, dann erstes Zeichen, also "#" weglassen) und springen (falls Anker vorhanden) dorthin:

 

$.subscribe("plugin/swEmotionLoader/onLoadEmotionFinished", function(me) {

                function jump(h){

                               var url = location.href;

                               location.href = "#"+h;

                               history.replaceState(null,null,url);

                }

                var ecohash = $(location).attr('hash').slice(1);

                if (ecohash != '') jump(ecohash);

});

 

Das war's. Gesehen in unserer Webagentur einem Onlineshop auf Shopware 5-Basis