如何使用 Javascript 动态更新运输进度条？

分类：编程问答

如何解决如何使用 Javascript 动态更新运输进度条？

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

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

enter image description here

这是液体代码：

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

  });

只要有 theme.ShippingBar.update() 或 updateCart，我就使用 addCart 来更新栏。

有什么想法吗？

解决方法

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot