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

如何解决购物车内容总值中的WooCommerce进度栏

我的瞄准结果是这样的：

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

var carttotal = WC()->cart->get_cart_contents_total(); 
document.getElementById("cart-progress-bar").value = carttotal;

#cart-progress-bar {
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 1px rgba(100,100,0.1);
  box-sizing: initial;
  color: #fff;
  font-size: 20px;
  height: 30px;
  position: relative;
  text-align: center;
  width: auto;
  margin: 10px;
  border:1px solid grey;
}

<progress id="cart-progress-bar" max="100" value="0"></progress>

解决方法

主要错误在于第一行的Javascript代码：

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

应改为：

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

还有CSS width必须为100%。

因此代码将为（使用jQuery，并将width属性更改为100%）：

?>
<style>
#cart-progress-bar {
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 1px rgba(100,100,0.1);
  box-sizing: initial;
  color: #fff;
  font-size: 20px;
  height: 30px;
  position: relative;
  text-align: center;
  width: 100%;
  margin: 10px;
  border:1px solid grey;
}
</style>

<progress id="cart-progress-bar" max="100" value="0"></progress>

<script>
    (function($){
        $('#cart-progress-bar').val(<?php echo floatval( WC()->cart->get_cart_contents_total() ); ?>);
    })(jQuery);
</script>
<?php

,

您的示例未确切说明您要在哪里。我已通过woocommerce_before_cart_table操作钩将其添加到购物车页面。添加一些额外的CSS样式后，看起来像这样。

您当然也可以将其添加到模板文件中，而无需标记add_action / function。

动作挂钩：

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',100 => __( '10% discount',);
    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>';

}

CSS：

.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;
}

您的示例中的错误是您试图使用PHP为JavaScript变量创建值。因此，要完成这项工作，您将不得不跳入和跳出PHP：

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

或者像我的示例一样，选择在PHP中构建整个进度栏。