How to dynamically update shipping progress bar with Javascript?

Question

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

The green progress bar that progresses as the customer adds items to their cart won't update dynamically like the price and the success message does eg

Here is 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 %}
        {% 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 }}%;
    }
    
    #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}}">
            {% if value_left <= 0 %}
            <p class="shipping-bar-success shipping-bar__message">{{unlocked_txt}}</p>
           {% else %}
            <div id="shipping__progress"></div>
           <p class="shipping-bar__message">{{promote_txt | replace:'[value]' , value_left_money}}</p>
           {% endif %}
        </div>
        

    {% else %}
    </div>
      {% endif %}

Here is my JS:

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;
  }
  
  function update()
  {
    if(bar)
    {
    $.getJSON('/cart.js').then(
    
      function(cart) {
        
        var value_left = threshold - cart.total_price;
        var value_left_money = theme.Currency.formatMoney(value_left,theme.moneyFormat);
        const shipping__progress = document.getElementById('shipping__progress');
        let shipping_quotient = threshold / 100;
        const shipping_procent = Math.min(cart.total_price / shipping_quotient, 100);
        shipping__progress.style.width = '${shipping_procent}%';
        
        if(value_left <= 0){
            bar.innerHTML =  '<p class="shipping-bar-success shipping-bar__message">' + unlocked_txt + '</p>';
        }
        else{
            bar.innerHTML = '<div id="shipping__progress"></div><p class="shipping-bar__message">' + promote_txt.replace('[value]',value_left_money) + '</p>';
        }
      }
      
    );      
    }
  }
  return { update:update }
}) ();

  });

I use theme.ShippingBar.update() wherever there is a updateCart or addCart to update the bar.

Any ideas?

Answer 1

I've fixed it myself, here's my working 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 %}
            {% 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 %}
        
             <div class="shipping-bar sticky-shipping" data-promote="{{promote_txt}}" data-unlocked="{{unlocked_txt}}" data-threshold="{{threshold}}" data-procent="{{shipping_procent}}">
                {% if value_left <= 0 %}
                <p class="shipping-bar-success shipping-bar__message">{{unlocked_txt}}<img style="float:right;margin-top: -4px;" height="25px" width="25px" src="https://cdn.shopify.com/s/files/1/0352/4044/4035/files/delivery-van_976a90b1-6b6d-41a5-af16-65828cba1c6a.svg?v=1612052428"/></p>
               {% else %}
                <div id="free-shipping__progress"></div><p class="shipping-bar__message">{{promote_txt | replace:'[value]' , value_left_money}}<img style="float:right;margin-top: -4px;" height="25px" width="25px" src="https://cdn.shopify.com/s/files/1/0352/4044/4035/files/delivery-van_976a90b1-6b6d-41a5-af16-65828cba1c6a.svg?v=1612052428"/></p>
               {% endif %}
            </div>

JS

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

  });
  

CSS

.shipping-bar {
          background-color: {{ section.settings.color_bg }};
          position:relative !important;
          margin-top: 5px;
          border-radius: 10px;
        }
        
        .shipping-bar-success {
          background-color: {{ section.settings.success_color_bg }};
          border-radius: 10px;
        }
 
        .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: 13px 20px;
          font-size: max(calc(var(--typeBaseSize) - 6px), 11px);
          letter-spacing: 0.16em;
          line-height: 1.42;
          text-transform: uppercase;
          font-weight:bold;
          text-align: left;
          position: relative !important;
        }
        
        #free-shipping__progress {
          position:absolute !important;
          background-color: #25a799;
          left: 0!important;
          top: 0!important;
          height: 100% !important;
          border-radius: 10px 0 0 10px;
          width: {{shipping_procent}}%;
        }