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:flushStep 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
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
Thanks for reading this article and there are many different ways if you have comments, please comment below the article. Thanks