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.