Javascript 购物车内容总值中的WooCommerce进度条

我的目标是这样的：

对于当前代码，它不会在进度栏中显示购物车总数。我做错了什么？ 如何集成这些步骤/堆栈

var cartotal=WC（）->cart->get_cart_contents_total（）；
document.getElementById（“购物车进度条”）.value=carttotal
#购物车进度条{
背景色：#f9f9f9；
盒影：插入0 1px 1px rgba（100,100,100,0.1）；
盒子尺寸：初始尺寸；
颜色：#fff；
字体大小：20px；
高度：30px；
位置：相对位置；
文本对齐：居中；
宽度：自动；
利润率：10px；
边框：1px纯灰；
}
主要错误在第一行的Javascript代码中：

var carttotal = WC()->cart->get_cart_contents_total(); 

应该改为：

var carttotal = <?php echo (float) WC()->cart->get_cart_contents_total(); ?>;

你的例子没有确切说明你想要这个。我已经通过
woocommerce\u-before\u-cart\u表
操作挂钩将其添加到购物车页面。在添加了一些额外的CSS样式之后，看起来是这样的


当然，您也可以将其添加到模板文件中，而无需使用
add\u操作
/
功能
标记

动作钩：

add_action( 'woocommerce_before_cart_table', 'cart_discount_progress_bar' );
function cart_discount_progress_bar() {

    // Create progress bar
    $cart_total = WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax();
    printf( '<progress id="cart-progress-bar" max="100" value="%s"></progress>', $cart_total );

    // Create steps
    $steps = array(
        0 => '',
        30 => __( '3% discount', 'discount-bar'), 
        50 => __( '8% discount', 'discount-bar'), 
        100 => __( '10% discount', 'discount-bar'), 
    );
    echo '<div id="cart-progress-steps">';
    foreach ( $steps as $step => $discount ) {
        printf('<div class="step step-%1$s" style="left:%1$s%%">%2$s<span class="discount">%3$s</span></div>', $step, wc_price( $step ), $discount );
    }
    echo '</div>';

}

示例中的错误是您试图使用PHP为JavaScript变量创建一个值。因此，要实现这一点，您必须跳入或跳出PHP：

var carttotal = <?php echo WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax(); ?>;

var-cartotal=；

或者像我的例子一样，选择用PHP构建整个进度条。
我用演示编号为
carttotal
尝试了你的代码，但它没有在进度条上显示总进度。然后我删除了
width:auto从你的css，它的工作。删除，看看一次，如果它的工作没有设置任何价值在我这方面不幸的是，我检查了几个购物车的价值。真棒，非常感谢！我可以问您如何使用此功能更改步骤，使其显示例如“30欧元购物车总额3%折扣”和下一步“50欧元购物车总额5%折扣”？没问题。您可以展开
$steps
数组以包括折扣。查看我的更新答案。如果我上次更新的答案是您想要的答案，我不会介意奖金。：）我不小心给了@LoicTheAztec赏金，因为它在点击收件箱通知您的答案后向他滚动。我有什么办法可以纠正这一点或者手动给你一笔赏金吗？那太不幸了。我相信一旦赏金被授予，就没有办法将它转移到另一个答案（）。因此，您必须创建一个新的悬赏，或者@LoicTheAztec必须在这个问题上放置悬赏，并将其奖励给这个答案。您能回答上面接受的答案中的评论吗？我已经尝试了很多方法来联系你，但是没有任何运气。我希望你愿意澄清这一点。提前谢谢你。很失望地注意到你不愿意回应我的任何尝试，试图直接解决这个问题。我可以清楚地看到，你是积极的，所以，但你不会花时间来解决这个问题。现在，这甚至不再是名誉点的问题，而是原则问题。我认为这是一个公平和支持的社区。不幸的是，在这一点上，你让我怀疑。
.woocommerce-cart #cart-progress-bar {
    border-radius:0;
    border: 1px solid #eaeaea;
    margin-top: 1em;
    color: cornflowerblue;
    background: floralwhite;
}

.woocommerce-cart #cart-progress-bar::-webkit-progress-value {
    background: cornflowerblue;
}

.woocommerce-cart #cart-progress-bar::-webkit-progress-bar {
    background: floralwhite;
}

.woocommerce-cart #cart-progress-steps {
    margin-bottom: 3em;
}

.woocommerce-cart #cart-progress-bar,
.woocommerce-cart #cart-progress-steps {
    width: 100%;
    position: relative;
    height: 20px;
    box-sizing: border-box;
}

.woocommerce-cart #cart-progress-steps .step {
    position: absolute;
    width: 70px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    transform: translateX(-50%);
}

.woocommerce-cart #cart-progress-steps .step .discount {
    font-size: 12px;
    line-height: 11px;
    display: block;
}

.woocommerce-cart #cart-progress-steps .step:before {
    content: '';
    display: block;
    position: absolute;
    width: 40px;
    height: 18px;
    border-left: 2px solid black;
    left: 50%;
    top: -26px;
}

var carttotal = <?php echo WC()->cart->get_cart_contents_total() + WC()->cart->get_cart_contents_tax(); ?>;