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

12

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é?

— JGeer
source

14

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).

— Marius
source

6

Agace l'utilisateur?! Pas de problème, nous le faisons quand même: D

— Fabian Blechschmidt

5

@FabianBlechschmidt. Pourquoi pas? Nous sommes ennuyés lors de son développement, l'utilisateur est ennuyé lors de son utilisation. Voilà ce que signifie le compromis. Tout le monde y perd. :)

— Marius

Tu es génial Marius. comment puis-je faire cela en utilisant Ajax?

— Naveenbos

6

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.

— Jetha Chan
source

Salut Jetha J'ai essayé cela, mais il montre le checkout / cart / updatePost / 302 Trouvé 1.71s une idée pourquoi il montre comme ça?

— Naveenbos

Les paramètres sont ce chariot [137] [qté] 1 chariot [139] [qté] 2 form_key zA1lLphVHPsEu4ux En utilisant ceci, comment puis-je poster ceci pour mettre à jour l'action de post

— Naveenbos

Votre panier affiche-t-il les quantités mises à jour?

— Jetha Chan

Ce n'est pas censé retourner quoi que ce soit; plus au point que vous n'êtes pas vraiment censé vous soucier de la valeur de retour lorsque vous le faites de cette façon. Points à vérifier: - votre formulaire fonctionne-t-il lorsqu'il est soumis normalement, c'est-à-dire sans AJAX? - lorsque les valeurs sont modifiées à l'aide d'AJAX, les valeurs dans le panier (c'est-à-dire ouvrir une autre fenêtre de navigateur) changent-elles?

— Jetha Chan

1

Continuons cette discussion dans le chat .

— Jetha Chan

0

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()"

— snh_nl
source

0

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();   
    }
}

— Lucas Julio Silveira
source

0

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

— TheFrakes
source