In some cases, the manager wants to create an announcement to the customer about the sale or discount of the quantity or up to a certain amount of the order, thereby increasing certain sales.
Here I will show you how to create a simple module, on creating a display block for the message to the value that you preset in the free shipping in the admin section.
Step 1 : Register module
- create new file module.xml in foder Magepow\FreeShipping\etc
<?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="Magepow_FreeShipping" setup_version="1.0.0">
<sequence>
<module name="Magento_Checkout"/>
<module name="Magento_Tax"/>
</sequence>
</module>
</config>
- and file registration.php in foder Magepow\FreeShipping
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magepow_FreeShipping',
__DIR__
);
Step 2: Create new block file Freeshipping.php folder Magepow\FreeShipping\Block
<?php
namespace Magepow\FreeShipping\Block\Cart;
use Magento\Framework\View\Element\Template;
class CheckoutCart extends Template
{
/**
* @var \Magepow\FreeShipping\Helper\Data
*/
protected $helper;
/**
* Sidebar constructor.
* @param Template\Context $context
* @param array $data
*/
public function __construct(
Template\Context $context,
\Magepow\Shippingbar\Helper\Data $helper,
array $data = []
) {
parent::__construct($context, $data);
$this->helper = $helper;
}
public function getPriceFreeShipping()
{
return $this->helper->getPriceFreeShipping();
}
}
Step 3: Create new file Data.php in folder Magepow\FreeShipping\Helper
<?php
namespace Magepow\FreeShipping\Helper;
use Magento\Framework\App\Helper\AbstractHelper;
class Data extends AbstractHelper
{
const FREE_SHIPPING_SUBTOTAL = 'carriers/freeshipping/free_shipping_subtotal';
/**
* Return if maximum price for shipping bar
* @return int
*/
/**
* @var array
*/
protected $configModule;
/**
* @var \Magento\Framework\Module\Manager
*/
protected $_moduleManager;
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\Module\Manager $moduleManager
)
{
$this->_moduleManager = $moduleManager;
parent::__construct($context);
$this->configModule = $this->getConfig(strtolower($this->_getModuleName()));
}
public function getConfig($cfg='')
{
if($cfg) return $this->scopeConfig->getValue( $cfg, \Magento\Store\Model\ScopeInterface::SCOPE_STORE );
return $this->scopeConfig;
}
public function getConfigModule($cfg='', $value=null)
{
$values = $this->configModule;
if( !$cfg ) return $values;
$config = explode('/', $cfg);
$end = count($config) - 1;
foreach ($config as $key => $vl) {
if( isset($values[$vl]) ){
if( $key == $end ) {
$value = $values[$vl];
}else {
$values = $values[$vl];
}
}
}
return $value;
}
public function getPriceFreeShipping()
{
return $this->getConfig('carriers/freeshipping/free_shipping_subtotal');
}
}
Step 4 : Create new layout view in file checkout_cart_index.xml folder Magepow\FreeShipping\view\frontend\layout
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content.top">
<block class="Magepow\FreeShipping\Block\Freeshipping" template="Magepow_FreeShipping::checkoutcart.phtml" name="shipping_checkout_cart_magepow">
</block>
</referenceContainer>
</page>
Step 5 : Create file checkoutcart.phtml folder Magepow\FreeShipping\view\frontend\templates
<?php
/**
* @var $block Magepow\FreeShipping\Block\Freeshipping
*/
?>
<div id="checkout_cart_magepow" class="checkout_cart_magepow" data-bind="scope: 'checkout_cart_magepow'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"#checkout_cart_magepow": {
"Magento_Ui/js/core/app": {
"components": {
"checkout_cart_magepow": {
"component": "Magepow_FreeShipping/js/view/checkoutcart"
}
}
}
}
}
</script>
<script>
var freeShippingPrice = <?= $block->getPriceFreeShipping(); ?>
</script>
Step 6: Create file checkoutcart.js in folder Magepow\FreeShipping\view\frontend\web\js\view
define([
'ko',
'jquery',
'uiComponent',
'Magento_Customer/js/customer-data',
'mage/url'
], function (ko, $, Component, customerData, url) {
'use strict';
var subtotalAmount;
var maxPrice = freeShippingPrice;
var percentage;
var priceShipping;
return Component.extend({
defaults: {
template: 'Magepow_FreeShipping/checkoutcart/subtotal'
},
displaySubtotal: ko.observable(true),
maxprice: '$' + maxPrice.toFixed(2),
/**
* @override
*/
initialize: function () {
this._super();
this.cart = customerData.get('cart');
this.cartPrice();
this.cartFree();
$(document).on('click', '.redirectPage',function(argument) {
window.location.replace(url.build(''));
});
},
cartFree:function() {
return freeShippingPrice;
},
cartPrice: function() {
var self = this;
priceShipping = maxPrice - self.getCountFree();
return '$'+priceShipping.toFixed(2);
},
getTotalCartItems: function () {
return customerData.get('cart')().summary_count;
},
getCountFree: function () {
subtotalAmount = customerData.get('cart')().subtotalAmount;
if (subtotalAmount > maxPrice) {
subtotalAmount = maxPrice;
}
return subtotalAmount;
},
});
});
Step 7: Create file subtotal.html in folder Magepow\FreeShipping\view\frontend\web\template
<div class="component-wrapper" data-bind="if: getTotalCartItems() > 0">
<div class="show-price-shipping-cart">
<!-- ko if : getCountFree() < cartFree() -->
<span data-bind="html: cart().subtotal"></span><span> + </span> <span>$5.99 shipping</span><br>
<span class="price-box-mincart" data-bind="text: cartPrice()"></span><span> away from FREE Shipping .</span><a class="redirectPage colornew">Shop</a>
<!-- /ko -->
<!-- ko ifnot : getCountFree() < cartFree() -->
<span class="colornew" data-bind="html: cart().subtotal"> </span><br>
<span> You now qualify for</span>
<span><b>FREE Shipping</b></span>
<!-- /ko -->
</div>
</div>
Step 8 : After completing the steps above, open a terminal and then run the following commands
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
Step 9: Config amount price free shipping in Admin panel
- Please follow this link to set up a limit price to display the Free Shipping Method : Admin panel > STORE > Configuration > SALES > Delivery Methods or Shipping Methods > Free Shipping > Minimum Order Amount
![](https://magepow.com/blog/wp-content/uploads/2021/04/2021-04-30_14-38-1024x489.png)
and then clear the cache to update the information you just changed
The following is the result that just changed is displayed on the screen
![](https://magepow.com/blog/wp-content/uploads/2021/04/2021-04-30_14-55-1024x385.png)
![](https://magepow.com/blog/wp-content/uploads/2021/04/2021-04-30_14-56-1024x360.png)
Thanks for reading this article and there are many different ways if you have comments, please comment below the article. Thanks