title: How to dynamically update shipping progress bar with Javascript?
body: <p>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.</p>
  <p>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 e.g.</p>
  <p><a href="https://i.stack.imgur.com/nqXrZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nqXrZ.jpg" alt="enter image description here" /></a></p>
  <p>Here is the liquid code:</p>
  <pre><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 %}
    &lt;style&gt;
      .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 &lt;= 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 }}%;
      }
      
    &lt;/style&gt;
      
           &lt;div class=&quot;shipping-bar&quot; data-promote=&quot;{{promote_txt}}&quot; data-unlocked=&quot;{{unlocked_txt}}&quot; data-threshold=&quot;{{threshold}}&quot; data-quotient=&quot;{{shipping_quotient}}&quot; data-procent=&quot;{{shipping_procent}}&quot;&gt;
              {% if value_left &lt;= 0 %}
              &lt;p class=&quot;shipping-bar-success shipping-bar__message&quot;&gt;{{unlocked_txt}}&lt;/p&gt;
             {% else %}
              &lt;div id=&quot;shipping__progress&quot;&gt;&lt;/div&gt;
             &lt;p class=&quot;shipping-bar__message&quot;&gt;{{promote_txt | replace:'[value]' , value_left_money}}&lt;/p&gt;
             {% endif %}
          &lt;/div&gt;
          
  
      {% else %}
      &lt;/div&gt;
        {% endif %}
  </code></pre>
  <p>Here is my JS:</p>
  <pre><code>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 &lt;= 0){
              bar.innerHTML =  '&lt;p class=&quot;shipping-bar-success shipping-bar__message&quot;&gt;' + unlocked_txt + '&lt;/p&gt;';
          }
          else{
              bar.innerHTML = '&lt;div id=&quot;shipping__progress&quot;&gt;&lt;/div&gt;&lt;p class=&quot;shipping-bar__message&quot;&gt;' + promote_txt.replace('[value]',value_left_money) + '&lt;/p&gt;';
          }
        }
        
      );      
      }
    }
    return { update:update }
  }) ();
  
    });
  </code></pre>
  <p>I use <code>theme.ShippingBar.update()</code> wherever there is a <code>updateCart</code> or <code>addCart</code> to update the bar.</p>
  <p>Any ideas?</p>