Sauvegarde des champs personnalisés en même temps que l’ajout au panier sur Prestashop 1.6

Quoi de plus énervant si ce n’est pour l’administrateur, en tout cas pour le client qui choisi ses valeurs d’attributs, et qui ensuite décide de remplir les champs personnalisés du produit qu’il souhaite acheter, puis de sauvegarder ces derniers, car sans cet enregistrement les données ne sont pas gardées, de voir que les choix précédemment réalisés ont été perdus.
Au delà du fait de ce problème, il faut bien avouer que le fait d’avoir à cliquer deux fois pour ajouter un produit au panier est loin d’une optimisation de l’expérience utilisateur.
Pour supprimer ce problème, réduire le nombre de clics et donc améliorer la vision de votre boutique qu’aura cet acheteur, je vous propose un petit bout de code qui, une fois ajouté au fichier product.js de vote thème se chargera de supprimer le bouton d’enregistrement des champs personnalisés et lancera cet enregistrement lorsque le client aura cliqué sur le bouton d’ajout au panier.
Seule limitation concernant ce bout de code, les fichiers ne peuvent pas être traités, donc c’est limité, mais pour ceux qui n’ont pas besoin de fichiers, ce code leur permettra d’optimiser l’utilisation des champs de personnalisation sur leur boutique.
A noter, le code ne fonctionnera qu’en mode panier ajax.
$(document).ready(function(){ if ( $('#customizationForm').size() ) { // Button is hidden $('#customizationForm #customizedDatas').hide(); $('#customizationForm #customizedDatas input.button').remove(); // Add to cart methode is overriden var addToCartTmp = ajaxCart.add; ajaxCart.add = function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, wishlist) { var data = $('#customizationForm').serialize().split('%0D%0A').join(' '); $.ajax({ url: $('#customizationForm').attr('action'), type: 'POST', data: data, success: function() { var parts = data.split('&'); for (part in parts) { if (parts[part].indexOf('textField') != -1 ) { var field = parts[part].split('='); $('textarea[name="' + field[0] + '"]').html(field[1]); $('textarea[name="' + field[0] + '"]').addClass('filled'); } } addToCartTmp(idProduct, idCombination, addedFromProductPage, callerElement, quantity, wishlist); } }); }; } });
Un nouveau billet concernant la même chose pour prestashop 1.7 se trouve ici
Amor
ant dit :Merci. ça fait 2 jour que je cherche et à cqhuae fois je tombe sur des forums de module, et autres qui n ont rien e0 voir.J utilise la version 1.5.2.0 et la ligne 37 n existe pas.J avais moi-meame créer la colonne dispo en utilisant $product.quantity. Mais si sur la fiche produit, quantity correspond au stock, sur la page panier, quantity correspond à la quantité du produit ajouté au panier.stock_quantity fonctionne parfaitementPas très logique de la part des programmeurs.
ben
bonjour,
je pense que le bout de code n’est pas compatible avec la 1.6.1.3 et la 1.6.0.9
j’ai testé sur une nouvelle installation
si les champs sont required : alors il y a tjrs le message d’erreur : Veuillez remplir tous les champs, puis enregistrer votre personnalisation
Cyrille
Bonjour,
Effectivement le code était incomplet, je l’ai modifié.
toni
Bonjour Cyrille,
le code ne semble toujours pas fonctionner sur 1.6.1.4
Cordialement,
toni
Re-bonjour, je modère mon propos : Non-fonctionnel avec des champs requis. Le code est fonctionnel si le champ n’est pas requis.
Merci,
Cyrille
Bonjour,
Je vais vérifier ça, et je vous tiendrai au courant.
Merci du retour.
Cyrille
Bonjour,
Après vérification, il y avait un souci avec l’encodage à priori, et un test pouvait être renforcé.
J’ai modifié le code.
Bonne journée.
Fred
Bonjour
Moi j’ai un problème quand j’utilise votre méthode les clients ne peuvent plus choisir leur personnalisation dans la liste déroulante ca le fait qu’a partir d’un mobile ou tablette
Cyrille
Quelle liste ? Vous parlez des attributs ?
Fred
Par exemple sur cette fiche a partir d’un mobile on ne peux pas choisir le modele de la tétine
http://sucette-perso.fr/home/613-tetine-personnalisee-leopard-.html
Fred
Je précise à partir d’un mobile ou tablette
Cyrille
Je viens de tester sur un mobile et une tablette android et aucun souci.
Le code ne modifie en rien l’affichage des listes, c’est étrange.
Fred
Essayez de choisir dans les attributs modele de la tétine
Fred
J’ai appliqué le code ligne 29 dessous
//global variables
var selectedCombination = [];
var globalQuantity = 0;
var colors = [];
Cyrille
Ca fonctionne que ce soit pour la liste des modèles ou les radio pour l’age
Fred
Bizarre moi d’une tablette ou d’un tel android je ne peux pas sélectionner une modele de tétine j’ai beau cliquer dessus il ne garde pas en mémoire, l’age oui fonctionne
Fred
On parle bien de ça (voir image)
Car on est dessus à constater le même problème
On vois les différentes déclinaison mais lorsque qu’on clique dessus ca ne valide pas
Parcontre quand je simule la version mobile avec google chrome j’ai pas ce problème
Fred
J’ai oublié l’image http://hpics.li/1dc594a
Cyrille
Carrément étrange, je n’ai vraiment aucun soucis, que ce soit avant ou après saisie du prénom, je peux choisir une nouvelle valeur de la liste, l’ajout au panier se fait aussi sans problème avec la personnalisation.
Concernant le positionnement du code, je ne pense pas que le problème vienne de là puisque je suis sur votre site et ça fonctionne.
Quel navigateur utilisez vous, pour le cas où ?
Fred
Chrome, sous safari je viens de voir que ca fonctionne
Cyrille
Pour moi Chrome fonctionne : version 47 et 49
Fred
Si vous choisissez une tétine ou il faut renseigner le prénom pour vous ca fonctionne?
Car moi j’ai le message veuillez remplir tous les champs requis
Fred
Merci pour votre aide je vais laisser comme ça
Cyrille
Ok, désolé de ne pas vous avoir permis de corriger ce soucis.
Le champs de personnalisation vaut pour l’ensemble des déclinaisons, je suis sur le lien que vous m’avez envoyé.
Julien
Bonjour,
Merci pour ce code qui fonctionne sur les champs non obligatoires (si un champ est obligatoire, cela ne fonctionne pas) , par contre pour mon utilisation le champ doit absolument être obligatoire, est il possible de le rendre compatible avec les champs obligatoires?
Merci par avance
Cyrille
Bonjour Julien,
Le code fonctionne parfaitement sur ma boutique avec des champs requis et en 1.6.1.5.
Envoyez moi une url de test à mon adresse mail contact@ai-dev.fr, je jetterai un coup d’oeil.
Bonne journée.
Pascal
Bonjour,
Est-ce que cette modification fonctionne sous Prestashop 1.7.7.2 ?
Si oui, est-il possible de permettre à l’internaute de modifier sa personnalisation dans le récapitulatif du panier ?
Merci d’avance pour votre réponse.
Cyrille
Désolé de cette réponse tardive, le code est uniquement compatible avec les version 1.6 et précédentes, la structure de la 1.7 ayant radicalement changée.
Pour la modification de personnalisation dans le panier, idem, cette fonction n’est pas native dans prestashop il faudrait donc modifier le code pour pouvoir y avoir accès.
Si vous avez besoin, n’hésitez pas à me contacter et je vous chiffrerai cette modification sans souci.