jQuery-Plugin für einen Breakpoint entfernen

Shopware 5 Programmierung
1

Hallo!

Ich will das Tab-Plugin für Produktbeschreibung und Bewertungen erst ab Breakpoint L aktiv haben. Laut https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/ müsste das mit

StateManager.removePlugin('.tab-menu--product', 'swTabMenu',['s']);

funktionieren. Genau das tut es aber nicht. Mit obigem Code sind die Tabs egal bei welchem Breakpoint keine Tabs mehr (gleiches gilt, wenn man den Breakpoint nur als String übergibt). 

Übersehe ich was oder ist da die Doku einfach falsch? Und wenn letzteres, wie komme ich trotzdem zum gewünschten Ergebnis (komplett entfernen und dann wieder hinzufügen ist aus Performancegründen keine Option!).

Gruß

Matt

2

Moin @msslovi0‍,

erstmal ganz dumm gefragt:
Wenn du das direkt im Core änderst, also dort einfach den Viewport ‘s’ statisch entfernst, funktioniert es dann überhaupt?
Einfach nur, um hier einzugrenzen, ob das “Entfernen eines zugewiesenen Viewports via Plugin” das Problem ist, oder, ob das jQuery Plugin schlicht weg sowieso nur funktioniert wenn der Viewport drin bleibt.

Lieben Gruß
Patrick  Shopware

3

Ja, das mach ich derzeit. So sieht meine jquery.shopware-responsive.js derzeit aus:

window.StateManager
    [...]
    .addPlugin('.tab-menu--product', 'swTabMenu', ['m', 'l', 'xl'])

Damit läuft das so wie ich es haben will.

https://www.youtube.com/watch?v=nzWI2Z4T2ak

Sobald ich in meinem eigene jquery.wib-core.js die Zeile

StateManager.removePlugin('.tab-menu--product', 'swTabMenu', 's');

einfüge sieht es ab dem m-Breakpoint aber so aus:

1598×1864 507 KB

Das Plugin wird also komplett entfernt, nicht nur für den s-Breakpoint.

4

Moin @msslovi0‍,

ich habe das jetzt mal in meinem System versucht.
Der folgende Aufruf hat dabei problemlos für mich funktioniert:

StateManager.removePlugin('.tab-menu--product', 'swTabMenu', ['s']);

Das Plugin wurde in meinem System nur für den Viewport ‚s‘ entfernt.
Das kannst du auch einfach in der Dev Console selbst testen, einfach jeweils eine Zeile so in die Dev Tools Console einfügen und ausführen.

StateManager._plugins['s']['.tab-menu--product']; // Should return undefined
StateManager._plugins['m']['.tab-menu--product']; // Should return object with plugin

Mir sind dennoch zwei Dinge dabei aufgefallen:

  1. Du schreibst, dass du das Verhalten erst ab Viewport L haben möchtest, willst aber nur ‚s‘ rausnehmen. Dann bleibt aber auch noch ‚m‘ vorher. Das aber nur als kleine Randinfo.
  2. Die kaputte Ansicht, die du beschreibst, habe ich auch dann, wenn ich den Viewport statisch aus dem Standard Core rausnehme. Der Grund dafür liegt in den Styles, die erst ab einem bestimmten Viewport greifen. Die müsstest du also auch anpassen.

Hilft dir das erstmal weiter?

Lieben Gruß,
Patrick  Shopware

5

Danke dir, ich probier das mal aus sobald ich aus dem Urlaub zurück bin.

m und l würfel ich die ganze Zeit, sorry dafür, die Kollegen sind auch schon genervt.

Der Grund für die kaputten Styles ist klar. Bzw. eigentlich würde da ja die Styles für die Tabs greifen, aber das Plugin wird ja generell nicht geladen sobald ich es für s entfernt habe.

Gruß

Matt