Add Free Shipping Bar In Mini Cart Magento 2

Today I will show you how to add Free Shipping Bar In Mini Cart Magento 2. This will help your customers control shipping costs more easily. You can do this through a few steps.

 

Step 1:

Create Data.php under /app/code/Magepow/Custom/Helper/

 

File: /app/code/Magepow/Custom/Helper/Data.php

 <?php namespace Magepow\Custom\Helper; class Data extends \Magento\Framework\App\Helper\AbstractHelper { public function __construct( \Magento\Framework\App\Helper\Context $context ) { parent::__construct($context); } const PRICE_SHIPPING_BAR = 'carriers/freeshipping/free_shipping_subtotal'; /** * Return if maximum price for shipping bar * @return int */ public function getPriceForShippingBar() { return $this->scopeConfig->getValue( self::PRICE_SHIPPING_BAR, \Magento\Store\Model\ScopeInterface::SCOPE_STORE ); } }

Step 2:

Create Sidebar.php under /app/code/Magepow/Custom/Block/Cart/

 

File: /app/code/Magepow/Custom/Block/Cart/Sidebar.php

<?phpnamespace Magepow\Custom\Block\Cart;use Magento\Framework\View\Element\Template;class Sidebar extends Template{ /** * @var \Magepow\Jobs\Helper\Data */ private $helper; private $scopeConfig; protected $jsLayout; protected $_storeManager; protected $localeCurrency; /** * Sidebar constructor. * @param Template\Context $context * @param \Magepow\Jobs\Helper\Data $helper * @param array $data */ public function __construct( Template\Context $context, \Magepow\Custom\Helper\Data $helper, \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig, \Magento\Store\Model\StoreManagerInterface $storeManager, \Magento\Framework\Locale\CurrencyInterface $localeCurrency, array $data = [] ) { parent::__construct($context, $data); $this->scopeConfig = $scopeConfig; $this->_storeManager = $storeManager; $this->localecurrency = $localeCurrency; $this->helper = $helper; $this->jsLayout = isset($data['jsLayout']) && is_array($data['jsLayout']) ? $data['jsLayout'] : []; ); } /** * @return string */ public function getJsLayout() { return \Zend_Json::encode($this->jsLayout); } public function getFreeShippingStatus() { return $this->scopeConfig->getValue('carriers/freeshipping/active', \Magento\Store\Model\ScopeInterface::SCOPE_STORE); } public function getStoreCurrency(){ $currencycode = $this->_storeManager->getStore()->getCurrentCurrencyCode(); return $this->localecurrency->getCurrency($currencycode)->getSymbol(); } /** * Get current store currency code * * @return string */ public function getCurrentCurrencyCode() { return $this->_storeManager->getStore()->getCurrentCurrencyCode(); } public function getConfigForShippingBar() { return $this->helper->getPriceForShippingBar(); } }

Step 3:

Create default.xml under /app/code/Magepow/Custom/view/frontend/layout/

 

File: /app/code/Magepow/Custom/view/frontend/layout/default.xml

<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="minicart.addons"> <block class="Magepow\Custom\Block\Cart\Sidebar" name="shipping_bar" template="Magepow_Custom::cart/minicart.phtml"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="minicart-addons" xsi:type="array"> <item name="component" xsi:type="string">Magepow_Custom/js/view/minicartaddons</item> <item name="config" xsi:type="array"></item> </item> </item> </argument> </arguments> </block> </referenceContainer> </body></page>

Step 4:

Create minicart.phtml under /app/code/Magepow/Custom/view/frontend/templates/cart/

 

File: /app/code/Magepow/Custom/view/frontend/templates/cart/minicart.phtml

<div id="cart-page"> <div id="block-cart-list" data-bind="scope:'minicart-addons'" class="block"> <!-- ko template: getTemplate() --><!-- /ko --> <?php $maxpriceShipping = $block->getConfigForShippingBar(); $currencySymbols = $block->getStoreCurrency(); $currencyCode = $block->getCurrentCurrencyCode(); $freeShipping_status = $block->getFreeShippingStatus(); ?> <?php if($freeShipping_status == 1): ?> <div class="component-wrapper" data-bind="if: getTotalCartItems() > 0"> <h4 data-bind="text : getpercentage() < 100 ?'Free shipping' : 'Eligible for free shipping!'"></h4> <span data-bind="html: cart().subtotal"></span><span> / </span> <?php if(isset($currencySymbols)) { echo $block->escapeHtml(__($currencySymbols)); }else{ echo $block->escapeHtml(__($currencyCode)); } ?><span data-bind="text: maxprice"></span> <div class="minprogress" id="progress"> <div class="minprogress-active" id="child-progress" data-bind="style: { width: getpercentage() + '%' } "></div> </div> </div> <?php endif; ?> <script> maxpriceShipping = <?= /* @escapeNotVerified */ $maxpriceShipping ?>; </script> <script type="text/x-magento-init"> { "#block-cart-list": { "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> }, "*": { "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>" } } </script> </div></div>

Step 5:

Create minicartaddons.js under /app/code/Magepow/Custom/view/frontend/web/js/view/

 

File: /app/code/Magepow/Custom/view/frontend/web/js/view/minicartaddons.js

define([ 'ko', 'uiComponent', 'Magento_Customer/js/customer-data', ], function (ko, Component, customerData) { 'use strict'; var subtotalAmount; var maxPrice = maxpriceShipping; var percentage; return Component.extend({ displaySubtotal: ko.observable(true), maxprice:maxPrice.toFixed(2), /** * @override */ initialize: function () { this._super(); this.cart = customerData.get('cart'); }, getTotalCartItems: function () { return customerData.get('cart')().summary_count; }, getpercentage: function () { subtotalAmount = customerData.get('cart')().subtotalAmount; if (subtotalAmount > maxPrice) { subtotalAmount = maxPrice; } percentage = ((subtotalAmount * 100) / maxPrice); return percentage; } }); });

Step 6:

Now install the custom module and refresh Magento cache

 

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento cache:flush

 

Done. Hope this article will help you in some way.