如何使用Javascript动态更新发货进度条？

Question

我在我的产品页面上制作了一个发货进度条，当有人添加到购物车或updates/removes购物车抽屉中的数量时，它会更新。

当客户将商品添加到他们的购物车时，绿色进度条不会像价格那样动态更新，成功消息会动态更新，例如

这里是液体代码：

{% 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 %}

这是我的 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 }
}) ();

  });

只要有updateCart或addCart我就用theme.ShippingBar.update()来更新吧

有什么想法吗？

Answer 1

我自己修复了它，这是我的工作代码：

    {% 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}}%;
        }

如何使用Javascript动态更新发货进度条？

How to dynamically update shipping progress bar with Javascript?

javascript

jquery

dynamic

shopify

progress-bar