Breakpoints anpassen Shopware

Problemstellung in unserer Internetagentur heute: Wie ändere ich in einem Onlineshop auf Shopware-Basis die Breakpoints in einem Child-Theme, das vom Responsive-Theme abgeleitet ist? Schön wäre es natürlich, wenn wir die Datei, in der die Breakpoints definiert werden einfach in das Child-Theme schieben und dann die Breakpoints ändern. Funktioniert aber leider so nicht. Wir müssen hier über den StateManager gehen, der es uns in Shopware ermöglicht, Javascript-Plugins abhängig von verschiedenen Bildschirmbreiten auszuführen (siehe auch https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/).

 

 Damit wir das Rad nicht neu erfinden müssen, bedienen wir uns hier einem existierenden Skript, das genau das macht, was wir wollen: Über den StateManager eigene Breakpoints für verschiedene Viewports definieren. Dieses finden wir unter https://github.com/iocron/shopware-stateManagerAdvanced/blob/master/stateManagerAdvanced.js und müssen dieses nun nur für unsere Bedürfnisse anpassen und geeignet einbinden:

 

1) themes/Frontend/DEIN_THEME/frontend/_public/src/js/custom_breakpoints.js anlegen (oder wie auch immer man es nennen möchte!)

 

Inhalt: Im Grunde wie JS-File aus oberem Link, Ergänzung noch um diese Zeilen, um unsere Breakpoints zu ändern:

 

$(function() {

                stateManagerUpdateBreakpoint("s",{ enter:480, exit:768 });

                stateManagerUpdateBreakpoint("m",{ enter:769, exit:1023 });

                stateManagerUpdatePlugins();

});

 

2) Einbindung des neuen JS-Files im Theme - dies machen wir über 

 

 themes/Frontend/DEIN_THEME/frontend/Theme.php

 

mit der Anweisung

 

protected $javascript = [

                'src/js/custom_breakpoints.js'

];

 

So wird das Javascript-File auch nach jQuery eingebunden, welches wir dort verwenden möchten. Getestet in unserer Internetagentur in einem auf der Basis von Shopware 5..5.6 Professional Edition erstellten Onlineshop.