Breakpoint Responsive ändern jQuery / CSS

Shopware 5 Themes & Design
1

Hallo ich habe folgendes Problem: Ich konnte in meinem Theme zwar den Breakpoint im less von 768px auf 820px umstellen, aber z.B. das Menü klappt trotzdem erst bei 767px aus. Weiß jemand wo ich das noch anpassen kann, das die Funktionen auch bei einem anderen Breakpoint greifen??

2

Hi Peperonilenchen,

die einzige Möglichkeit die ich gefunden habe ist die direkte DOM Manipulation. Auf jQuery plugins and the StateManager wird leider keine Update Methode des StateManagers für Breakpoints genannt (bzw. gibt es diese auch zum derzeitigen Stand nicht) und überschreiben kann man diese auch nicht so leicht (=>Fehlermeldung, die zwar nichts auf den ersten Blick zerschießt, aber unvorhergesehene Nebeneffekte hervorrufen könnte). Andere Variante wäre zuerst den state “s” zu löschen und neu zu registrieren => ebenfalls problematisch aufgrund verbundener Plugin Registers (schätze mal dass manche Verbindungen nicht korrekt von SW aufgelöst werden => evtl. Bug). Daher wie anfangs erwähnt die Lösung mit der direkten DOM Manipulation:

var stateManagerBreakpoints = StateManager._breakpoints;

for(i=0; i

Da aber hierdurch ein Freiraum zwischen den Breakpoints / States “s” und “m” entstehen würde musst du ebenfalls den State “m” entsprechend anpassen. Die Dokumentation zu den verschiedenen “States” findest du hier: jQuery plugins and the StateManager Der komplette Code würde nun folgendermassen (inkl. dom ready) für deinen Einsatzfall aussehen:

;(function($){	// Alias Technique
	$(document).ready(function(){
		// State Manager Changes		
		var stateManagerBreakpoints = StateManager._breakpoints;
		
		for(i=0; i

Eine noch bessere wiederverwendbare Lösung ist, man schreibt sich dafür Funktionen (oder gar ein JS Plugin). In diesem Beispiel habe ich noch zusätzlich eine Funktion eingefügt um die aktuellen Breakpoints abzurufen in eine Variable, falls man diese mal brauchen sollte, ohne dass man den Shopware StateManager Listener benutzen möchte. Hier ein Beispiel:

// State Manager - Breakpoints Getter: Gets all Breakpoints from the StateManager (and maps them for easier use)
// Usage: var breakpoints = stateManagerBreakpoints();
// console.log(breakpoints.s.enter); // 480px
// console.log(breakpoints.s.exit); // 767px
function stateManagerBreakpoints(){
	var smBreakpoints = StateManager._breakpoints;
	var breakpoints = {};
	for(i=0; i

 

3

Habe noch etwas vergessen, es müssten auch noch die Plugins geupdatet werden, damit diese den neuen Breakpoint registrieren, ich hoffe SW baut hier noch eine Methode ein damit man sich das nicht antun muss. Der komplette Code inkl. Plugin Updates (nur Standard SW Plugins):

// State Manager - Breakpoints Getter: Gets all Breakpoints from the StateManager (and maps them for easier use)
// Usage: var breakpoints = stateManagerBreakpoints();
// console.log(breakpoints.s.enter); // 480px
// console.log(breakpoints.s.exit); // 767px
function stateManagerBreakpoints(){
	var smBreakpoints = StateManager._breakpoints;
	var breakpoints = {};
	for(i=0; i

Die Funktionen könnte man in der folgenden Kombination benutzen:

stateManagerUpdateBreakpoint("s",{ exit:800 });
stateManagerUpdateBreakpoint("m",{ enter:801 });
stateManagerUpdatePlugins();
var breakpoints = stateManagerBreakpoints(); // Optional, für eigene Verwendungszwecke um Breakpoint Werte direkt abzurufen

[EDIT:] Achtung, die beschriebene Methode kann Nebeneffekte hervorrufen. Daher ist leider die einzige derzeit stabile Lösung im SW Core (Responsive Theme) die jquery.shopware-responsive.js entsprechend anzupassen. Habe ein Feature Request an Shopware gesendet eine neue Methode updateBreakpoint() zu integrieren, siehe Ticket: Shopware Issuetracker

1 „Gefällt mir“
4

Hallo @ioCron‍,

Vielen Danke Ihre Antwort war sehr hilfreich.

Ich weiß Diese Q ist ein Jahre Alt aber ich werde mein Lösung schreiben , vielleicht helft jemand Andere.

Nach dem die Breckpoint Anderung kann man ‚_checkBreakpoints‘ und ‚initQueuedPlugins‘ function rufen um anderen die Aktuell currentState und initlize alle Plugins gehort die neue currentState.

also:

stateManagerUpdateBreakpoint("s",{ exit:800 });
stateManagerUpdateBreakpoint("m",{ enter:801 });
window.StateManager._checkBreakpoints();
window.StateManager.initQueuedPlugins(false);

VG,

Ahmad

5

Hello @ahmadsaad‍, Danke für deine Info. Ich habe, da das Problem keine absolute Seltenheit zu sein scheint, ein kleines Script auf Github inkl. Docu dazu zusammengestellt: GitHub - iocron/shopware-stateManagerAdvanced: This little script allows you to change (or get) the Shopware JS Breakpoints and update the plugins accordingly Have Fun.

 

Gruß

Sebastian P.

1 „Gefällt mir“
6

Hallo,

 

warum so kompliziert?

  1. Anstatt vom Responsive Theme einfach vom Bare Theme vererben,

  2. alle JavaScripte aus dem Responsive ins eigene kopieren,

  3. alle Styles ins eigene Theme kopieren,

  4. jquery.shopware-responsive.js auf die neuen Breakpoints hin anpassen, fertig!

 

 

MFG

 

derwunner