Il existe une méthode très simple pour remédier à ce problème : indiquer à vos clients quelle somme ils doivent ajouter pour profiter de la livraison gratuite.

En plus de faire baisser le nombre de paniers abandonnés, l’affichage du montant restant pour une expédition gratuite a aussi pour effet de faire augmenter le panier moyen de votre boutique. Les clients sont incités à ajouter plus de produits à leur commande pour pouvoir obtenir une réduction sur les frais de port.

Nous allons voir ensemble comment mettre en place cette fonctionnalité sur votre site marchand Prestashop.

Utiliser un module pour afficher le montant avant les frais de port offerts

La méthode la plus simple pour afficher combien le client doit ajouter à son panier pour obtenir la livraison offerte est d’installer le module Montant avant la livraison gratuite.

Conçu pour Prestashop 1.7, il s’intègre parfaitement à toutes les boutiques en quelques clics et propose une large variété d’options :

• Il permet de faire apparaître les blocs contenant des messages du type « Encore xx€ avant la livraison gratuite » à différents endroits de la boutique (au sommet de chaque page, dans le tunnel de commande, dans la pop-up de confirmation d’ajout de produit…)
• Pour chacun de ces blocs vous pouvez personnaliser l’apparence (couleurs de fond et de texte,…) et le texte du message
• Les blocs sont mis à jour en temps réel, dès que le contenu du panier est modifié
• Il fonctionne aussi bien avec le champ « Livraison offerte à partir de » (si vous offrez la livraison pour le même montant de commande, quelque soit le transporteur) qu’avec le système des tranches de prix qui vous permettent de configurer un seuil de gratuité des frais de port pour chacun des modes de livraison

Ce module est en vente sur notre boutique. N’hésitez pas à cliquer sur le bloc ci-dessous pour accéder à sa présentation détaillée. Vous y trouverez de nombreuses informations et un lien vers une démo qui vous permettra de tester les différentes fonctionnalités intégrées.

Indiquer dans le panier le montant à ajouter pour les frais de port gratuits

Si vous ne souhaitez pas passer par un module, vous pouvez aussi implémenter la fonctionnalité en modifiant le code source de votre site. Nous allons donc voir dans cette 2nde partie comment ajouter manuellement, sur la page de récapitulatif de panier, un bloc indiquant au client la somme qu’il doit ajouter pour obtenir la livraison offerte. .

Pour cela il faut modifier le contrôleur qui se charge de gérer la page en question et le template associé.

Plusieurs remarques avant de commencer :

• le tutoriel ci-dessous explique comment réaliser cette opération pour Prestashop 1.7. Pour les versions précédentes, le template est différent car la structure des fichiers a évolué dans cette version. En fonction de votre thème il est possible que le nom ou le chemin du template diffère.
• la méthode décrite ci-dessous n’est valable que si vous utilisez le champ « Livraison gratuite à partir de » du menu « Livraison > Préférences » (autrement dit si vous offrez la livraison à partir d’une certaine somme, quelque soit le transporteur sélectionné par le client) ; si vous utilisez les tranches de prix, veuillez vous référer à la 1ère partie de cet article, traitant du module « Montant avant la livraison gratuite »

Si vous ne l’avez pas encore fait, accédez au menu « Livraison > Préférences » de votre back-office. Vous y trouverez un champ intitulé « Livraison gratuite à partir de » (€). C’est ici que vous allez indiquer le seuil à partir duquel vous offrez les frais de port au client (la valeur est en TTC). Pour ce tutoriel nous allons régler cette valeur sur 79€.

Pour transmettre ce montant à la page nous allons avoir besoin de créer une surcharge (ou « override ») du contrôleur. Pour ce faire il faut créer un fichier appelé CartController.php dans le répertoire override/controllers/front de Prestashop. Ce fichier doit contenir le code suivant :

<?php

class CartController extends CartControllerCore
{
    public function initContent()
    {
        parent::initContent();
        $shipping_free_price = (float)Configuration::get('PS_SHIPPING_FREE_PRICE');
        $this->context->smarty->assign([
            'shipping_free_price' => $shipping_free_price
        ]);
    }
}

Le code ajouté ici a pour but de transmettre une variable Smarty qui correspond à la valeur définie dans les préférences.

Ensuite nous allons pouvoir exploiter cette valeur dans le template. Nous choisissons le template cart-detailed-totals.tpl (dans le répertoire \templates\checkout\_partials de votre thème), qui correspond au bloc récapitulant tous les sous-totaux dans la colonne de droite de la page de récapitulatif de panier. Il a l’avantage d’être dynamique, c’est-à-dire que son contenu est rafraîchi à chaque modification du panier (ajout ou suppressions de produit, etc).

Nous ajoutons le bloc indiquant le montant restant avant la livraison gratuite à la suite du sous-total « Livraison » de la manière suivante :

          {if $subtotal.type === 'shipping'}
              <div><small class="value">{hook h='displayCheckoutSubtotalDetails' subtotal=$subtotal}</small></div>
              {* Bloc contenant le montant restant avant la livraison gratuite *}
              {if isset($shipping_free_price)}
              <div {if $shipping_free_price <= $cart.subtotals.products.amount}style="display:none"{/if}>
                {assign var="missing_amount" value=$shipping_free_price-($cart.subtotals.products.amount - $cart.subtotals.discounts.amount)}
                {$missing_amount|number_format:2:",":""} {$currency.sign} {l s='avant la livraison gratuite' d='Shop.Theme.Global'}
              </div>
              {/if}
              {* Fin du bloc *}
          {/if}

Comme vous pouvez le voir, nous comparons le montant de la commande (réductions déduites) au seuil de gratuité des frais de port. Si ce montant est inférieur, on affiche la différence, sinon on masque le bloc.

Vous pouvez ensuite ajouter un identifiant ou une classe à la balise div pour pouvoir modifier l’apparence du bloc en CSS à votre guise.

Pensez à vider le cache du site depuis le menu Paramètres avancés > Performances pour que les ajouts et modifications des fichiers soient pris en compte.

Comme expliqué plus haut cette méthode à ses limites : elle ne fonctionne pas avec le système de tranches de prix, elle doit être utilisée à un endroit du thème qui se rafraîchit à chaque modification du panier, elle ne tient pas compte des codes promo qui offrent les frais de port,… Pour toutes ces raisons (et d’autres encore), nous vous invitons à découvrir notre module Montant avant la livraison gratuite dans la 1ère partie de cet article si vous ne l’avez pas déjà fait. Il couvre tous les cas de figure et dispose d’un grand nombre d’options de paramétrage.

L’article Prestashop – Afficher le montant avant la gratuité de la livraison est apparu en premier sur Agence BeComWeb.

Or vous êtres nombreux à organiser la préparation des commandes sur la base de ce critère ; parce que le type de livraison est synonyme de degré de priorité (vous avez un mode de livraison rapide, de type « express ») ou parce que vous préparez vos commandes par lots en fonction du transporteur.

Nous allons donc voir comment palier à ce problème.

Intégration de la colonne « Transporteur » dans le tableau des commandes

Mise-à-jour 27/09/2021 : Dans la version Prestashop 1.7.7 la page « Commandes » du back-office a été migré vers le système moderne / Symfony. Le méthode de surcharge de cette page expliqué ci-dessous ne fonctionne plus. La bonne nouvelle c’est qu’un développeur a mis au point un module permettant d’ajouter la colonne « Transporteur » à la liste des commandes. Le module dispose même d’une option permettant de choisir si vous voulez afficher le nom du transporteur ou son logo. Merci donc à Matt75 de proposer gratuitement le module Colonne transporteur sur la liste des commandes.

Pour ajouter la colonne permettant d’indiquer le mode de livraison dans la liste des commandes nous allons créer une surcharge (ou « override ») du contrôleur qui gère l’affichage des commandes dans le backoffice.

Commencez donc par créer un fichier intitulé AdminOrdersController.php dans le répertoire override/controllers/admin. Nous allons ensuite ajouter 3 éléments dans le constructeur du contrôleur (autrement dit la fonction __construct()) :

• la récupération de l’identifiant du transporteur dans la requête SQL
• la nouvelle colonne du tableau
• une méthode qui récupère l’image du logo

Pour la requête SQL on va donc ajouter le champ id_carrier, qui sera récupéré dans la table order_carrier, pour laquelle il faudra mettre en place une jointure.

Ensuite on intègre la nouvelle colonne à la liste existante. Comme elle a déjà été générée par le constructeur parent, on doit aussi la « positionner » vers le début du tableau pour que le logo ne s’affiche pas tout à droite du tableau.

Le code du constructeur ressemble donc maintenant à ça

public function __construct()
{
  // On appelle le constructeur du parent (le controleur natif)
  parent::__construct(); 
  // On recupere l'id_carrier qui va servir pour la methode printCarrierIcon()
  $this->_select .= ', oc.`id_carrier`,';
  // On ajoute une jointure pour atteindre l'id_carrier
  $this->_join .= 'LEFT JOIN `'._DB_PREFIX_.'order_carrier` oc ON (a.`id_order` = oc.id_order)';
 // On definit la nouvelle colonne avec icone du transporteur
 // NB : pour Prestashop 1.7 utiliser le nouveau systeme de traduction en remplacant $this->l('Carrier') par $this->trans('Carrier', array(), 'Admin.Global')
 $carrier_column = array(
      'title' => $this->l('Carrier'),
      'align' => 'text-center',
      'callback' => 'printCarrierIcon',
      'orderby' => true,
       'search' => false,
  );
  // On l'integre a la liste (ici en 3eme position)
  $part1 = array_slice($this->fields_list, 0, 2);
  $part2 = array_slice($this->fields_list, 2);
  $part1['id_carrier'] = $carrier_column;
  $this->fields_list = array_merge($part1, $part2);
}

Il ne nous reste plus qu’à créer la méthode déclarée en callback et qui va se charger de retourner le logo. On ajoute donc le code suivant à la fin de notre fichier

// Recuperation de l'image du transporteur
public function printCarrierIcon($id_order, $tr)
{
  if (file_exists(_PS_TMP_IMG_DIR_ . 'carrier_mini_' . $tr['id_carrier'] . '_1.jpg')) {
    return '<img src="../img/tmp/carrier_mini_' . $tr['id_carrier'] . '_1.jpg'.'" class="imgm img-thumbnail" />';
 }
  return null;
 }

Pour faire plus simple vous pouvez également télécharger le fichier qui correspond à votre version de Prestashop.

Attention, comme pour toutes les overrides vous devez faire une manipulation pour qu’elle soit prise en compte. Sous Prestashop 1.6 il faut supprimer le fichier cache/class_index.php manuellement. Sous Prestashop 1.7 il suffit de vider le cache depuis le menu Paramètres avancés > Performances.

En complément : modifier le transporteur associé à une commande

Pour différentes raisons vous êtes peut-être parfois amené à devoir changer le transporteur associé à une commande. Il existe beaucoup de cas de figures :

• Vous proposez des modes de transports génériques sur votre boutique (ex : « Livraison à domicile », « Livraison express »,…) puis vous confiez les colis à différents transporteurs en fonction de certains critères (poids, distance,…)
• Un élément de la commande a varié et vous devez opter pour un transporteur plutôt qu’un autre

Dans ce cas vous êtes bloqué, impossible d’effectuer cette manipulation dans le back-office de Prestashop… sauf si vous passez par le module que nous avons conçu à cet effet.

Cliquez sur le boton ci-dessous pour en apprendre plus le module Modifier le transporteur final pour Prestashop, qui vous permettra de changer très facilement l’option de livraison d’une commande.

L’article Prestashop – Afficher le logo du transporteur dans la liste des commandes est apparu en premier sur Agence BeComWeb.

En revanche les informations affichées sur cette page sont limitées : le logo, un titre, un texte… et c’est tout. Un peu léger. Si la vesion 1.7 de Prestashop permet de saisir un message de maintenance personnalisé, elle reste assez limitée. En gros ça revient à dire « Nous sommes fermés » à vos clients, sans plus de détails.

Ce qui soulèvent pour eux de nombreuses questions :

• Quand est-ce que votre site sera de nouveau disponible ?
• Comment vous contacter pendant ce temps-là ?

Et de votre côté vous pourriez avoir envie de rendre cette page un peu plus sexy. Du texte noir sur fond blanc, aucune image,… on a connu plus attrayant.

Modifier la page de maintenance de Prestashop manuellement

La 1ère méthode pour modifier le contenu et l’apparence de la page de maintenance va consister à modifier les fichiers qui la composent.

Commençons par Prestashop 1.6. Dans cette version, les fichiers en question sont les suivants :

• le template maintenance.tpl (situé dans le répertoire de votre thème),
• la feuille de style maintenance.css (situé dans le sous-répertoire css de votre thème)

Si vous souhaitez ajouter des textes ou des images, vous pourrez le faire dans le template. Pour les textes, si votre boutique est multilingue, n’oubliez pas de respecter la syntaxe Smarty qui permet de rendre une chaîne de caractères traduisible : {l s=’Texte à traduire’}.

Ensuite pour toutes les modifications de design (taille de police, couleur d’arrière-plan,..), vous devez modifier la feuille de style (ce qui nécessite évidemment de maîtriser un peu ce langage).

Dans Prestashop 1.7, les noms et les emplacements de ces fichiers sont légèrement différents :

• le template maintenance.tpl se trouve dans le répertoire templates/errors de votre thème,
• la feuille de style se nomme error.css et elle est dans le répertoire assets/css de votre thème

N’oubliez pas que dans cette version vous pouvez personnaliser le texte de la page vous-même, comme je vous disais un peu plus haut (depuis le menu « Paramètres de la boutique > Général », onglets « Maintenance »).

Un module de personnalisation pour la page de maintenance de Prestashop

Si la 1ère méthode vous rebute (car vous ne disposez pas des compétences techniques nécessaires), vous pouvez vous tourner vers notre module « Page de maintenance personnalisée« .

Très simple à utiliser il dispose des options suivantes :

• sélection parmi les modèles de page disponibles (« Site en maintenance », « Disponible prochainement ») ou saisie manuelle du titre et du texte de la page,
• choix de l’image et de la couleur de l’arrière-plan,
• mise en place d’un compte-à-rebours avant la disponibilité du site
• affichage des coordonnées de contact et des liens vers les réseaux sociaux

En quelques minutes vous serez en mesure de proposer à vos clients une page de maintenance plus belle et plus complète pour votre boutique Prestashop, comme dans les exemples ci-dessous.

N’hésitez pas à aller jeter un oeil sur la page consacrée au module, vous y trouverez la liste des fonctionnalités et plusieurs autres captures d’écrans.

L’article Prestashop – Personnaliser la page de maintenance est apparu en premier sur Agence BeComWeb.