【发布时间】：2021-04-30 19:56:24
【问题描述】：
我在我的产品页面上创建了一个发货进度条，当有人添加到购物车或更新/删除购物车抽屉中的数量时，该进度条会更新。
随着客户将商品添加到购物车中，绿色进度条不会像价格和成功消息那样动态更新，例如
这里是液体代码：
{% 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() 来更新栏。
有什么想法吗？
【问题讨论】：
-
你需要更新JS代码，这个JS代码不起作用。
-
@Onkar 你知道我哪里出错了吗？如何解决？
-
你能分享网站的网址吗？
-
@Onkar 是的，是babyesmee.co.uk
-
看来你的 JS 代码没问题，只是代码放置有问题，需要在网站上调试，所以我认为如果不通过网站测试代码，任何建议都是浪费时间。跨度>
标签： javascript jquery dynamic progress-bar shopify