Today’s problem at our web agency: How do I change the breakpoints in a child theme based on the Responsive theme in a Shopware-based online shop? Ideally, we would simply move the file in which the breakpoints are defined into the child theme and then change the breakpoints there. Unfortunately, it does not work that way. We have to use the StateManager, which allows us in Shopware to execute JavaScript plugins depending on different screen widths (see also https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/).
So that we do not have to reinvent the wheel, we use an existing script that does exactly what we need: defining custom breakpoints for different viewports via the StateManager. We can find it at https://github.com/iocron/shopware-stateManagerAdvanced/blob/master/stateManagerAdvanced.js and now only need to adapt it to our requirements and integrate it appropriately:
1) Create themes/Frontend/YOUR_THEME/frontend/_public/src/js/custom_breakpoints.js (or call it whatever you like!)
Content: Basically the same as the JS file from the link above, with these additional lines to change our breakpoints:
$(function() {
stateManagerUpdateBreakpoint("s",{ enter:480, exit:768 });
stateManagerUpdateBreakpoint("m",{ enter:769, exit:1023 });
stateManagerUpdatePlugins();
});
2) Include the new JS file in the theme — we do this via
themes/Frontend/YOUR_THEME/frontend/Theme.php
using the following statement:
protected $javascript = [
'src/js/custom_breakpoints.js'
];
This ensures that the JavaScript file is also included after jQuery, which we want to use in it. Tested at our web agency in an online shop based on Shopware 5.5.6 Professional Edition.
