Neu Shop 5 - Konfigurator Modifikation – Function zur sofortigen Item Übernahme

[hii]

Hallo Leute,

wir modifizieren gerade unseren Konfigurator mit dem JTL Shop 5.1.5 und dem NOVA Template, in dem wir gewisse Items (type="radio") auf Klick eins anderen Items an- oder abwählen wollen.

Dies haben wir soweit auch erfolgreich mit JS auf diese Art und Weise lösen können:

[...]
 
 if(paket === 3) {

     // Nicht mögliche inaktiv setzten und Auswahl zurücksetzten
     $('#item86').prop('disabled', true).prop('checked', false); //Sp 10 INACTIVE
     $('#item87').prop('disabled', true).prop('checked', false); //Sp 20 INACTIVE
     $('#item1092').prop('disabled', true).prop('checked', false); //Sp 30 INACTIVE               
     $('#item2388').prop('disabled', true).prop('checked', false); //Sa 10 INACTIVE
     $('#item2389').prop('disabled', true).prop('checked', false); //Sa 20 INACTIVE

     // Mögliche aktiv setzten und Auswahl setzten
     $('#item2390').prop('disabled', false).prop('checked', true); //Sa 30 ACTIVE SELECTED                 
 
 }

[...]

Visuell wird alles direkt korrekt angezeigt, jedoch werden die ausgewählten Items tatsächlich erst nach dem nächsten Klick korrekt übernommen.


Mit dem JTL Shop 4 war es möglich dies mit dem folgenden JS-Code zu Triggern, so dass die Übernahme des entsprechenden Items sofort (ohne weiteren Klick) erfolgte:

erniedrigeArtikelAnzahl('quantity', false, 0);

Es würde sehr helfen, wenn jemand eine Idee hat, wie dies mit dem Shop 5 umgesetzt werden könnte.


Vielen Dank und beste Grüße

 

[hii]

Sehe ich es richtig, dass die Funktion in der "jtl.article.js" auf der Zeile 227 genau diese Aufgabe hat:

[...]
         registerConfig: function() {
            var that   = this,
                config = $('#product-configurator')
                    .closest('form')
                    .find('input[type="radio"], input[type="text"], input[type="checkbox"], input[type="number"], select'),
                dropdown = $('#product-configurator')
                    .closest('form')
                    .find('select');

            if (dropdown.length > 0) {
                dropdown.on('change', function () {
                    var item = $(this).val();
                    $(this).parents('.cfg-group').find('.cfg-drpdwn-item.collapse.show').collapse('hide');
                    $('#drpdwn_qnt_' + item).collapse('show');
                })
            }

            if (config.length > 0) {
                config.on('change', function() {
                    that.configurator();
                })
                    .on('keypress', function (e) {
                        if (e.key === 'Enter') {
                            return false;
                        }
                    });
                // timeout fixes problem with loading order of bootstrap dropdowns
                setTimeout(function(){
                    that.configurator(true);
                },0);
            }
        },
 [...]

Nur wie führe ich dann diese Funktion aus, nachdem meine eigenes JS die Werte selektiert hat und meine Funktionen durchgelaufen sind?

 

[hii]

Inzwischen habe ich eine einfache Lösung finden können.

Wenn man z.B. statt:

$('#item2390').prop('disabled', false).prop('checked', true); //Sa 30 ACTIVE SELECTED

es wie folgt umsetzt:

$('#item2390').prop('disabled', false).click(); //Sa 30 ACTIVE SELECTED

wird alles soweit korrekt getriggert. 😊

Grüße