Who good with Javascript? Need shipping progress bar procent to update.

ChrisBeattie
Excursionist
41 0 14

I have made a shipping progress bar on the product page which updates with ajax when someone adds to cart, or updates/removes the quantities from the cart drawer.

The problem that I have is I have made a green progress background that progresses as the customer add items to their cart e.g.

shipping bar.jpg

 

 

 

The shipping amount updates fine, and the success message when the shipping threshold is met also works fine with ajax, but the green bar will not update without a page refresh.

Here it the liquid code.

 

 

 

{% if section.settings.is_free_shipping_bar %}
            {% assign promote_txt = section.settings.promote_free_shipping_txt | escape %}
            {% assign unlocked_txt = section.settings.unlocked_free_shipping_txt | escape %}
            {% assign threshold = section.settings.free_shipping_threshold | times: 100 %}
  			{% assign shipping_quotient = settings.free_shipping_threshold | times: 100 | divided_by: 100 %}
  			{% assign shipping_procent = cart.total_price | divided_by: shipping_quotient | at_most: 100 %}
            {% assign value_left = threshold | minus: cart.total_price %}
            {% assign value_left_money = value_left | money %}
      <style>
        .shipping-bar {
          background-color: {{ section.settings.color_bg }};
          position:relative !important;
        }
        
        .shipping-bar-success {
          background-color: {{ section.settings.success_color_bg }};
        }
 
        .shipping-bar--link:hover {
          {% assign brightness = section.settings.color_bg | color_brightness %}
 
          {% if brightness <= 192 %}
            {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
            background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
          {% else %}
            {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
            background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
          {% endif %}
        }
 
        .shipping-bar__message {
          color: {{ section.settings.color_text }};
          padding: 10px 0;
          font-size: max(calc(var(--typeBaseSize) - 6px), 11px);
		  letter-spacing: 0.2em;line-height: 1.42;
 		  text-transform: uppercase;
          font-weight:bold;
          text-align: center;
          position: relative !important;
        }
        
        .free-shipping__progress {
          position:absolute !important;
          background-color: #25a799;
          left: 0!important;
          top: 0!important;
          height: 100% !important;
          width: {{shipping_procent}}%;
        }
      </style>
        
             <div class="shipping-bar" data-promote="{{promote_txt}}" data-unlocked="{{unlocked_txt}}" data-threshold="{{threshold}}" data-quotient="{{shipping_quotient}}" data-procent="{{shipping_procent}}">
               <div class="free-shipping__progress"></div>
  				{% if value_left <= 0 %}
                <p class="shipping-bar-success shipping-bar__message">{{unlocked_txt}}</p>
               {% else %}
                <p class="shipping-bar__message">{{promote_txt | replace:'[value]' , value_left_money}}</p>
               {% endif %}
            </div>
            
  
        {% else %}
  		</div>
          {% endif %}

 

 

 

 

 Here is my javascript.

 

 

 

document.addEventListener('page:loaded', function() {
    
theme.ShippingBar = (function() {
  
  var bar = document.querySelector('.shipping-bar');
 
  if(bar)
  {
  var promote_txt = bar.dataset.promote;
  var unlocked_txt = bar.dataset.unlocked;
  var threshold = bar.dataset.threshold;
  var shipping_quotient = bar.dataset.quotient;
  var shipping_procent = bar.dataset.procent;
  }
  
  function update()
  {
    if(bar)
    {
    $.getJSON('/cart.js').then(
    
      function(cart) {
      	
        var shipping_quotient = threshold * 100 / 100;
        var shipping_procent = cart.total_price / shipping_quotient;
        var value_left = threshold - cart.total_price;
        var value_left_money = theme.Currency.formatMoney(value_left,theme.moneyFormat);
        
        
        if(value_left >= 0){
        	bar.innerHTML =  '<div class="free-shipping__progress">' + '</div>';
        }
        
        if(value_left <= 0){
        	bar.innerHTML =  '<p class="shipping-bar-success shipping-bar__message">' + unlocked_txt + '</p>';
        }
        else{
          bar.innerHTML = '<p class="shipping-bar__message">' + promote_txt.replace('[value]',value_left_money) + '</p>';
        }
      }
      
    );      
    }
  }
  return { update:update }
}) ();

  });

 

 

 

Here is the Schema.

 

{
        "type":"checkbox",
        "label":"Enable Free Shipping Progress Bar",
        "id":"is_free_shipping_bar",
        "default":false
    },
    {
        "type":"text",
        "id":"promote_free_shipping_txt",
        "label":"Free Shipping Promotion Text"
    },
    {
        "type":"text",
        "id":"unlocked_free_shipping_txt",
        "label":"Free Shipping Success Message"
    },
    {
        "type":"range",
        "id":"free_shipping_threshold",
        "label":"Free Shipping Success Threshold",
        "min":0,
        "max":200,
        "step":5,
        "unit":"£",
        "default":100
    },
{
      "type": "color",
      "id": "color_bg",
      "label":"Bar",
      "default": "#f54337"
    },
 {
      "type":"color",
      "id":"success_color_bg",
      "label":"Success Bar",
      "default":"#008000"
    },
    {
      "type": "color",
      "id": "color_text",
      "label":"Text",
      "default":"#ffffff"
    }
    ]

 

 

Here is the link for the live site: https://www.babyesmee.co.uk

I have built the site with the Impulse Theme as a base. Any help would be greatly appreciated.

Replies 2 (2)

troy10
Tourist
33 0 1

Were you able to figure this out? I am also trying to create a free shipping bar similar to yours.

senkels
Excursionist
53 0 9

Hi,

is there a way to change this from a monetary value bar to a cart.item.count bar?

 

Meaning, if 3 items have been added, the progress bar is at 100%? 

Even better would be to have an option to Specify that only items of a certain type count towards that bar.