Prestashop : personnalisation et ajout au panier en 1 clic (ajax)

Je m’attaque à un gros point problématique pour les clients. Quand vous mettez un produit personnalisé à la vente, l’ajout au panier se fait en deux étapes. La première permet de valider la personnalisation. La seconde permet d’ajouter le produit personnalisé au panier. Il y a donc deux clics, deux pages, deux fois plus de temps pour acheter le produit. Je souhaite me passer de ces deux clics et ne plus en avoir qu’un. Accrochez-vous, il y a plusieurs fichiers à modifier.

Cette solution est tributaire de la version de Prestashop que vous utilisez. Une version précédente de cette solution, pour Prestashop 1.4 ne fonctionnait pas sur ma version (1.6.0.14) alors que celle-ci fonctionne.

Dans un premier temps, vérifiez bien que vous avez configuré le panier en Ajax, dans le module bloc panier :

La seconde condition pour que cela fonctionne est que la personnalisation du produit ne se fait que pas des champs textes. La solution que je propose ici n’est compatible avec ces champs, et non les champs de mise en ligne de fichier. Cela dit, ça peut se faire, contacter-moi si cela vous intéresse.

Ouvrez le fichier product.css du dossier css de votre thème et ajoutez la ligne suivante pour cacher le bouton qui permet d’enregistrement de la personnalisation :

#customizedDatas { display: none; }

A présent, ouvrez le fichier /perstashop/js/tools.js et recherchez la fonction checkCustomizations(). Cette dernière entre en conflit avec l’enregistrement et l’ajout au panier en un clic. Nous allons donc la modifier. Remplacez là par (gardez une copie au cas ou) :

function checkCustomizations() {
    return true;
}

Dans le thème bootstrap par défaut de Prestashop, il y a une surcharge du module blockcart. Si votre thème ne le fait pas, il faudra modifier les fichiers du dossier module. Cela dit, ouvrez le fichier ajax-cart.js du dossier /prestashop/themes/default-bootstrap/js/modules/blockcart. A la ligne 140 chez moi, juste sous la ligne //for product page ‘add’ button… se trouve une fonction de type :

$(document).off('click', '#add_to_cart button', function () {
// code
});

Remplacez ces lignes (environ 3 lignes) par la fonction complète ci-dessous :

//for product page 'add' button...
$(document).off('click', '#add_to_cart button').on('click', '#add_to_cart button', function (e) {
    e.preventDefault();
    $('#quantityBackup').val($('#quantity_wanted').val());
    var isOnError = false;

    if ($('#customizationForm li textarea').length) {
        $.each($('#customizationForm li textarea'), function (index, value) {
            if ($(this).val() == '') {
                if (!!$.prototype.fancybox) {
                    $.fancybox.open([
                        {
                            type: 'inline',
                            autoScale: true,
                            minHeight: 30,
                            content: '<p class="fancybox-error">' + fieldRequired + '</p>'
                        }
                    ], {
                        padding: 0
                    });
                } else {
                    alert(fieldRequired);
                }
                isOnError = true;
            }
        });
        if (!isOnError) {
            $.ajax({
                type: $("#customizationForm").attr('method'),
                data: $("#customizationForm").serialize(),
                url: $("#customizationForm").attr('action'),
                success: function (code_html, statut) {
                    ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
                }
            });
        }
    } else {
        ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
    }
});

Videz bien le cache de Prestashop et de votre navigateur. Ça devrait maintenant fonctionner.

Si l’un des champs est vide, vous devriez avoir un message d’erreur de ce type :