如何在 Shopify ajax 购物车中更新 CSS 样式

Question

我正在使用liquid-ajax-cart 为我客户的 Shopify 商店构建 ajax 购物车。现在我正在尝试添加一个进度条，显示用户距离免费送货选项有多远。该栏是.minicart__header 中的.free-shipping-bar 元素。

免费送货从 100 美元起（free_shipping_threshold_price 液体变量），所以如果购物车总额为 100 美元或更多，我希望栏完全装满。

如果购物车总额低于 100 美元，那么我想相应地填充栏（40% 为 40 美元，50% 为 50 美元等）。

当用户点击“添加到购物车”时，该部分的 HTML 会更新，但 css ({% style %}) 不会。 是否可以以某种方式修复它，以便也可以通过 ajax 更新 css 代码？

<div class="minicart-wrapper">
    <div class="minicart-overlay" data-ajax-cart-toggle-class-button="js-ajax-cart-open"></div>
    <div class="minicart" data-ajax-cart-section>
        <div class="minicart__header">
            <h3 class="title">{{ 'general.cart.title' | t }}</h3>
            <div class="free-shipping-bar"></div>           
            <button class="close-button" data-ajax-cart-toggle-class-button="js-ajax-cart-open" type="button"></button>
        </div>
        <div class="minicart__items">
            <!-- items code -->
        </div>
        <div class="minicart__footer">
            <!-- footer code -->
        </div>
    </div>
</div>

{%- liquid
    assign free_shipping_threshold_price = 10000
    assign free_shipping_percent = cart.total_price | times: 100 | divided_by: free_shipping_threshold_price
-%}

{% style %}
.free-shipping-bar {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: #c4c4c4;
}

.free-shipping-bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: {{ free_shipping_percent }}%;
    background-color: #005030;
    max-width: 100%;
}

{% endstyle %}


{% schema %}
{
    "name": "Ajax Cart",
    "settings": [
   
    ]
} 
{% endschema %}

Answer 1

根据docs，只有data-ajax-cart-section 元素内的部分会得到更新。所以你需要把应该更新的 CSS 样式放在元素中：

{%- liquid
    assign free_shipping_threshold_price = 10000
    assign free_shipping_percent = cart.total_price | times: 100 | divided_by: free_shipping_threshold_price
-%}

<div class="minicart-wrapper">
    <div class="minicart-overlay" data-ajax-cart-toggle-class-button="js-ajax-cart-open"></div>
    <div class="minicart" data-ajax-cart-section>
        <style>
            .free-shipping-bar:after { 
                width: {{ free_shipping_percent }}% !important; 
            }
        </style>
        <!-- Mini-cart code -->
    </div>
</div>