Add ‘Free shipping countdown’ in cart page

Creating a child view for shipping countdown

_.extend(CartSummaryView.prototype.childViews, { ShippingThreshold: function () { return new CartScrollUpdateView({ model: this.model, application: this.options.application }); },
});

getting a value from Custom Entity Feild from customer record.The Entiry Feild id is custentity_anx_free_shipping_threshold.Then passing the value to template.

// @module JJ.CartSCrollUpdate.CartScrollUpdate
define('JJ.CartSCrollUpdate.CartScrollUpdate.View'
	, [
		'jj_cartscrollupdate_cartscrollupdate.tpl', 'Profile.Model'

		, 'Backbone'
	]
	, function (
		jj_cartscrollupdate_cartscrollupdate_tpl, Profile

		, Backbone
	) {
		'use strict';

		// @class JJ.CartSCrollUpdate.CartScrollUpdate.View @extends Backbone.View
		return Backbone.View.extend({

			template: jj_cartscrollupdate_cartscrollupdate_tpl

			, initialize: function (options) {

				/*  Uncomment to test backend communication with an example service
					(you'll need to deploy and activate the extension first)
				*/

				// this.model = new CartScrollUpdateModel();
				// var self = this;
				// this.model.fetch().done(function(result) {
				// 	self.message = result.message;
				// 	self.render();
				// });
				console.log('Profile', Profile.getInstance())
				var profilevalue = Profile.getInstance();
				var customfeild = profilevalue.get('customfields')
				var threshold = _.findWhere(customfeild, { name: 'custentity_anx_free_shipping_threshold' });
				console.log(threshold.value, 'threshold')
				this.shippingthr = parseFloat(threshold.value).toFixed(2)
				this.subtotal = options.model.get('summary').subtotal
				console.log(this.shippingthr, this.subtotal)
				// console.log(this.shippingthr >= this.subtotal)
				if (this.shippingthr <= this.subtotal) {
					this.HaveShippingFee = false;
				}
				else {
					this.HaveShippingFee = true;
					this.threshold = parseFloat(this.shippingthr - this.subtotal).toFixed(2)
					this.percent = parseFloat(100 - (this.threshold / 100)).toFixed(2);
					console.log(this.percent)
				}
			}

			, events: {
			}

			, bindings: {
			}

			, childViews: {

			}

			//@method getContext @return JJ.CartSCrollUpdate.CartScrollUpdate.View.Context
			, getContext: function getContext() {
				//@class JJ.CartSCrollUpdate.CartScrollUpdate.View.Context
				console.log(this.HaveShippingFee)
				return {
					HaveShippingFee: this.HaveShippingFee,
					threshold: this.threshold,
					percent: this.percent
				};
			}
		});
	});

{{#if HaveShippingFee}}
<div class="cart-summary-shipping-threshold">
  <hr style="margin: 5px 5px 5px 5px;">
  </hr>
  <!-- <p class="cart-summary-grid-shipping-thr">
    {{translate 'Your shipping threshold'}}
  </p>
  <div class="shipping-threshold-indicator-bar-progress" style="width:{{ percent}}%;"><span
      class="shipping-threshold-indicator-bar-progress-value">{{percent}}%</span></div> -->
  <p class="cart-summary-grid-float">
    {{translate 'Add $'}} {{threshold}} {{translate ' for free shipping!'}}
  </p>
</div>
{{/if}}

The example screenshot is added below