Simplifier l'ajout au panier d'un produit personnalisé dans Prestashop

PrestaShop
  • Accueil
  • Blog
  • Simplifier l'ajout au panier d'un produit personnalisé dans Prestashop

Je pense que tous les utilisateurs de Prestashop qui ont utilisé les produits personnalisés se sont posé la question : comment simplifier l’ajout au panier d’un produit personnalisé ?

Constat : 2 étapes pour personnaliser et ajouter au panier

Dans Prestashop, par défaut, lorsqu’un client arrive sur la page d’un produit personnalisé il doit procéder en 2 étapes :

  1. Le client doit remplir tous les champs de personnalisation requis,
  2. Après rafraîchissement de la page, la personnalisation est enregistrée et affichée dans chacun des champs de personnalisation…le client doit alors cliquer sur le bouton “ajouter au panier” pour envoyer le produit au panier.

Plusieurs points négatifs sont identifiés dans ce processus :

  • C’est trop long : vos clients doivent comprendre le fonctionnement et ensuite cliquer plusieurs fois !
  • C’est mal indiqué par défaut et je n’ai pas encore vu de thème intégrer ce point de manière correcte : personne n’indique la procédure clairement ce qui oblige vos clients à trouver la solution. Ce n’est pas idéal pour booster les ventes.
  • C’est mal placé : la personnalisation est enfouie dans un onglet sous le début de la fiche produit, il faut aller chercher l’onglet et son contenu !

Solution : simplifier l’ajout au panier des produits personnalisés dans Prestashop

[box type=”alert” size=”large”]La solution évoquée fonctionne uniquement avec des produits simples sans déclinaisons et sans choix de quantité.[/box]
On a noté les points noirs de la personnalisation dans Prestashop ; voyons à présent comment rectifier tout ça et optimiser le tunnel de commande.
En théorie, ce que l’on va faire :

  • Regrouper les boutons “enregistrer la personnalisation” et “ajouter au panier”.
  • Augmenter la visibilité de la personnalisation dans la fiche produit.

Pour information, l’exemple est basé sur Prestashop 1.6.1.2.

1.Regrouper les boutons

Pour regrouper les boutons de sauvegarde et d’ajout panier, on va renommer le bouton “sauvegarder la personnalisation” via les traductions en “sauvegarder et ajouter au panier”, c’est précis et efficace.
Ensuite, on va masquer le bouton d’ajout panier si on a affaire à un produit personnalisé. Pour ce faire, dans le product.tpl à la ligne 389 :

<p id="add_to_cart" class="buttons_bottom_block no-print {if isset($product) && $product->customizable}produit_customizable{else}produit_non_customizable{/if}">
<button type="submit" name="Submit" class="exclusive">
<span>{if $content_only && (isset($product->customization_required) && $product->customization_required)}{l s='Customize'}{else}{l s='Add to cart'}{/if}</span>
</button>
</p>

On va alors ajouter une ligne de CSS dans le fichier product.css à la fin de votre fichier :
#add_to_cart.product_with_customization{display:none;}

Pour simplifier le fonctionnement et faire en sorte que vos clients n’aient qu’un seul clic à effectuer, on va écrire un petit script qu’on va placer juste avant le commentaire suivant <!–end Customization –> dans le product.tpl :
{* AJOUT PANIER AUTOMATIQUE SI PERSONNALISATION REMPLIE *}
{if $textFields|@count > 0}
<script type="text/javascript">
$(document).ready(function() {
if ($.trim($("li.customizationUploadLine.required textarea").val())) {
$('#buy_block').submit();
}
});
</script>
{/if}

Ainsi, après avoir saisi ses informations de personnalisation, votre client va voir son produit s’ajouter au panier automatiquement.

2.Augmenter la visibilité de la personnalisation

Je suggère pour cette étape de placer plus haut dans la page produit la partie personnalisation. Pour ce faire j’ai déplacé le code lié à la personnalisation juste après la première partie de la fiche produit.
Vous pouvez télécharger le fichier product.tpl modifié en cliquant sur ce lien : product.tpl
J’espère que ça en aidera plus d’un, à bientôt 🙂
 

13 commentaires sur “Simplifier l'ajout au panier d'un produit personnalisé dans Prestashop

  1. Ha oui, j’ai testé ta modif, ca fonctionne, mais la fenetre de confirmation d’ajout au panier ne s’affiche pas. Est ce normal?

  2. Bonjour Arnaud, toujours sympa tes tutos, et celui là me plait bien, mais je rencontre un souci, tu va peut etre pouvoir m’aider.
    Je voudrais déplacer le bloc personnalisation dans la première div du block ajouter au panier. Ca la se fait, mais là ou je rencontre un souci, c’est que j’utilise un module personnalisation, et cette modif s’affiche sur mes produits qui utilise le module.
    Je voudrais juste afficher ce bloc pour que les clients ajoute uniquement le prénom. Chose mon pratique avec le module de personnalisation.
    As tu une solution?
    presta 1.6.1.11
    Merci pour ton aide

  3. Bonjour,
    Tout d’abord merci pour vos tutos source d inspiration 🙂
    Je teste d’adapter votre solution en 1.7. Le soucis que je rencontre est que lorsque je rempli le champs personnalisation (sans valider), si je change la quantité souhaitée, un appel / envoi est fait et du coup l’info notée dans le champs personnalisé disparaît avant que je puisse le valide par le btn ” save &amp; add to cart”
    Une solution serait de peut-être “submit” à chaque modification de quantité :
    $(“#quantity_wanted”).change(function(){
    $(“button[name=’submitCustomizedData’]”).trigger(‘click’);
    });
    Qu’en pensez-vous ?

    1. Bonjour Aurel,
      Au choix : soit le client ajoute 1 par 1 les produits personnalisés, soit il faut modifier la fonction qui incrémente / décrémente la quantité 🙂

  4. Bonjour et merci beaucoup pour ce tuto !
    Est-il possible de faire la même chose en ajoutant plusieurs prénoms ?

    1. Bonjour Marc,
      C’est possible d’adapter le script si vous avez plusieurs champs de personnalisation.
      On aurait alors un script avec une condition sous la forme :
      [code]
      if ($.trim($("input.class_du_champ_1").val()) && $.trim($("input.class_du_champ_2").val())) {

      }
      [/code]

  5. Bonjour,
    j’aimerais effectuer cette modification sur un prestashop 1.7, est-ce qu’il y a beaucoup de différence à la mise en place?
    merci 🙂
    Vanessa

    1. Bonjour Vanessa,
      Je pense qu’on peut adapter ce tuto prestashop à la version 1.7 en utilisant le {debug} et ensuite les variables utilisées 😉

    2. Bonjour Ike,
      Je n’ai pas essayé pour l’instant mais si vous trouvez, postez la solution ici pour les autres personnes 😉

Laisser un avis

Consultez les autres articles