Showing smart shopping bar on Category, Product and Cart page

Showing smart shopping bar on Category, Product and Cart page

First add the below html code where you want to show in the category.html, product.html and cart.html 
<div class="shipping-bar-wrapper" data-coupon-code="{{lang 'freeDelivery'}}"></div>

Add the freeDevlivery(the coupon amount) text to the en.json file in the lang file.
Add this Js code to global.js in the assets/js/theme folder

fetch('/api/storefront/cart', {
            credentials: 'same-origin'
        })
        .then(function(response) {
            return response.json();
        })
        .then (function(data) {
            if(data.length === 0) {
                var couponAmount = Number(document.querySelector('.shipping-bar-wrapper').getAttribute('data-coupon-code'));
                document.querySelector('.shipping-bar-wrapper').innerHTML = `<p class="smart-shipping-bar">Get Free Shipping when you spend $${couponAmount} or more</p>`;
            } else {
                var cartAmount = data[0].cartAmount;
                var couponCount = Number(document.querySelector('.shipping-bar-wrapper').getAttribute('data-coupon-code'));
                if(cartAmount > couponCount) {
                    document.querySelector('.shipping-bar-wrapper').innerHTML = `<p class="smart-shipping-bar">You’ve qualified for FREE SHIPPING!</p>`;
                } else {
                    var leftAmount = couponCount - cartAmount;
                    document.querySelector('.shipping-bar-wrapper').innerHTML = `<p class="smart-shipping-bar">After product added: Spend just $${leftAmount} more to earn free shipping</p>`;
                }
            }

        })