Bonjour @marinelille, @arthurboutique,
C'est un excellent point, et c'est une demande fréquente car PrestaShop 1.7 ne gère pas nativement un tel widget visuel. La logique de livraison gratuite est bien présente (via les préférences de transporteur ou les préférences d'expédition globales dans Expédition > Préférences), mais l'affichage dynamique est à construire.
Voici comment vous pouvez l'implémenter avec quelques modifications de code propre, sans module externe, en s'appuyant sur l'architecture de PrestaShop 1.7.8.4 (et compatible PHP 7.1-7.4) :
1. Exposer le seuil de livraison gratuite à Smarty (via override) :
Pour rendre le seuil de livraison gratuite disponible partout dans vos templates, le plus propre est de surcharger le FrontController. Créez le fichier override/classes/controller/FrontController.php (si non existant) et ajoutez-y :
class FrontController extends FrontControllerCore
{
public function init()
{
parent::init();
$freeShippingPrice = (float)Configuration::get('PS_SHIPPING_FREE_PRICE');
$this->context->smarty->assign([
'free_shipping_threshold' => $freeShippingPrice,
]);
}
Pensez à supprimer le fichier var/cache/prod/class_index.php après cette modification pour que l'override soit pris en compte.
2. Intégrer la barre de progression dans vos templates (via thème enfant) :
Créez un thème enfant si ce n'est pas déjà fait pour ne pas perdre vos modifications lors des mises à jour.
Dans l'en-tête (ex: themes/votre_theme_enfant/templates/_partials/header.tpl) :
Ajoutez ce code où vous souhaitez afficher la barre (par exemple, juste après la balise <body> ou dans la section nav).
Dans le tiroir du panier (ex: themes/votre_theme_enfant/templates/checkout/_partials/cart-summary.tpl ou l'emplacement de votre mini-panier) :
Répétez une logique similaire.
Voici un exemple de code Smarty/HTML à adapter :
{if $cart.totals.total.amount < $free_shipping_threshold && $free_shipping_threshold > 0}
{assign var="remaining_amount" value=$free_shipping_threshold - $cart.totals.total.amount}
{assign var="progress_percent" value=($cart.totals.total.amount / $free_shipping_threshold) * 100}
<div class="free-shipping-progress-bar" data-threshold="{$free_shipping_threshold|floatval}">
<p class="progress-message">
Ajoutez <strong>{$remaining_amount|number_format:2} €</strong> pour la livraison gratuite !
</p>
<div class="progress-container">
<div class="progress-fill" style="width: {$progress_percent}% !important;"></div>
</div>
N'oubliez pas d'ajouter le CSS nécessaire pour styliser votre free-shipping-progress-bar.
3. Mettre à jour la barre dynamiquement avec JavaScript :
Pour que la barre se mette à jour sans recharger la page après un ajout/suppression de produit, utilisez l'événement updatedCart de PrestaShop. Vous pouvez ajouter ce script dans un fichier .js de votre thème enfant ou directement dans votre header.tpl (entre balises <script>).
document.addEventListener('DOMContentLoaded', function() {
prestashop.on('updatedCart', function(event) {
let progressBar = document.querySelector('.free-shipping-progress-bar');
if (!progressBar) return;
let currentTotal = event.reason.cart.totals.total.amount;
let threshold = parseFloat(progressBar.dataset.threshold);
if (currentTotal < threshold) {
let remaining = threshold - currentTotal;
let percent = (currentTotal / threshold) * 100;
progressBar.querySelector('.progress-message strong').textContent = remaining.toFixed(2) + ' €';
Cette approche vous donne un contrôle total et s'intègre bien avec l'architecture de PrestaShop 1.7.8.4. Tenez-moi au courant !