Showing smart shopping bar on Category, Product, Cart page, Checkout page in BigCommerce

Showing smart shopping bar on Category, Product, Cart page, Checkout page in BigCommerce

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>`;
                }
            }

        })
 
 For checkout page add the below script in footer script section
 <script>
  var url = window.location.href;
  if(url.match(/checkout/gi)) {
      var shippingBar = document.createElement('div');
      shippingBar.classList.add('shipping-bar-wrapper');
      shippingBar.setAttribute('data-coupon-code', '300');
      var parentElement = document.querySelector('.optimizedCheckout-header');
      parentElement.insertAdjacentElement('afterend', shippingBar);
      
      fetch('/api/storefront/cart', {
            credentials: 'same-origin'
        })
        .then(function(response) {
            return response.json();
        })
        .then (function(data) {
            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">Spend just $${leftAmount} more to earn free shipping</p>`;
            }

        })
  }
</script>