Free shipping message bar for M2

Question

I have tried so many times to create a simple way by creating CMS block to show the "Free Shipping Eligible Message for Adding Certain Amount in Cart" but I didn't get it yet.

Could you please help me out how I can show the Free Shipping Eligible Message on Checkout Page in top. Please check my images and please give the clear instruction with files and code here.

Thanks in Advance

Answer 1

You can add free shipping notification on without creating module too ( if someone wishes ) using bit of knockout.js and web/html template.

Like, Code 'written below', on checkout page, will check if current store is US and total is < 1500 then will show shipping message under your cart summary block, so you can use that logic and technique to apply where you want.

Step 1 - Copy below files from vendor magento-checkout module:

/vendor/magento/module-checkout/web/js/view/summary/cart-items.js /vendor/magento/module-checkout/web/template/summary/cart-items.html

To :

/package/customtheme/Magento_Checkout/web/js/view/summary/cart-items.js /package/customtheme/Magento_Checkout/web/template/summary/cart-items.html

in your themes's cart-items.js file add below function / code ( you can change as per your requirements ) :

/**
     * Get Order total on checkout page sidebar
     * @returns {boolean}
     */
    getOrderTotal: function(){
        var totals = quote.getTotals()();

        var storeCode = quote.getStoreCode();

        if (totals['grand_total'] < 1500 && storeCode == 'us') {
            return true;
        }
        return false;
        /*
        if (totals) {
            return totals['grand_total'];
        }

        return quote['grand_total'];*/
    }

And in your theme's cart-items.html file add below block :

<div class="free-shipping-block">
    <!-- ko if: getOrderTotal() -->
    <span>You can avail FREE SHIPPING on Order Total of Rs. 1500/-<br>
    <a class="action viewcart" data-bind="attr: {href: cartUrl}">
        <span data-bind="i18n: 'Continue Shopping'"></span>
    </a></span>
    <!-- /ko -->
</div>

This will give you little guidance how to do using, js and html.

Answer 2

I would recommend the following extension because it does exactly what you are looking for and much more.

You can show different free shipping banner based on shipping country, customer group, grand total, date ranges and many more

Magento 2 Free Shipping Bar

Answer 3

Create a module with name STech_Freeshipping and create the files like below steps:

Step 1: Create registration.php under:

app/code/STech/Freeshipping/registration.php

with below content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'STech_Freeshipping',
    __DIR__
);

Step 2: Create module.xml under:

app/code/STech/Freeshipping/etc/module.xml

with below content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="STech_Freeshipping" setup_version="0.0.1">
        <sequence>
            <module name="Magento_Backend"/>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

Step 3: Create Freeshipping.php under:

app/code/STech/Freeshipping/Block/Freeshipping.php

with below content:

<?php
namespace STech\Freeshipping\Block;

class Freeshipping extends \Magento\Framework\View\Element\Template
{
    protected $_scopeConfig;

    protected $_cart;    

    protected $_checkoutSession;

    protected $_priceHelper;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Checkout\Model\Cart $cart,
        \Magento\Checkout\Model\Session $checkoutSession,
        \Magento\Framework\Pricing\Helper\Data $priceHelper,
        array $data = []
    ){
        $this->_scopeConfig = $scopeConfig;
        $this->_cart = $cart;
        $this->_checkoutSession = $checkoutSession;
        $this->_priceHelper = $priceHelper;
        parent::__construct($context,$data);
    }

    public function isEligible(){
        if($this->isEnable() && ($this->getSubtotal() >= $this->getFreeshippingAmount())){
            return true;
        }
        return false;
    }

    public function getMessage(){
        if($this->isEnable()){
            $subTotal = $this->getSubtotal();
            $freeshippingAmount = $this->getFreeshippingAmount();
            if($subTotal >= $freeshippingAmount){
                $message = __('Congratulation! Your order will be shipped for free');
            }
            else{
                $amount = $freeshippingAmount - $subTotal;
                $message = __('Just remaining %1 to get Free Shipping', $this->_priceHelper->currency($amount, true, false));
            }
            return $message;
        }
        return false;
    }

    public function getSubtotal(){
        return $this->_checkoutSession->getQuote()->getSubtotal();
    }

    public function getGrandtotal(){
        return $this->_checkoutSession->getQuote()->getGrandTotal();
    }

    public function isEnable(){
        return $this->_scopeConfig->getValue('carriers/freeshipping/active', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }

    public function getFreeshippingAmount(){
        return $this->_scopeConfig->getValue('carriers/freeshipping/free_shipping_subtotal', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }
}

Step 4: Create checkout_cart_index.xml under:

app/code/STech/Freeshipping/view/frontend/layout/checkout_cart_index.xml

with below content:

<?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="main.content">
            <block class="STech\Freeshipping\Block\Freeshipping" name="freeshipping.message" before="-" template="STech_Freeshipping::freeshipping.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 5: Create freeshipping.phtml under:

app/code/STech/Freeshipping/view/frontend/templates/freeshipping.phtml

with below content:

<p><?= $block->getMessage() ?></p>

Run setup upgrade, di compile and other required commands and test.

Answer 4

You can show it as a Banner.

1. Create a Banner , and the Widget as Banner Rotator , where to display the Banner.
2. In the Content of the Banner you should call the Block and template.
3. Create the template and assign it to the block.