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

4 novembre 2015

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

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

Tags: