Hallo zusammen, ich versuche soeben in der Version 5.0.0 RC 2 eine Javascript-Datei zu überschreiben. Kommentiere ich zum Beispiel in themes/frontend/custom/_public/src/js/jquery.shopware-responsive.js die Zeile 90 aus, dann klappt mein “Service/Hilfe”-Menü noch immer auf und zu. Lösche ich den gesamten Inhalt der Datei, klappt auch noch alles. Testweise habe ich die beschriebenen Änderungen auch einmal im Original durchgeführt. Dort fruchtet es sofort. Aber das will man ja nicht. Beste Grüße Sebastian
Hallo Kayyy, ich war bisher der Meinung, dass muss man nur für *eigene* Javascript-Files tun. Dieser Thread bestätigt mir das: post115849.html#p115849. Der Eintrag: /\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $javascript = array( 'src/js/jquery.shopware-responsive.js' ); in meiner Theme.php hat aber auch nichts gebracht. Beste Grüße Sebastian
Ah okay - Ja das habe ich übersehen. Fragen wir mal anders: Was willst du denn genau machen ? Generell solltest du hier allerdings eine eigene JS Datei anlegen mit entsprechend eigenen Inhalt. Also bspw: $(function () { StateManager // Collapse panel .addPlugin('.product--collapse, .collapse--header', 'collapsePanel', { animationSpeed: 100 }, ['xs', 's', 'm', 'l', 'xl']) }); Innerhalb des StateManagers solltest du eigentlich die bisherige Funktion überschreiben können. *EDIT* Habe mir gerade auch mal die JS Datei angeschaut. Hier gibts die Funktion removePlugin ( jquery.state-manager.js ) Ich würde dann also deine nötige Funktion in deiner custom JS einfach per removePlugin entfernen.
Hallo Kayyy, das Suchfeld wird im Standard ab 480px Viewport direkt angezeigt. Unterhalb 480px wird es ausgeblendet und kann mit Klick auf die Lupe angezeigt werden. Ich möchte, dass das Suchfeld in jeder Viewport-Größe ausgeblendet ist und mit Klick auf die Lupe eingeblendet wird. Das ein- und ausblenden passiert ja via less/css. Allerdings funktioniert das Javascript um das Suchfeld anzuzeigen nur bei einer Viewport-Größe unterhalb 480px. Beste Grüße Sebastian
Schau dir mal mein Edit oben an. Ich würde das derzeitige Plugin per remove rausnehmen und dann noch einmal neu reinnehmen mit deiner Anweisung. Also dann praktisch wieder: $(function () { StateManager .removePlugin('\*[data-search-dropdown="true"]', 'searchFieldDropDown', ['xs', 's', 'm', 'l']) .addPlugin('\*[data-search-dropdown="true"]', 'searchFieldDropDown', ['xs', 's', 'm', 'l', 'xl'] });) Ungetestet
In meiner jquery.shopware-responsive.js steht nun folgendes: // Search field .removePlugin('\*[data-search="true"]', 'search') .addPlugin('\*[data-search="true"]', 'search', ['xs', 's', 'm', 'l', 'xl']) Leider funktioniert es jedoch nicht. Hinweis: Um überhaupt eine Änderung zu sehen, habe ich diese Änderung direkt im Responsive-Template durchgeführt. (das kann natürlich nicht so bleiben) Kannst du denn bestätigen, dass die Vererbung bei den Javascript-Files nicht funktioniert? Wenn ja, sollten wir einen Eintrag im Bug-Tracker erstellen. Beste Grüße Sebastian
btw: es gibt ja auch die Funktion updatePlugin: function (selector, pluginName) { ... Ich teste es selber gerade mal. PS: Hat aber natürlich nicht den viewport drin - verzwickt 
Nein, auch mit updatePlugin will es nicht.
Sicher das der Code ausgeführt wird? Bzw kompiliert wird? Mach mal ein alert oder console.log rein.
Was mir auch aufgefallen ist, wenn du Template Dateien bearbeitest, musst du hier trotzdem den Template Cache leeren. Außerdem ist mir aufgefallen, dass addPlugin 4 Parameter erwartet. In der jquery-shopware-responsive sind es allerdigns nur 3 Parameter beim addPlugin. Allerdings hänge ich hier gerade auch an der Suche fest, da ich genau dasselbe umsetzen möchte. Wenn ich die Lösung habe, werde ich diese natürlich mitteilen. Aber hey - Ich erwarte das gleiche von euch ! :x
Hallo ottscho, hallo kayyy, danke für eure Mithilfe. @ottscho: Sehr sicher. Siehe meinen Eingangspost. Da das überschreiben nicht will, testen wir derzeit am Original-Template, was natürlich kein Dauerzustand ist. Kannst du denn bestätigen, dass das Überschreiben der Javascript-Dateien mit 5.0.0 RC2 nicht tut? @kayyy: Template Cache ist natürlich geleert. 
Shopware übergibt ja bei addPlugin auch nur drei Parameter. Heißt für mich .addPlugin('\*[data-search="true"]', 'search', ['xs', 's', 'm', 'l', 'xl']) müsste funktionieren. Tut es aber nicht. Beste Grüße Sebastian
ich hänge an der gleichen Stelle. Das Search Plugin wird ja global registriert ohne State angaben. Im Search Plugin selber ist aber alles auf XS ausgelegt. Da ich die Funktion (Button - Aufklappen der Suche) nicht nur in XS möchte, sondern auch in S habe ich zum Test direkt in der Core Datei folgendes geändert: /\*\* \* Registers all necessary events for the plugin. \* \* @public \* @method registerListeners \*/ registerListeners: function () { var me = this, opts = me.opts, $searchField = me.$searchField; me.\_on($searchField, 'keyup', $.proxy(me.onKeyUp, me)); me.\_on($searchField, 'keydown', $.proxy(me.onKeyDown, me)); me.\_on(me.$toggleSearchBtn, 'click', $.proxy(me.onClickSearchEntry, me)); if (msPointerEnabled) { me.$results.on('click', opts.resultLinkSelector, function (event) { window.location.href = $(event.currentTarget).attr('href'); }); } StateManager.registerListener( { state: 'xs', enter: function () { if (opts.activeOnStart) { me.openMobileSearch(); } }, exit: function () { me.closeMobileSearch(); } } ); }, in /\*\* \* Registers all necessary events for the plugin. \* \* @public \* @method registerListeners \*/ registerListeners: function () { var me = this, opts = me.opts, $searchField = me.$searchField; me.\_on($searchField, 'keyup', $.proxy(me.onKeyUp, me)); me.\_on($searchField, 'keydown', $.proxy(me.onKeyDown, me)); me.\_on(me.$toggleSearchBtn, 'click', $.proxy(me.onClickSearchEntry, me)); if (msPointerEnabled) { me.$results.on('click', opts.resultLinkSelector, function (event) { window.location.href = $(event.currentTarget).attr('href'); }); } StateManager.registerListener( { state: 'xs', enter: function () { if (opts.activeOnStart) { me.openMobileSearch(); } }, exit: function () { me.closeMobileSearch(); } }, { state: 's', enter: function () { if (opts.activeOnStart) { me.openMobileSearch(); } }, exit: function () { me.closeMobileSearch(); } } ); }, Leider macht es keine Änderung. Beim Klick auf den Button (.entry–trigger) passiert in State S nichts, nur im XS.
Ich weiss da auch net weiter - Auch verstehe ich nicht, wenn man die addPlugin function nutzt er vier Parameter ( inkl. config ) erwartet, die functions in der shopware-responsive aber nur drei haben. Ich habe das aber mal an Sebastian weitergeleitet, hier sollte sich einer der Spezis demnächst wohl melden und uns aufklären
Hallo ihr beiden, ich danke euch für die Tests. Wir behandeln ja hier zwei Themen parallel. Einmal das Einblenden des Suchfeldes größer “xs” und einmal “Sind Javascript-Dateien überschreibbar”. Noch einmal zum zweiten Problem: Könnt ihr denn bestätigen, dass man Javascript-Dateien mit 5.0.0 RC2 so wie in post115849.html#p115849 beschrieben, nicht überschreiben kann? Wenn ja, erstelle ich einen Eintrag im Bugtracker. Beste Grüße Sebastian
Hallo Ihr Lieben, hier ein paar nützliche Infos für Euch. 1. JavaScript Files und Vererbung Grundsätzlich ist es so, dass JavaScript und auch LESS Dateien nicht in das automatische Datei-Vererbungssystem fallen. Das heißt, wenn Ihr in Eurem eigenen Theme eine jquery.shopware-responsive.js anlegt, wird diese nicht die ursprüngliche überschreiben. Diese automatische Vererbung funktioniert nur mit Smarty Files. 2. StateManager addPlugin Methode Die Parameter für die addPlugin Methode sind variabel damit man hier möglichst flexibel ist. Pflichtangaben sind der Selektor und der Plugin-Name. StateManager.addPlugin('\*[data-search="true"]', 'search'); Zusätzlich kann man noch Plugin-Konfiguration angeben und für welche Viewports das Plugin mit der entsprechenden Konfiguration aufgerufen werden soll. StateManager.addPlugin('\*[data-search="true"]', 'search', { 'activeCls': 'is--active' }, ['xs', 's', 'm']); Da man nicht immer etwas an der Konfiguration ändern möchte, kann man diesen Parameter auch überspringen und direkt die Viewports definieren. StateManager.addPlugin('\*[data-search="true"]', 'search', ['xs', 's', 'm']); Der dritte und vierte Parameter der Methode sind also variabel. 3. Plugins überschreiben Wenn ihr Plugins aus dem Shopware Responsive Template überschreiben wollt, könnt ihr dies über die Helferfunktion der neuen Plugin-Basis machen. Dazu erstellt Ihr eine eigene JavaScript Datei und fügt diese über die Theme.php dem Compiler hinzu. In Eurer eigenen Datei könnt Ihr dann das Plugin überschreiben. Wichtig ist, dass Ihr dies erst auf DOMready macht. $(function () { $.plugin('search', { // do some magic }); StateManager.addPlugin('\*[data-search="true"]', 'search'); }); Ich hoffe ich konnte damit einige Eurer Fragen klären. Sonnige Grüße, Phil
1 „Gefällt mir“
Hallo Phil, vielen Dank für deine ausführliche Antwort. Das bringt ein wenig Licht ins Dunkel. Allerdings komme ich auch mit deiner Anleitung nicht zu meinem Ziel, das Suchfenster auch oberhalb dem State “xs” ein- und ausblenden zu können. Kannst du hier bitte noch eine Hilfestellung leisten? Beste Grüße Sebastian
hmm … ich stehe vor des Problems selbigen. $(function () { $.plugin('search', { }); StateManager.addPlugin('\*[data-search="true"]', 'search', ['xs', 's', 'm']); }); innerhalb von .plugin('search', Blocks innerhalb eines (document).ready(function() { }); Blocks, innerhalb meiner custom.js, die in der Theme.php innerhalb des protected $javascript Arrays referenziert ist und ansonsten korrekt funktioniert, wird nach Cache Clearing und Browser reload selbst dann scheinbar nichts berücksichtigt, wenn ich den vollständigen Inhalt, aus der jquery.search.js übernehme und einsetze. Was einzig und allein eine Reaktion hervorbringt ist das direkte Abändern innerhalb der original jquery.search.js von z. B. „xs“ auf „s“ an allen drei Stellen - wobei „m“ und „l“ wiederum nicht dazu führen, dass die Logik „Button Lupe + click -> Suchfeld öffnet sich“ ausgeführt wird. Kann bitte noch einmal das Rezept an der hier scheinbar offenen Stelle genauer erläutert werden, das bewirkt, dass effektiv die mobile Suche auch für Tablets anwendbar ist? Vielen Dank!
Ich habe nun nach langem Versuchen und dem Lesen dieses ja noch nicht erfolgreich beendeten Threads eine Lösung gefunden die funktioniert: - in der Theme.php habe ich meine customTrigger.js Datei registriert, die in src/js/ liegt. Der vollständige Inhalt meiner customTrigger.js: $.overridePlugin('swSearch', { onClickSearchEntry: function (event) { var me = this, $el = me.$el, opts = me.opts; /\*\* @deprecated - will be removed in 5.1 \*/ $.publish('plugin/search/onClickSearchEntry', [me, event]); $.publish('plugin/swSearch/onClickSearchEntry', [me, event]); if (StateManager.isCurrentState('m') ||StateManager.isCurrentState('l') || StateManager.isCurrentState('xl') ){ return; } console.log(StateManager); event.preventDefault(); event.stopPropagation(); $el.hasClass(opts.activeCls) ? me.closeMobileSearch() : me.openMobileSearch(); } }); Ich habe also einfach die andern States (also m, l, xl) ausgeschlossen. So herum funktioniert es und mein Trigger geht nun auch für s, nicht nur für xs. $.overridePlugin(‚search‘, < so wie in einem Tutorial von Shopware geschrieben, funktioniert bei mir übrigens nicht. Etwas ärgerlich.
2 „Gefällt mir“
Was ist den nun die beste Methode um bei der Desktop-Ansicht nur beim anklicken der Lupe das Suchfeld zu öffnen? Grüße, Gregor