Neu Bei VarKombi-Artikeln, wie immer eine Farbe und Größe vorauswählen, damit alle Bilder angezeigt werden?

[YTSVXKNMURZEHFW]

@Manuel Pietzsch

Wir haben ein Problem mit dem Standard- Shop von JTL. Vielleicht gibt es eine einfache Lösung, aber wir konnten im Guide und im Shop-Backend nichts finden.

Problem:
Wir haben VarKombi-Artikel, also z.B. ZWEI Farben in verschienden Größen.
In JTL-Wawi haben wir je ein Hauptbild beim Vater hinterlegt und ALLE weiteren Bilder/Ansichten bei den jeweiligen Farben/Childs-Artikeln.

Wenn wir nun einen Artikel im JTL-Shop aufrufen, erscheinen nur die zwei Hauptbilder aus dem Vater-Artikel.
Erst wenn eine Farbe UND eine Größe ausgewählt wird erscheinen dann die weiteren Bilder.

Gibt es eine Möglichkeit, dass immer eine Farbe und eine Größe vorausgewählt ist, damit man auch sofort die weiteren Bilder sieht und nicht nur die zwei Hauptbilder, denn die Kunden meinen dann es gibt nur zwei Bilder und machen dann wieder zu?

Danke im Voraus und freundliche Grüße

CU

 

[frankell]

Hallo @YTSVXKNMURZEHFW,

interessanter Benutzername. Ist das ein Akronym?

Was Du möchtest, ist quasi ein "Default"-Kind für den Vaterartikel. Mir ist weder eine Shop- noch eine Wawi-Einstellung diesbezüglich bekannt. Zumindest in meinem Verständnis widerspricht das aber auch der Systematik. Denn wenn Du einen Vaterartikel aufrufst, tust Du genau das, Du rufst den Vaterartikel auf, bei dem keine Variationen spezifiziert sind. Dieser ist aber ein eigenständiger Artikel, der eigenen Artikelbilder hat. Sobald Du die Variationen vollständig auswählst, wird ein anderer eigenständiger Artikel aufgerufen, der Kindartikel, mitsamt seinen eigenen Bildern.

Bei einem Default-Kind besteht leider immer die Gefahr, dass Kunden versehentlich diesen bestellen. Oder sie glauben, es gäbe das Produkt nur in dieser sofort angezeigten Varkombi, weil sie nichts auswählen mussten, um zu einem bestellbaren Artikel zu kommen.

Es würde mich wundern, wenn JTL so etwas von sich aus möglich macht. Das bedeutet aber nicht, dass das technisch unmöglich ist. Ist dann entweder eine Eigenentwicklung für den Shop, oder aber Du nimmst ein fertiges Plugin wie eines von diesen hier (vielleicht gibt es auch noch weitere):

• https://www.jtl-software.de/extension-store/vorauswahl-von-variationskombinationen-jtl-shop-5
• https://www.jtl-software.de/extensi...artikel-in-kategorieansicht-zeigen-jtl-shop-5

Kostenlos und sehr einfach umzusetzen wäre noch diese Variante: Ein paar Bilder der Kindartikel auch beim Vaterartikel verwenden, oder gleich eine Bildkomposition.
Ob ggf. eine zusätzliche Anzeige von weiteren Bildern beim speziellen Vaterartikel über den OnPage Composer möglich ist, entzieht sich meiner Kenntnis. Aber könntest Du auch mal probieren.

Der eigentlich angesprochene @Manuel Pietzsch (Product Owner der Wawi und nicht des Shops) kann sich natürlich auch noch äußern und mir gerne widersprechen, wenn bspw. die 1.10. unter einer Tonne von neuen Features auch das als neues JTL-Attribut vorsieht.

 

[Specker]

Also ich habe in meinem Shop das gleiche Problem, daher habe ich mir da selber ne Lösung gebastelt.

Ob die jetzt für dich was taugt kann ich nicht beurteilen, eventuell testest du das einfach mal.

Beachte:
Ich nutze "swatches" für die Farben und "dropdown" für Größen.
Das Script wird wahrscheinlich nur dann gehen wenn du das auch so hast in deinem shop.
Sonst sag mir einfach mal was du nutzt und ich ändere den code um.

In deinem Child Template Ordner auf dem Server befindet sich ein Ordner "js". Dort liegt die Datei "custom.js".
In diese schreibst du folgenden Code:

(function ($) {
    'use strict';

    $(window).on('load', function () {
        // Warte auf das Vorhandensein der Farbelemente und prüfe, ob auch Größen vorhanden sind
        var checkVariationsInterval = setInterval(function() {
            var firstAvailableColorLabel = $('.product-offer .swatches-image:not(.swatches-not-in-stock)').first();
            var firstAvailableSize = $('.product-offer .variations .custom-select option').not('[value=""]').first();

            // Überprüfe, ob sowohl eine auswählbare Farbe als auch eine auswählbare Größe vorhanden ist
            if (firstAvailableColorLabel.length > 0 && firstAvailableSize.length > 0) {

                // Wähle die erste verfügbare Farbe, falls noch keine ausgewählt ist
                var firstAvailableColorInput = firstAvailableColorLabel.find('input[type="radio"]');
                if (!firstAvailableColorInput.is(':checked')) {
                    firstAvailableColorLabel.click(); // Simuliere den Klick auf das Label
                }

                // Wähle die erste verfügbare Größe
                var selectElement = $('.product-offer .variations .custom-select');
                if (selectElement.val() === "") {
                    selectElement.val(firstAvailableSize.val()).change();
                }

                clearInterval(checkVariationsInterval); // Stoppe den Intervall, nachdem Farbe und Größe ausgewählt wurden
            }
        }, 100); // Überprüfe alle 100ms, ob die Farb- und Größenelemente verfügbar sind
    });

})(jQuery);

Der Code sorgt dafür, dass Farbe und Größe vorausgewählt werden, was ja dann zu deinem gewünschten Effekt führen sollte.
Sofern es sich um einen Artikel mit 2 Variations Kombinationen handelt zumindest.
Wenn immer das erste Child ausgewählt werden soll, unabhängig ob es mehrere Var Kombinationen gibt, kannst du den folgenden Code nehmen.
Dort fehlt dann die Abfrage nach Farbe und Größe:

(function ($) {
    'use strict';

    $(window).on('load', function () {
        // Warte auf das Vorhandensein der Farbelemente
        var checkColorsInterval = setInterval(function() {
            var firstAvailableColorLabel = $('.product-offer .swatches-image:not(.swatches-not-in-stock)').first();
           
            if (firstAvailableColorLabel.length > 0) {
                var firstAvailableColorInput = firstAvailableColorLabel.find('input[type="radio"]');
               
                if (!firstAvailableColorInput.is(':checked')) {
                    firstAvailableColorLabel.click(); // Simuliere den Klick auf das Label
                }
               
                clearInterval(checkColorsInterval); // Stoppe den Intervall, nachdem die Farbe ausgewählt wurde
            }
        }, 100); // Überprüfe alle 100ms, ob die Farbelemente verfügbar sind

        // Automatische Auswahl der ersten verfügbaren Größe
        var firstAvailableSize = $('.product-offer .variations .custom-select option').not('[value=""]').first();
        if (firstAvailableSize.length > 0) {
            var selectElement = $('.product-offer .variations .custom-select');
            selectElement.val(firstAvailableSize.val()).change();
        }
    });

})(jQuery);