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.