Shopware - Top Navigation class="active" zuweisen mit jQuery

Hier ein einfaches Beispiel, wie ich den aktiven Seiten (Shopseiten) in der Top Navigation eine Klasse zuweise. Damit ich im Rahmen von Shopware bleibe, nutze ich folgenden Namen für die aktive Klasse is--active. Ansonsten kann der Klassenname nach Wunsch/Bedarf ausgetauscht werden.

Folgender jQuery Code wird in die custom.js* geschrieben:

let linkPath = window.location.pathname;
$('.navigation--list-wrapper').find('a').each(function() {
  $(this).toggleClass('is--active', $(this).attr('href') == linkPath);
});

Danach noch mit CSS formatieren:

.navigation--list-wrapper a.navigation--link.is--active,
.navigation--list-wrapper a.navigation--link:hover,
.navigation--list-wrapper a.navigation--link.is--first.active
{color:#fff!important; background:#92b503; border-radius: 0px;}

Fertig :)

Beispiel der Mini-Anpassung: https://www.wolldecken-tagesdecken.de/wolldecken-waschen.html




*Die Datei kann auch beliebig heißen und sollte in folgendem Verzeichnis liegen:
Frontend/DeinTemplateName/frontend/_public/scr/js/custom.js
Damit custom.js von Shopware erkannt wird, muss diese noch in der Theme.php "registiert" werden: Frontend/DeinTemplateName/Theme.php 

Suchen nach:

protected $extend = 'Responsive';

darunter einfügen:

 protected $javascript = array(
        "src/js/custom.js"
    );