(Farb) Varianten automatisch vorauswählen auf der Artikel Detail Seite

Shopware 5
1

Hallo zusammen, ich versuche aktuell über js eine Funktion einzubauen, die es ermöglicht, dass eine Farbvariante bereits vorab ausgewählt ist wenn ein User von der Listing Seite auf die Produkt Detailseite gelangt.

Mit diesem Code, unter MeinTheme/frontend/_public/src/js scheitere ich jedoch daran und auch die console.log schreibt mir nichts in die konsole… was mache ich falsch? Muss ich die js Datei noch irgendwo registrieren?

$(function() {
var colorOptions = document.getElementsByClassName(„option–input“);

    console.log(colorOptions.length);
    if (colorOptions.length > 0) {
        colorOptions.first().prop("checked", true);
    }

    console.log(colorOptions[0].checked);

});

Vielen Dank vorab für eure Hilfe

2

Ich persönlich würde hier nur mit dem jQuery Framework arbeiten. Ist jetzt keine Antwort auf deine Frage, nur ein Vorschlag.

3

hab vergessen die Datei in der Theme.php zu registrieren … shame on me.

@R4M kannst du mir verraten wieso? Meine Lösung funktioniert nämlich auch nur teilweise. Die Variante wird vorausgewählt, zumindest ist diese checked, aber leider nicht wirklich. Mach das Sinn? Naja, im Screenshot wird es vielleicht deutlicher:

image
image1109×255 29.1 KB

4

Zweites Problem bei meiner Lösung, wenn eine Farb-Variante vorab ausgewählt ist, bleibt diese auch ausgewählt wenn ich eine Größen-Variante wähle die nicht in dieser Farb-Variante verfügbar ist. Der User kann dann auch diese Variante bestellen, obwohl es in dieser Farbe und Größe NICHT verfügbar ist. Hierfür müsste ich vermutlich noch eine Abfrage einbauen.

5

Wenn man dann eben die „richtige“, also einzig verfügbare Variante (in dem Fall Gr. 36) auswählt, wird die vorausgewählte Farbvariante auch als „checked“ angezeigt:

image
image1132×434 55.9 KB

6

ich habe jetzt mehrere Optionen durchgespielt, aber leider scheitere ich daran… Hier ist mein letzter Versuch, bei dem ich mich auf das ‚onPluginsInitialized‘ subscribe (hier hoffte ich, dass meine Abfrage erst ausgeführt wird, wenn auch bereits das Template fertig geladen hatte… leider erfolglos. Hat jemand eine Idee?

$.subscribe(‚onPluginsInitialized‘, function(){

    if (colorOptions.length > 0) {
        colorOptions[0].checked = true;
    }