add-to-cart-button unterbinden wenn attribut nicht gewählt

Thema wurde von ff-webdesigner, 27. August 2021 erstellt.

  1. ff-webdesigner

    ff-webdesigner Erfahrener Benutzer

    Registriert seit:
    22. Januar 2014
    Beiträge:
    510
    Danke erhalten:
    41
    Danke vergeben:
    59
    hi beisammen,

    unter https://www.expresstrauringe24.de/Silber-Eheringe/Silber---Einfarbig/si-29.html kann man artikel in den warenkorb legen auch dann wenn die attribute auf "bitte auswählen" stehen. unter honeygrid template 3.8 funktionierte folgendes js korrekt:

    Code:
    // nur wenn alle optionen ausgewählt wurden kauf ermöglichen
    $('input[name="btn-add-to-cart"]').click( function(event)
        {
            if($('.modifiers-selection .form-group:nth-child(1) select option:selected').index()==0 ||
            $('.modifiers-selection .form-group:nth-child(3) select option:selected').index()==0 || ($('.modifiers-selection .form-group:nth-child(1) select option:selected').index()==2 &&
            $('.modifiers-selection .form-group:nth-child(3) select option:selected').index()==2))    {
                alert ("Bitte wählen Sie die Produktoptionen aus!");
                return false;
            }
        }
    );
    
    unter malibu theme greift dieser code nicht mehr. auch das hinzufügen von event.preventDefault(); oder abändern des jquery selectors auf den $('input[name="btn-add-to-cart-fake"]') bringen nichts. der artikel landet IMMER sofort im warenkorb, code wird ignoriert. warum?
     
  2. Sergej (Gambio)

    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    1. Frage: Warum so kompliziert?
    2. Frage: Wo wird der Code eingebunden?
    3. Frage: Hast du die EventListener in cart_handler.js berücksichtigt?
     
  3. ff-webdesigner

    ff-webdesigner Erfahrener Benutzer

    Registriert seit:
    22. Januar 2014
    Beiträge:
    510
    Danke erhalten:
    41
    Danke vergeben:
    59
    hi sergej,

    eingebaut habe ich das ganze in \GXModules\ff-webdesigner\Shop\Themes\All\Javascript\Global\custom.js wird auch geladen und macht einiges andere bei dropdowns und kombinationen richtig mit alerts.

    was wäre einfacher?

    auf welche event listener in cart_handler.js müsste ich achten?
     
  4. ff-webdesigner

    ff-webdesigner Erfahrener Benutzer

    Registriert seit:
    22. Januar 2014
    Beiträge:
    510
    Danke erhalten:
    41
    Danke vergeben:
    59
  5. Sergej (Gambio)

    Sergej (Gambio) Erfahrener Benutzer
    Mitarbeiter

    Registriert seit:
    1. August 2016
    Beiträge:
    336
    Danke erhalten:
    205
    Danke vergeben:
    69
    @ff-webdesigner nah dann mal los ;)

    Zunächst einmal machen wir aus dem
    Code:
    \GXModules\ff-webdesigner\Shop\Themes\All\Javascript\Global\custom.js
    ein
    Code:
    \GXModules\ff-webdesigner\Shop\Themes\All\Javascript\ProductInfo\custom.js
    .

    Ich gehe von aus, dass bei dir jedes Attribut als erste Option ein "bitte auswählen" hat.
    Alles andere wäre irgendwie ungewohnt.

    Nun schauen wir uns dein JavaScript an. Dieser besagt, dass bei jedem weiteren Attribut, welcher hinzukommen könnte, du dein JavaScript stets anpassen/erweitern müsstest. Das wollen wir nicht und vereinfachen dein JavaScript ein wenig.
    Desweiteren solltest du beachten, das ein Event der in einem JavaScript angestoßen wird, von innen nach außen läuft.

    Folgend dein JavaScript in alternativer Form:
    Code:
    // nur wenn alle optionen ausgewählt wurden kauf ermöglichen
    $('input[name="btn-add-to-cart"]').on('click', function() {
            // Wir suchen zunächst nach einigen Drinks für unsere Party...
            var $meineDrinks = $('[name*="modifiers[attribute]"]');
            // ...wollen jedoch nicht, dass unbekömmliche Drinks von unseren Gästen getrunken werden.
            var $schlechterDrink = false;
            // Wenn wir einige Drinks gefunden haben sollten...
            if ($meineDrinks.length) {
                // ...verkosten wir jeden Drink.
                $.each($meineDrinks, function() {
                    // Schlechte Drinks mögen wir nicht und gehören auch nicht auf unsere coolen Party.
                    if ($('option:selected', $(this)).index() === 0) {
                        $schlechterDrink = true
                        // Sollte ein Drink uns nicht schmecken, teilen wir es den anderen Gästen lautstark mit.
                        alert("Bitte wählen Sie die Produktoptionen aus!");
                        // Damit unsere Gäste es aber auch besser nachvollziehen können,
                        // welcher Drink den nicht schmecken soll, halten wir diesen hoch.
                        this.setCustomValidity('Bitte wählen Sie die Produktoptionen aus!');
                        this.reportValidity();
                       
                        return false;
                    }
                   
                    $schlechterDrink = false;
                    this.setCustomValidity('');
                });
                // Leider haben einige unserer Gäste jedoch von den schlechten Drinks bereits getrunken gehabt.
                if($schlechterDrink === true){
                    // Bei diesen dreht sich nun der Kopf und laufen allmählich grün an.
                    // Ein Konterdrink könnte abhilfe schaffen...
                    $('.btn-add-to-cart-fake').hide();
                    // ...damit der Gast unsere coole Party auch weiterhin genießen darf.
                    $('.js-btn-add-to-cart').show();
                   
                    return false;
                }
            }
        }
    );
    Prüfe mal die Alternative in deinem Shop gegen.
    Sollte diese ebenfalls nicht tun, könntest du einen Ansatz über das HTML verfolgen.
    Die Auswahlfelder der Attribute als Pflichtangabe markieren und keine Option vorausgewählt laden.
    Der Browser sollte je nach eine Meldung anzeigen "Dies ist eine Pflichtangabe" oder so ähnlich :)