如何在 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 %}) 不会。是否可以通过某种方式修复它，以便 css 代码也由 ajax 更新？

<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>

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

How to update css styles in Shopify ajax cart

css

ajax

liquid

shopify