Apprenez à cacher le bouton Ajouter au panier sur PrestaShop 1.7

Suite à une question déposée sur le forum officiel de PrestaShop, j'ai testé la désactivation de la vente pour un produit. Cela se passe simplement sur la page de configuration d'un produit dans l'onglet Options où il suffit de décocher la fonction Disponible à la vente.

Et là, je fut surpris par la réaction de PrestaShop en FrontOffice. Le bouton d'ajout au panier est toujours présent et simplement désactivé sans plus de précision.

Il me parait évident que deux possibilités s'offrent à nous, soit on décide de faire complètement disparaitre le bouton d'ajout au panier, soit on décide de le remplacer par un texte explicatif simple, mais permettant d'informer clairement le visiteur de la page de la situation concernant ce produit.

Cacher le bouton Ajouter au panier

Ici, je vais vous expliquer comment modifier votre template pour que le bouton d'ajout au panier n'apparaisse plus ni sur la fiche produit ni sur la prévisualisation.

Fiche produit

Pour retirer le bouton d'ajout au panier sur la fiche produit il vous faut, à l'aide de votre logiciel FTP habituel, ouvrir le fichier product.tpl qui se trouve dans le répertoire /themes/votre_theme/templates/catalog/.

Rendez-vous à la ligne 127 qui doit contenir le code suivant

{block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}

Pour faire disparaitre le bouton ainsi que la case de choix de la quantité, il vous suffit d'englober ce code avec un test conditionnel sur la variable décoché.

Votre code final devient alors ceci

{if $product.add_to_cart_url}
    {block name='product_add_to_cart'}
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{/if}

Et voilà, vous videz le cache et vous aurez fait disparaitre le bouton d'ajout au panier sur tous les produits sur lesquels vous avez décoché l'option Disponible à la vente.

Aperçu

Pour retirer le bouton d'ajout au panier sur l'aperçu du produit proposé sur les pages catégories, il faut éditer le fichier quickview.tpl présent dans le dossier  /themes/votre_theme/templates/catalog/_partials/.

Rendez-vous à la ligne 62 qui doit contenir le code suivant

{block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl'}
{/block}

Même punition que précédement, on englobe ce code du même test.

{if $product.add_to_cart_url}
    {block name='product_add_to_cart'}
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{/if}

Afficher un message d'information

On peut imaginer plusieurs possibilités mais je ne vais pas toutes les aborder. Ma préférence va au remplacement du bouton et la quantité.

Pour ce faire, on revient simplement sur les deux fichiers précédement modifié pour rajouter une simple condition à notre test.

Ainsi, nous avons testé la variable qui permet de désactiver la vente du produit, si cette variable est coché, alors on affiche le bouton, sinon nous allons afficher un message, que vous pourrez mettre en forme à loisir mais le plus simple est encore d'utiliser les éléments de design déjà présents dans le template de base de PrestaShop et qui doivent certainement trouver une correspondance dans votre template personnalisé si vous avez pris le parti d'en installer un.

Fiche produit

Nous allons donc obtenir le code suivant sur le fichier product.tpl

{if $product.add_to_cart_url}
    {block name='product_add_to_cart'}
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{else}
    <div class="btn btn-block btn-secondary">
        {l s='This product is currently not available for sale!' d='Shop.Theme.Catalog'}
    </div>
{/if}

Aperçu

Nous allons donc obtenir le code suivant sur le fichier quickview.tpl

{if $product.add_to_cart_url}
    {block name='product_add_to_cart'}
        {include file='catalog/_partials/product-add-to-cart.tpl'}
    {/block}
{else}
    <div class="btn btn-block btn-secondary">
        {l s='This product is currently not available for sale!' d='Shop.Theme.Catalog'}
    </div>
{/if}

Conclusion

Voilà, vous avez, maintenant, les bases pour adapter le code à votre sauce et trouver la meilleure solution pour votre boutique.

J'espère que ce petit article vous aura aidé dans la compréhension du fonctionnement de cette version 1.7 de PrestaShop.