Neu Artikelvariation als PopUp aufrufen und Wert zurückgeben

[rwillhaus]

Hallo,
ich habe in meinem JTL Shop die Artikelvariation Farbe.
Da aus einer enormen Anzahl von Farben ausgewählt werden kann, will ich diese über ein PopUp anzeigen.
Das PopUp öffnet eine spezielle Seite die ich angelegt habe auf welche sich die Farben anschauen lassen.
Nun möchte ich es einrichten, dass wenn eine Farbe ausgewählt wurde, sich das PopUp schließt, und die entsprechende Farbe in der Select-Box ausgewählt ist.
Das PopUp lässt sich bereits über einen Link mit der Klasse "popup" öffnen. Allerdings wird die Farbe bei Klick auf dem Link nicht für die Textbox übernommen.

Seite: http://u18256ck.test3.jtl-hosting.de/ExtraPlus <-- unter der Farbenbox ist ein Link welcher die Auswahl öffnet.

Danke und Gruß

 

[rwillhaus]

Hallo nochmal,
ich habe jetzt folgendes Beispiel gefunden.
http://jsfiddle.net/jyZew/1267/
Wenn ich das allerdings einbaue, erscheint bei dem Click nicht das verstecke Menü.
Woran kann das liegen? Kollidiert das mit dem JTL internen JavaScript?

 

[martinwolf]

Hallo,
ich habe in meinem JTL Shop die Artikelvariation Farbe.
Da aus einer enormen Anzahl von Farben ausgewählt werden kann, will ich diese über ein PopUp anzeigen.
Das PopUp öffnet eine spezielle Seite die ich angelegt habe auf welche sich die Farben anschauen lassen.
Nun möchte ich es einrichten, dass wenn eine Farbe ausgewählt wurde, sich das PopUp schließt, und die entsprechende Farbe in der Select-Box ausgewählt ist.
Das PopUp lässt sich bereits über einen Link mit der Klasse "popup" öffnen. Allerdings wird die Farbe bei Klick auf dem Link nicht für die Textbox übernommen.

Das kann so nicht funktionieren. Jeder Variationswert hat in jedem Artikel eine eindeutige ID (KEigenschaftWert). Diese dient als Indikator welcher Wert in welcher Variation genau gewählt wurde. Du kannst daher in deinem Farbfenster nicht einfach eine CMS Seite laden und dann darüber eine Zuordnung erwarten. Du kannst maximal alle Werte der Farbe die man im jeweiligen Artikel auch tatsächlich auswählen kann, als Modal laden. Musst jedoch alle nötigen Eigenschaften mit übertragen, sodass dann per Click auch die Variations unten im korrekten Wert gesetzt wird.

 

[rwillhaus]

Hallo,
danke. Wenn ich das richtig verstehe könnte ich also statt einer externen Seite ein Modal in der productdetails/variations.tpl einbinden, in welchem zu jeder gefundenen Farbe ebenfalls eine Auswahl für das Modal generiert wird.
Soweit in Ordnung. Trotzdem frage ich mich, wie ich den Link (über Button oder Textlink) so setzen kann, dass dadurch im Hauptfenster der Form-Field-Wert direkt auf die entsprechende Farbe gesetzt werden kann?

Ist die Frage so verständlich? Ich habe mal ein wenig nach den Bootstrap-Modal Funktionen geguckt und denke, dass zum Übergeben einer Variable aus dem modal eine ID des Modals fehlt. Wie kann ich diese setzen um mich auf die ID zu beziehen?

Danke

 

[martinwolf]

Ich habe die Frage vorher schon verstanden. http://bfy.tw/9V00

 

[rwillhaus]

Ok super.
Das hilft. Trotzdem bleibt die Frage warum das Standard-modal welches durch die class popup erzeugt wird keine ID besitzt. Diese benötige ich um mich in den Funktionen auf das modal zu beziehen. Sehe ich das richtig?

 

[martinwolf]

Nicht unbedingt. Du kannst ja für $('.modal #meinevariationen') ein Event starten. Dieser Selektor sollte ja eindeutig sein und nur auf der Detailseite existieren.

 

[rwillhaus]

Ok. Also das mit dem PopUp und der Übergabe klappt jetzt.
Nun habe ich allerdings Probleme in der Variationsliste die Farbe zu ändern. Welche(n) Wert(e) muss ich da genau ändern um die neue Auswahl zu aktivieren?
Auch hier ist wieder das Problem, dass <button> keine eindeutige ID besitzt.

Haben Sie hierbei noch einen Tipp?

 

[martinwolf]

Der gewählte Wert hat bereits eine eindeutige ID, 136 oder 137 im genannten Beispiel. Es muss also die Option "selected" werden deren Attribut "data-value" dem Wert entspricht.

 

[css-umsetzung]

das was du da machen möchtest wird mehr oder weniger aufwendig.

du musst ja als erstes alles irgendwie in dein modal laden, also dein komplettes select aufgesplittet.
die Buttons benötigen dann ein klick event welches dann nach möglichkeit folgende aktionen ausführen sollte

// setzt das Select auf deinen Wert
$('select[name="eigenschaftwert[xxxx]"').selectpicker('val', xxxx)

// führt dann den request aus um den content zu laden oder die möglichen anderen Varianten zu sperren oder freizugeben
$.evo.article().variationSwitch($("option[value='xxxx']"),true)

Ich habe jetzt nicht geschaut, ob JTL das zu 100% auch so macht, aber es sollte gehen. xxx ist immer eine Zahl, wenn du die Elemente im quellcode anschaust, erkennst du welche zahlen da dan rein kommen.

 

[rwillhaus]

Super. Vielen Dank.
Um im PopUp eine Liste aller verfügbaren Farben auszugeben, habe ich eine foreach Schleife eingebaut die auch ganz gut arbeitet.

Den Code Ausschnitt habe ich hinzugefügt. Allerdings

$('.farbe').click(
    function(e){
        $('select[name="eigenschaftwert[46]"').selectpicker('val', 136)
        $.evo.article().variationSwitch($("option[value='136']"),true)
        $('#myModal').modal('hide');
    });

Der beim Aufrufen der Seite ausgewählte Eigenschaftswert ist die 46. Opalgrün hat die 136.
Leider ändert er nur kurz und setzt es dann wieder auf "bitte wählen" zurück. Hinzu kommt, dass dann hinter jedem Eintrag aus der Dropdownliste "in der Auswahl nicht verfügbar steht.
Wo liegt der Fehler?

 

[css-umsetzung]

ja weil deine Varianten alle nicht verfügbar sind

 

[rwillhaus]

Ok. Irgendwie stehe ich auf dem Schlauch. Sie sind doch verfügbar. Kurz wählt er sie ja auch aus. Oder muss ich noch mehr Werte mit der Funktion ändern?

 

[css-umsetzung]

also ich hatte das bei mir probiert und da ging das, ich schaue mal kurz bei dir

 

[css-umsetzung]

Ahh mach mal bitte nichts an deiner Seite, ich teste das mal durch.

 

[css-umsetzung]

ich habe jetzt mal geschaut, bei mir geht das, allerdings würde man in der zweiten Zeile eher das hier übergeben

$.evo.article().variationSwitch($("select[name='eigenschaftwert[46]']"),true)

Bei mir wird wie ich es kenne erst wird über den request alles auf disabled gestellt und dann werden die im gleichen request einzelnen varianten aktiviert.
Ich weiß nicht was bei dir in der Wawi anders ist von den Artikeln her, ich arbeite in den Varianten ohne Lagerbestand, ich müsste die mal bei mir aktivieren, eventuell sehe ich dann das fehlende Stück..

 

[css-umsetzung]

bei mir laeuft das so auch mit einem Bestand, der richtige, nicht verfügbare Artikel wird gesperrt, alle anderen varianten sind verfügbar

 

[rwillhaus]

Vielen Dank für die ganze Mühe.
Also ich habe jetzt gerade gemerkt, dass bei Aufruf der Seite mit dem Safari-Browser der Klick auf den Link im PopUp keine Wirkung zeigt. Kann es noch ein grundsätzliches Problem geben?
Auch wenn ich die Links als buttons und nicht als divs einstelle, führt er beim Klick auf eine Farbe direkt das Ablegen in den Warenkorb durch.

Ich könnte im WaWi mal die Lagerbestandseinstellung deaktivieren.

 

[css-umsetzung]

Du solltest die modale Box besser auch nicht innerhalb dieser Form haben, das macht sich nicht so gut.

Also ich habe es wie geschrieben mit einem Warenbestand getestet und es sah gut aus, um den safari würde ich mir vorerst keine Sorgen machen, das kann eine z-index geschichte sein oder was auch immer, ich würde mich zuerst um die grundfunktion kümmern, die man ja auch in der console gut durchspielen kann, dann kommt erst das schön machen

Die Einstellungen bei dir wären interessant und ob du mit echten Kindern oder nur Varianten arbeitest.

 

[rwillhaus]

Ok. Nochmals vielen Dank.
Ich probiere noch ein wenig aus.
Eine letzte Frage aber:
Ich hab hier nochmal meinen Code ein wenig verändert. Kann ich den so anwenden oder enthält der bereits Fehler?

$('.farbe').click(
    function(e){
        e.preventDefault;  // if your a has an href attribute, this prevents the browser
                           // following that link.
        var farbValue = $(this).val();
        var selectNr = "{$Variation->kEigenschaft}";

        $("select[name='eigenschaftwert[." + selectNr + ".]'").selectpicker('val', farbValue)

        $.evo.article().variationSwitch($("select[name='eigenschaftwert[." + selectNr + ".]']"),true)
        
        $('#myModal').modal('hide');
    });