Hi.
Unfortunately, I can't see the TPL file and I don't know the id of the element for ajax update, so in short.
Module (update):
public function hookDisplayHeader() { if ($this->context->controller->php_self == 'cart') { $this->context->controller->addCSS($this->_path.'views/css/progress-bar.css'); $this->context->controller->addJS($this->_path.'views/js/front.js'); $ajax = $this->context->shop->getBaseURL(true).'modules/'.$this->name.'/ajax/ajax.php?token='.Tools::encrypt($this->name.'/ajax.php'); $jsDef = [ 'freedeliveryindicator_ajaxcart' => $ajax, ]; Media::addJsDef($jsDef); } } public function hookDisplayShoppingCartFooter() { $cart = new Cart($this->context->cart->id); $total = $cart->getOrderTotal(true, Cart::BOTH_WITHOUT_SHIPPING); $freeShippingLimit = (float)Configuration::get('FREESHIPPINGLIMIT'); $amountLeftForFreeShipping = max(0, $freeShippingLimit - $total); $progressPercentage = $total / $freeShippingLimit * 100; $progressPercentage = min(100, max(0, $progressPercentage)); $this->context->smarty->assign([ 'amountLeftForFreeShipping' => $amountLeftForFreeShipping, 'progressPercentage' => $progressPercentage, ]); return $this->display(__FILE__, 'views/templates/hook/indicator.tpl'); }
AJAX PHP ($this->_path.'ajax/ajax.php'):
<?php header("Access-Control-Allow-Origin: *"); include('../../../config/config.inc.php'); include('../../../init.php'); $module_name = 'freedeliveryindicator'; $token = pSQL(Tools::encrypt($module_name.'/ajax.php')); $token_url = pSQL(Tools::getValue('token')); $context = Context::getContext(); $module = Module::getInstanceByName($module_name); $db = Db::getInstance(); if ($token != $token_url || !Module::isInstalled($module_name)) { echo($module->l('AJAX error')); } if ($module->active && Tools::getValue('action') == 'updateDisplayShoppingCartFooter') { $cart = new Cart($context->cart->id); $total = $cart->getOrderTotal(true, Cart::BOTH_WITHOUT_SHIPPING); $freeShippingLimit = (float)Configuration::get('FREESHIPPINGLIMIT'); $amountLeftForFreeShipping = max(0, $freeShippingLimit - $total); $progressPercentage = $total / $freeShippingLimit * 100; $progressPercentage = min(100, max(0, $progressPercentage)); $returnParams = array(); $returnParams['amountLeftForFreeShipping'] = $amountLeftForFreeShipping; $returnParams['progressPercentage'] = $progressPercentage; echo json_encode($returnParams); }
front.js (update):
$(document).ajaxStart(function() { if(typeof prestashop !== 'undefined') { prestashop.on( 'updateCart', function (event) { if (event && event.reason && typeof event.resp !== 'undefined' && !event.resp.hasError) { updateDisplayShoppingCartFooter(); } } ); } }); function updateDisplayShoppingCartFooter() { // call ajax function $.ajax({ type: "POST", url: freedeliveryindicator_ajaxcart, // defined in module.php data: { action: 'updateDisplayShoppingCartFooter', // call action ajax.php }, async: false, cache: false, dataType: 'json', success: function(data) { if (data !== '') { if (data['amountLeftForFreeShipping'] !== '' && data['progressPercentage'] !== '') { // here update values in TPL file with element id or name ... $('#amountLeftForFreeShipping').text(data['amountLeftForFreeShipping']); $('#progressPercentage').attr('style', 'width:'+data['progressPercentage']+'%'); if (data['progressPercentage'] < 100) { $('#freedeliveryindicator').show(); } else { $('#freedeliveryindicator').hide(); } } } } }); }
Indicator.tpl (update):
<div id="freedeliveryindicator" style="{if $progressPercentage < 100}display:block;{else}display:none;{/if}"> {if $amountLeftForFreeShipping > 0} <div class="free-delivery-info"> {l s='Still missing' mod='freedeliveryindicator'} <span id="amountLeftForFreeShipping">{Tools::displayPrice($amountLeftForFreeShipping)}</span> {l s='for free delivery' mod='freedeliveryindicator'} </div> <div class="progress-bar-container"> <div id="progressPercentage" class="progress-bar" style="width: {$progressPercentage}%;"></div> </div> {/if} </div>