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

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

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

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

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

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

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

    • 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ù ?

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

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

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

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

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

Répondre à Cyrille Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

neuf + 1 =