THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour la communauté !

Dans le site que je développe, je dois, dans la boutique, pouvoir ajouter plusieurs produits dans le panier en un seul clique. Pour être plus clair j'ai 6 articles dans ma boutique que j'ai affiché sous forme de tableau, chaque ligne se compose de la sorte : image du produit | prix HT | prix TTC | choix de la quantité.
A la fin de ce tableau j'ai un bouton qui devrait me permettre d'ajouter chaque produit dont la quantité est supérieur à 0 mais le problème est que le formulaire de Thelia Add to Cart ne permet d'ajouter qu'un seul produit.

En espérant avoir été assez clair, merci !

Offline


Tu peux écrire un petit module qui permet d'ajouter plusieurs articles au panier, ou alors utiliser un peu de JavaScript pour faire plusieurs requêtes Ajax d'ajout au panier.


OpenStudio Toulouse

Offline


D'accord, as-tu une idée de la démarche à adopter ? Dois-je réutiliser les méthodes de CartController.php et si oui, sont-elles compatibles avec ajax ?

Par exemple dans un foreach me permettant de récupérer les infos de chaque ligne, puis-je faire :

$.ajax("/cart/add", ...)

Offline


Donc je viens de voir que dans la méthode addItem() (permettant d'ajouter un produit au panier) il y a, si je ne me trompe pas, effectivement possibilité d'utilisé ajax. Le problème est que je ne sait pas du tout quoi passer en paramètre de la fonction ajax dans mon js (datatype,data..).
Pour le moment j'en suis à ce stade mais évidemment ça ne fonctionne pas et je ne sais même pas si c'est la bonne manière de procéder :

$.ajax("/cart/add", {
         type: "post",
          data: {
               product : product_id,
               product_sale_elements_id : product_sale_id,
               quantity : product_qty
          } 
});

Offline


la fonction addItem() recupere les champs du form {form name="thelia.cart.add" }
l'appel est fait via javascript : script.js  ligne 471

        $(document).on('submit.form-product', '.form-product', function () {
            if (doAjax) {
                var url_action  = $(this).attr("action"),
                    product_id  = $("input[name$='product_id']",this).val(),
                    pse_id  = $("input.pse-id",this).val();

                $.ajax({type: "POST", data: $(this).serialize(), url: url_action,
                    success: function(data){
                        $(".cart-container").html($(data).html());
                        $.ajax({url:"ajax/addCartMessage", data:{ product_id: product_id, pse_id: pse_id },
                            success: function (data) {
                                // Hide all currently active bootbox dialogs
                                bootbox.hideAll();
                                // Show dialog
                                bootbox.dialog({
                                    message : data,
                                    onEscape: function() {
                                        bootbox.hideAll();
                                    }
                                });
                            }
                        });
                    },
                    error: function (e) {
                        console.log('Error.', e);
                    }
                });
                return false;
            }
            return;
        });

Offline


Merci de ta réponse, donc si je comprend bien si je veux ajouter plusieurs produits à mon panier d'un coup je ne peux pas utiliser cette méthode car elle ne fonctionne qu'avec {form name="thelia.cart.add" } ?
Je dois vous avouer que je patauge un peu.
En tout cas si vous avez une petite idée de comment réaliser cela je serai aux anges !

Last edited by ronanaupetit (18-11-2015 15:58:13)

Offline


Ici : Scoot Company lors de l'ajout d'un véhicule au panier, des frais annexes sont automatiquement ajoutés au panier en fonction de la cylindrée du véhicule.

Ce comportement a été implémenter via des listener sur les 3 évènements suivants : ajout, suppression et mise à jour d'un article dans le panier.

Me contacter en MP pour le code en question.

Last edited by Nog (18-11-2015 21:28:37)

Offline


Bonjour,

Merci Nog mais pour le moment ce n'est pas ce que je cherche à gérer même si ça pourrait m'être utile dans le futur !
En tout cas j'ai réussi à faire ce que je souhaitais même si je ne pense pas que la méthode soit la meilleure.
Dans ma boutique j'ai donc fait un formulaire pour chaque produit sans faire apparaître le submit, chose rapide grâce à une boucle puis lorsque je clique sur mon seul et unique bouton à la fin j'appelle ce code js :

 
$('.page-folder .main-container .form-footer input[type="button"]').on('click', function(e) {
		
		var flag = 0;
		$('.page-folder .main-container .products-table form').each(function() {

			var qty = $('.product-row .product-qty input[type="number"]', this).val();
			 if(qty != 0) {
			 	 $(this).submit();
			 	 flag =1;
			 }
		});

		if(flag == 1) {
			document.location.href="/cart";
		}
		else {
			alert("Vous n'avez ajouté aucun produit.");
		}
	});

Je vérifie donc les champs de quantité de sorte à n'ajouter que les produits ayant une quantité > à 0 puis je valide chacun des formulaires de cette manière.
C'est un code qui marche et c'est le principal, en tout cas merci pour votre aide !

Last edited by ronanaupetit (19-11-2015 09:44:57)