Mise à jour automatique de la quantité du panier lors du changement de quantité

Dans le panier par défaut de Magento, lorsque le client modifie la quantité, il / elle doit appuyer sur le bouton pour mettre à jour la quantité.

Existe-t-il un moyen pour le panier de mettre à jour la quantité automatiquement lorsque l'utilisateur saisit un autre numéro dans le champ de quantité?

Modifiez d'abord le modèle de panier /app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlet ajoutez un identifiant sur l'élément de formulaire pour un accès plus facile. Disons que vous ajoutez 'id = "cart-form"';

Modifiez maintenant les modèles qui rendent les articles du panier:

• app / design / frontend / {package} / {theme} /template/checkout/cart/item/default.phtml
• app / design / frontend / {package} / {theme} /template/downloadable/checkout/cart/item/default.phtml

et sur l' <input>élément portant le nom, cart[<?php echo $_item->getId() ?>][qty]ajoutez ceci:

onchange="$('cart-form').submit()"

Mais je ne recommande pas de faire ça. C'est vraiment ennuyeux pour les utilisateurs. (au moins pour moi).

En supposant que votre site a jQuery inclus en mode sans conflit, voici une façon de le faire de manière asynchrone (beaucoup moins ennuyeux!).

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

Je dois souligner que cela fait les hypothèses suivantes:

• Votre panier d'achat vit dans un élément avec l'ID de shopping-cart-table
• Vos champs de saisie pour la quantité ont un attribut de nom qui se termine par [qté]

Il devrait être facile d'ajuster les sélecteurs du code sur les lignes 2 et 5 respectivement en fonction de votre situation.

Editez ces deux fichiers

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

et sur l'élément portant le nom, cart[<?php echo $_item->getId() ?>][qty]ajoutez ceci:

onchange="this.form.submit()"

Si votre version de jQuery est ancienne, vous ne réussirez pas. J'ai trouvé un moyen qui est comme suit, suivez les instructions de notre ami Marius pour insérer

/app/design/frontend/{package}/{theme}/template/checkout/cart.phtmlet ajoutez un identifiant sur l'élément de formulaire pour un accès plus facile. Disons que vous ajoutezid="cart-form"

Maintenant, ouvrez le fichier

app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

Faites défiler jusqu'à la fin du fichier et vous trouverez le javascript qui incrémente et décrémente la quantité. La fonction ressemblera à ceci:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

Changer pour cela:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}

Dans le cas où vous n'avez pas encore chargé jQuery, vous pouvez également trouver l' <input> élément (ou dans mon cas un <select>élément depuis que j'ai construit un champ déroulant pour sélectionner le montant) avec le nom name="cart[<?php echo $_item->getId() ?>][qty]"et ajouter ceci:

onchange="this.form.submit()"

Le fichier phtml que vous devez éditer se trouve ici:

app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml