Contact Us
CONTACT US

How to Add a Free Shipping Bar to the Top of a Mini-Cart

Share This :

Steps to Create a Free Shipping Bar

  1. Create & register the module
  2. Extend default.xml layout and define a block
  3. Create block class & related template file (.phtml file)
  4. Define jsLayout component in <block> element in default.xml layout
  5. Create jsLayout component (.js file) & template (.html file) in the location defined in default.xml
  6. Calculate percentage and bind it with shipping progress bar using Knockout.js
  7. Create a configuration menu to set the maximum price for the free shipping bar in the Admin Panel
  8. Fetch the maximum price config value set in the Admin Panel and bind it to the shipping progress bar

Create a Module for Free Shipping Bar

We’ll create a separate module to add a free shipping bar to the top of the mini-cart.

Create the vendor and module directory as follows:

app/code/KazeDigital/Shippingbar

 

Create registration.php

Create registration.php in the root folder of your module with the following content:

\Magento\Framework\Component\ComponentRegistrar::register(

   \Magento\Framework\Component\ComponentRegistrar::MODULE,

   ‘KazeDigital_Shippingbar’,

   __DIR__

);

 

Create module.xml

Inside a new etc directory, add module.xml:

<?xml version=”1.0″?>

<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>

   <module name=”KazeDigital_Shippingbar” setup_version=”1.0.0″>

       <sequence>

           <module name=”Magento_Checkout”/>

           <module name=”Magento_Tax”/>

       </sequence>

   </module>

</config>

 

Run this command to enable the module:

php ./bin/magento setup:upgrade

Extend default.xml Layout

Add a new block for the shipping bar in the mini-cart:

File:
 app/code/KazeDigital/Shippingbar/view/frontend/layout/default.xml

<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=”KazeDigital\Shippingbar\Block\Cart\Sidebar” name=”shipping_bar” template=”KazeDigital_Shippingbar::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”>KazeDigital_Shippingbar/js/view/minicartaddons</item>

                               <item name=”config” xsi:type=”array”>

                                   <item name=”template” xsi:type=”string”>KazeDigital_Shippingbar/minicartaddons/content</item>

                               </item>

                           </item>

                       </item>

                   </argument>

               </arguments>

           </block>

       </referenceContainer>

   </body>

</page>

 

Create Block Class

File:
 app/code/KazeDigital/Shippingbar/Block/Cart/Sidebar.php

<?php

namespace KazeDigital\Shippingbar\Block\Cart;

 

use Magento\Framework\View\Element\Template;

 

class Sidebar extends Template

{

   public function __construct(

       Template\Context $context,

       array $data = []

   ) {

       parent::__construct($context, $data);

   }

}

 

Template File

File:
 app/code/KazeDigital/Shippingbar/view/frontend/template/cart/minicart.phtml

<div id=”cart-page”>

   <div id=”block-cart-list” data-bind=”scope:’minicart-addons'” class=”block”>

       <!– ko template: getTemplate() –><!– /ko –>

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

 

JS Component & Template

  • JS file:
     app/code/KazeDigital/Shippingbar/view/frontend/web/js/view/minicartaddons.js
  • HTML file:
     app/code/KazeDigital/Shippingbar/view/frontend/web/template/minicartaddons/content.html

Add LESS for Progress Bar

File:
 app/code/KazeDigital/Shippingbar/view/frontend/web/css/miniprogress.less

Add Config in Admin Panel

File:
 app/code/KazeDigital/Shippingbar/etc/adminhtml/system.xml

Add Default Config Value

File:
 app/code/KazeDigital/Shippingbar/etc/config.xml

 

Create Helper

File:
 app/code/KazeDigital/Shippingbar/Helper/Data.php

Update Block Class to Use Helper

File:
 app/code/KazeDigital/Shippingbar/Block/Cart/Sidebar.php

Bind Config Value in Template

File:
 app/code/KazeDigital/Shippingbar/view/frontend/template/cart/minicart.phtml

<script>

   maxpriceShipping = <?= /* @escapeNotVerified */ $this->getConfigForShippingBar() ?>;

</script>

Update JS Component

Replace this line:

var maxPrice = 100;

 

with:

var maxPrice = maxpriceShipping;

 

Written by: admin

Share This :