Shopseite in Modal laden + Ajax Varianten

Hi, habe heute das Update auf 5.1 gemacht, läuft soweit alles bestens, nur eine Sache wäre da. Ich nutze bei jedem Artikel das Freitextfeld 1 als HTML-Feld um hier eine Größentabelle per Modalfenster zu laden. Dafür nutze ich folgenden Code: [code]

Hier geht´s zur Größentabelle

[/code] Nun ist es so, sobald ich eine Variante gewählt habe, die Seite sich nicht mehr im Modalfenster öffnet, sondern diese direkt aufgerufen wird, der Kunde also direkt auf der erstellten Shopseite mit der Größentabelle landet. Benutze ich dann die „zurück Taste“ im Browser und klicke erneut auf den Button, öffnet sich das Modalfenster korrekt. Hier scheint es so als würde nach dem Ajax-Resquest das ganze irgendiwe nicht mitgeladen werden!? Hat da jemand ne Idee was ich da machen könnte? Bzw. muss ein Modalfenster in der 5.1 mit aktiven Ajax-Varianten nun anders aufgerufen werden? Würde mich über ne Antwort freuen. Gruß

Hallo, nach erfolgtem Ajax-Request wird der Container "div class=“product–buybox"” neu vom Browser aufgebaut. In dem Moment ist das jQuery-Modal-Plugin nicht mehr mit den entsprechenden Attributen assoziiert/verknüpft. das Modal-Plugin müsste nach dem Rendering der product–buybox-Spalte erneut aufgerufen werden, damit es die beiden Trigger für ein Modal-Fenster findet (Versandkosten und die Größentabelle). Müsste man in der Ajax-Funktion im Javascript ergänzen. Für die Größentabelle wäre eine zweite Möglichkeit, den “Button” aus der Buybox herauszunehmen.

[quote=“hth”]Hallo, nach erfolgtem Ajax-Request wird der Container "div class=“product–buybox"” neu vom Browser aufgebaut. In dem Moment ist das jQuery-Modal-Plugin nicht mehr mit den entsprechenden Attributen assoziiert/verknüpft. das Modal-Plugin müsste nach dem Rendering der product–buybox-Spalte erneut aufgerufen werden, damit es die beiden Trigger für ein Modal-Fenster findet (Versandkosten und die Größentabelle). Müsste man in der Ajax-Funktion im Javascript ergänzen. Für die Größentabelle wäre eine zweite Möglichkeit, den “Button” aus der Buybox herauszunehmen.[/quote] Hi, danke für die Antwort. Das mit den Versandkosten hatte ich noch garnicht bemerkt, aber hast recht, da tritt das Verhalten natürlich jetzt auch auf. Da ich davon nicht so viel verstehe und hier ja eine interne Funktion von Shopware ebenfalls betroffen ist (Versandkosten-Modal) habe ich dafür mal ein Ticket angelegt, denn das ist ja schon etwas suboptimal. Es kann ja immer mal vorkommen dass der Kunde erstmal eine Variante wählt und dann erst auf den “Versandkosten-Link” klickt. Gerade auf dem Smartphone ist dass dann echt blöd wenn er hier auf die Versandkostenseite geschmissen wird, anstatt dass diese einfach im Modal angezeigt wird. Wer hier auch für eine Änderung/Verbesserung ist bitte Voten–> Zum Ticket Gruß

1 Like

auch die Informationen zum Klarna-Ratenkauf verschwinden bei der Auswahl der Varianten auf der Detailseite.

Hallo, das jQuery-Modal Plugin muss in dem Ajax-Varianten-Plugin von Shopware an dieser Position ebenfalls aufgerufen werden - letzte Zeile unten ist ergänzt. Das wurde in der QA wohl übersehen und ich denke wird in der nächsten Version auf identische Art gelöst. Am einfachsten ist es, diese Zeile direkt in der Original-Datei zu ersetzen und das Theme neu zu kompilieren. themes/Frontend/Responsive/frontend/_public/src/js/jquery.ajax-variant.js StateManager.addPlugin('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement') .addPlugin('\*[data-image-slider="true"]', 'swImageSlider', { touchControls: true }) .addPlugin('.product--image-zoom', 'swImageZoom', 'xl') .addPlugin('\*[data-image-gallery="true"]', 'swImageGallery') .addPlugin('\*[data-add-article="true"]', 'swAddArticle'); ersetzen durch: StateManager.addPlugin('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement') .addPlugin('\*[data-image-slider="true"]', 'swImageSlider', { touchControls: true }) .addPlugin('.product--image-zoom', 'swImageZoom', 'xl') .addPlugin('\*[data-image-gallery="true"]', 'swImageGallery') .addPlugin('\*[data-add-article="true"]', 'swAddArticle') .addPlugin('\*[data-modalbox="true"]', 'swModalbox'); Viele Grüße H. Thomas

2 Likes

Hallo zusammen, ich habe gerade das Ticket für die Version 5.1.1 gefixt. Hier fehlt wie @hth schon sagte die Neuinitialisierung des Modalbox Plugins. Ich möchte euch für die Zeit bis zum Release der neuen Version aber dennoch einen Hotfix zur Verfügung stellen. Fügt einfach folgenden Code in eine eigene Javascript-Datei ein und kompiliert den Theme einmal neu: $.subscribe('plugin/swAjaxVariant/onRequestData', function() { StateManager.addPlugin('\*[data-modalbox="true"]', 'swModalbox'); }); Viele Grüße, Stephan Pohl :shopware:

2 Likes

Wo muss ich diese selbst erstellte Javadatei einfügen? und wie benennen? Mir ist zufällig Aufgefallen, das wenn ich das Responsive Theme auswähle, läuft alles. Sobald ich mein verändertes Theme wähle, läuft nichts mehr bei den Varianten. Mein Theme ist eine Kopie nach anleitung von Responsive. Dort habe ich keine Veränderungen an den Varianten vorgenommen und keine Javadateien erstellt oder verändert FIX: Hatte in meinem Template ein details eine index.tpl datei, in dieser Lag der fehler. Ich habe diese gelöscht und nun läuft alles Vielen Dank

[quote=“wimpernshop”]Wo muss ich diese selbst erstellte Javadatei einfügen? und wie benennen? Mir ist zufällig Aufgefallen, das wenn ich das Responsive Theme auswähle, läuft alles. Sobald ich mein verändertes Theme wähle, läuft nichts mehr bei den Varianten. Mein Theme ist eine Kopie nach anleitung von Responsive. Dort habe ich keine Veränderungen an den Varianten vorgenommen und keine Javadateien erstellt oder verändert FIX: Hatte in meinem Template ein details eine index.tpl datei, in dieser Lag der fehler. Ich habe diese gelöscht und nun läuft alles Vielen Dank[/quote] Hi, Du erstellts Dir eine eigene .js Datei und füllst diese mit dem Code von Stephan, Name der Datei ist egal. Nennen wir sie einfach meine_javadatei.js Diese legst Du unter folgendem Pfad in Deinem Theme ab: /themes/Frontend/Custom/frontend/_public/src/js Dann musst Du Deine eigene .js Datei noch einbinden, dazu schreibst Du folgendes in Deine Theme.php rein unter /themes/Frontend/Custom/Theme.php /\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $javascript = ['src/js/meine\_javadatei.js']; Danach im Backedn Cache löschen und Theme neu kompilieren. Funktioniert nun alles wieder einwandfrei. Ich hätte dazu aber auch selbst nochmal eine Frage. Ist es möglich mehrere .js Datein gleichzeitig einzubinden? Ich hatte eigentlich bereits eine browser-notification.js in der Theme.php eingebunden. Diese gibt eine Meldung im Browser aus, sobald ein Kunde mit einem veralteten Browser meinen Shopo aufruft. Jetzt hatte ich direkt unter dieser eingebundenen Datei eine zuzsätzliche .js Datei mit entsprechenden Fix eingebunden. Dann wird mir aber das Theme nicht mehr kompiliert, der Prozess bleibt einfach stehen und es passiert nichts. Habe die browser-notification.js nun erstmal rausgenommen um den Fix verwenden zu können. Darf ich also nur eine .js Datei einbinden und in dieser müssen alle Änderngen rein oder was mache ich falsch? EDIT: habe jetzt einfach den Code aus der notification.js in meine eigene .js gehauen und auch nur meine eigene .js in der Theme.php eingebnden, works great! :sunglasses: Gruß

@trixx, das geht so class Theme extends \Shopware\Components\Theme { protected $css = array( 'src/css/soon.min.css' ); protected $javascript = array( 'src/js/mycollapse.js', 'src/js/soon.min.js' ); Achte auf die Kommas, nach jedem js-file. Hatte ich aucvh mal Probleme mit, bis kayyy mir erklärt hat wie die syntax ist… :slight_smile: ps: das letzte js-file braucht dann kein Komma mehr…

1 Like

[quote=„senana“]@trixx, das geht so class Theme extends \Shopware\Components\Theme { protected $css = array( 'src/css/soon.min.css' ); protected $javascript = array( 'src/js/mycollapse.js', 'src/js/soon.min.js' ); Achte auf die Kommas, nach jedem js-file. Hatte ich aucvh mal Probleme mit, bis kayyy mir erklärt hat wie die syntax ist… :slight_smile: ps: das letzte js-file braucht dann kein Komma mehr…[/quote] Hey, wie geil, was son Komma alles bewirken kann! :smiley: Besten Dank, läuft super!

Nochmal ne Frage an die Craigs: Ich habe so eine Uhr in der Buy-Box laufen, die zeigt den nächsten Versand an die ist jetzt nicht als Plugin eingefügt sondern so, ich sach mal “netto” als Schnipsel im Template. Kann ich denn SW oder dem Schnipsel (der Uhr) irgendwie beibringen auch nach der Variantenaktualisierung weiter zu laufen? Die Uhr ist nämlich bei Seitenaufruf da, und wenn man die Variante wechselt, ist die Uhr auch wech…

[quote=“senana”]Nochmal ne Frage an die Craigs: Ich habe so eine Uhr in der Buy-Box laufen, die zeigt den nächsten Versand an Kann ich denn SW oder dem Schnipsel (der Uhr) irgendwie beibringen auch nach der Variantenaktualisierung weiter zu laufen? Die Uhr ist nämlich bei Seitenaufruf da, und wenn man die Variante wechselt, ist die Uhr auch wech…[/quote] Das kommt darauf an, wie die Uhr im eigenen Template implementiert ist. Das jQuery-Modal Plugin von dem hier die Rede ist, hat auch nichts mit einem Plugin zu tun, das man im Shopware Backend installiert. Es ist nur eine Konstruktion innerhalb des Javascripts und so gesehen auch “netto” im Template integriert, genauso wie der Größenanzeige-Button des Ausgangsposts. 1. Ist die Uhr über Javascript als eigene Datei implementiert - z. B. als eigene Datei, die im

eingebunden wird - dann muss die Javascript-Funktion genauso neu augerufen werden wie in meinem oder den Post von Stephan beschrieben. Wobei die Methode von Stephan dafür besser geeignet ist, da damit auch nach einem Shopware-Update die Funktion erhalten bleibt. 2. Ist die “Uhr” innerhalb des Template (tpl-Datei) der Buybox implementiert, muss dieser Templateabschnitt zusätzlich in die Templatedatei des Ajax-Request eingebunden und das Javascript dort oder über den Weg aus 1. initialisiert werden.

Hallo, leider auch hier gleiches Problem mit den Varianten. Die Auswahl wird nicht ausgeführt. Der Hotfix hatte lediglich die Wirkung dass das Theme nicht mehr kompiliert worden konnte und sich dabei das Backend aufhing. Die direkte Änderung in der jquery.ajax-variant.js und nachträgliche Kompilierung hat auch keine Wirkung gezeigt. Hat jemand noch eine Idee? :frowning:

[quote=„mipow“]Hallo, leider auch hier gleiches Problem mit den Varianten. Die Auswahl wird nicht ausgeführt. Der Hotfix hatte lediglich die Wirkung dass das Theme nicht mehr kompiliert worden konnte und sich dabei das Backend aufhing. Die direkte Änderung in der jquery.ajax-variant.js und nachträgliche Kompilierung hat auch keine Wirkung gezeigt. Hat jemand noch eine Idee? :([/quote] Hi, wenn sich nach der Änderung das Theme nicht mehr kompilieren lässt, hast Du etwas verkehrt gemacht. Evtl. die .js Datei nicht richtig eingebunden. Guck Dir nochmal meine Schritt für Schritt Anleitung auf Seite 1 an. Was meinst Du denn mit „die Auswahl wird nicht ausgeführt“? Hier ging es ja darum dass sich nach der Auswahl einer Variante das jQuery-Modal nicht mitgeladen wird/wurde und man dadurch z.B. bem Klick auf „Versandkosten“ direkt auf die Versandkosten-Shopseite geleitet wurde, anstatt dass sich diese einfach nur im Modal-Fenster öffnet, was der Hotfix aber behebt. Ich hatte bis heute noch vereinzelt das Problem dass teilweise, bei Auswahl einer Variante, der Ladekringel nicht wegging und sich alles aufgehangen hatte. Das habe ich dann mal meinem Hoster mitgeteilt, die haben dann die Einstellungen vom Server zurückgesetzt, seit dem läuft alles bestens, falls Du das mit „Die Auswahl wird nicht ausgeführt“ meinst. Gruß

Hallo trixx, danke für deine Antwort. Wir haben Artikel mit dropdown-Varianten (Farbvarianten etc). Beim Klick auf eine andere, als die voreingestellte Farbe sollte sich auch das angezeigte Bildmaterial ändern. Tut es leider nicht mehr. Wähle ich anstatt schwarz nun blau aus, packe es in den Warenkorb, landet nur die vorausgewählte Variante (in dem Fall schwarz) in den Warenkorb. *edit* Aber dein Tipp war Gold wert. Ich dachte mein Problem hängt mit diesem hier definitiv zusammen. Habe nun die Lösung hier gefunden: post139160.html?hilit=varianten#p139160

Hallo hth, danke für die Erklärung. Ich glaube das ist der Fall [quote=„hth“] Das kommt darauf an, wie die Uhr im eigenen Template implementiert ist […] - z. B. als eigene Datei, die im

eingebunden wird - dann muss die Javascript-Funktion genauso neu augerufen werden wie in meinem oder den Post von Stephan beschrieben. […][/quote] denn so habe ich das Script eingebaut, Auszug aus der theme.php protected $javascript = array( ‚src/js/mycollapse.js‘, ‚src/js/soon.min.js‘, ‚src/js/mybuyboxreload.js‘ ); soon.min.js ist also das Uhren Script. Aber [quote=„hth“] […] 2. Ist die „Uhr“ innerhalb des Template (tpl-Datei) der Buybox implementiert, muss dieser Templateabschnitt zusätzlich in die Templatedatei des Ajax-Request eingebunden und das Javascript dort oder über den Weg aus 1. initialisiert werden.[/quote] In der Templatebox habe ich die die Div-Container die die Uhr ebenfalls benötigt, ist aber dann im Grunde einfaches htmml [code] {extends file=‚parent:frontend/detail/index.tpl‘} {block name=‚frontend_detail_data_attributes‘ append}-

„11:00:00“ || $smarty.now|date_format:"%u" == „6“ || $smarty.now|date_format:"%u" == „7“}data-due=„monday at 11:00:00“{else}data-due=„reset at 11:00:00“{/if} data-format=„d,h,m,s“ data-padding-days=„00“ data-padding-hours=„00“ data-padding-minutes=„00“ data-padding-seconds=„00“ data-scale-max=„xxs“ data-labels-days=„Tagen“ data-labels-hours=„Std.“ data-labels-minutes=„Min.“ data-labels-seconds=„Sek.“ data-face=„flip color-light corners-round shadow-soft“> Nächster Versand in: 
[/code] Könntest Du mir evtl. noch genauer sagen, was ich jetzt machen müsste?

[quote=„senana“]Hallo hth, Könntest Du mir evtl. noch genauer sagen, was ich jetzt machen müsste?[/quote] $.subscribe('plugin/swAjaxVariant/onRequestData', function() { StateManager.addPlugin('\*[data-modalbox="true"]', 'swModalbox'); Countdown(element); }); Countdown(): Die Javascriptfunktion, die den Countdown initialisiert. element: Die CSS-Klasse/ID, die die Funktion Countdown() zur Auswahl des HTML-Elements verwendet. Wie die genau heißen, kann man aus den Angaben nicht erkennen. Falls das als Anleitung nicht ausreicht, bieten wir auch kostenpflichtigen Support für derartige Fragen auf Basis von Zeitkontingenten.

Ich habe gerade gesehen, dass man in den Templateeinstellungen auch die Ajax-Funktion bei Varianten ausschalten kann: Theme konfigurieren -> Konfiguration -> Variaten (Schreibfehler ist drin) Wechsel über Ajax (X) Wenn aktiv, dann werden Varianten per AJAX nachgeladen, statt die komplette Seite neuzuladen. Modalbox funktioniert wieder auch der Variantenname wird dann wieder korrekt hinter dem Artikelnamen angezeigt

Hallo hth, danke für die Erklärung finde aber den Namen der Funktion nicht, und deshalb scheint es nicht zu klappen. Ist aber auch nicht so wichtig, denn ich habe noch andere Probleme mit dem Ajax-reload, z.B. das die Social Buttons von kayyy sich so merkwürdig verkleinern. Deshalb, und weil das mit dem Varianten für mich eher nebensächlich ist habe ich gemacht was @ kay1980 sxhreibt, ich habe das Ajax-Reload erst mal abgeschaltet.