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

<?php

namespace 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.