Our agency's goal was to use a hash in the URL to target an anchor on an online shop based on Shopware 5. In other words, we wanted to automatically scroll down to an anchor (to an element with the ID "someanchor") after entering, for example, https://irgendeinonlineshop.de#irgendeinesprungmarke in the browser. In principle, this mechanism is application-independent; it works just as well in a Magento 2 online shop as it does on a static HTML website. However, this is not the case in Shopware 5 if the anchor is embedded in a shopping world, regardless of whether it is loaded via AJAX or not.
The problem is that the shopping world is loaded after the page itself. In our web agency, for example, this happens on the category page with the product listing. This means: The anchor is included in the URL, but the corresponding ID cannot yet be found in the code, so the browser does not jump to the anchor. For AJAX-loading shopping worlds, the Shopware subscriber plugin/swEmotionLoader/onLoadEmotionFinished provides a solution, as it allows us to target the anchor after the shopping world has been loaded.
We therefore simply create a JavaScript file under /themes/Frontend/IRGENDEINTHEMENAME/frontend/_public/src/js/, for example "jquery.econcess.js", and implement the anchor logic. In other words, we read the anchor from the URL (using jQuery here, removing the first character, i.e. the "#") and jump to it (if an anchor is present):
$.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);
});
That's it. Seen at our web agency in an online shop based on Shopware 5.
