[英]How to update css styles in Shopify ajax cart
I'm building ajax cart for my client's Shopify store with liquid-ajax-cart .我正在为我客户的 Shopify 商店使用liquid-ajax-cart构建 ajax 购物车。 Now I'm trying to add a progress bar that shows how far a user from the free shipping option.
现在我正在尝试添加一个进度条,显示用户与免费送货选项的距离。 The bar is the
.free-shipping-bar
element within the .minicart__header
.该栏是 .minicart__header 中的
.minicart__header
.free-shipping-bar
元素。
The free shipping starts from $100 ( free_shipping_threshold_price
liquid variable) so I want the bar to be filled completely if the cart total is $100 or more.免费送货从 100 美元起(
free_shipping_threshold_price
液体变量),所以如果购物车总额为 100 美元或更多,我希望栏完全装满。
If the cart total is less than $100 then I want to fill the bar accordingly (40% for $40, 50% for $50 etc.).如果购物车总额少于 100 美元,那么我想相应地填充栏(40 美元为 40 美元,50 美元为 50% 等)。
The HTML of the section updates as it should when a user clicks "add to cart" but the css ( {% style %}
) doesn't.当用户单击“添加到购物车”时,该部分的 HTML 会更新,但 css (
{% style %}
) 不会。 Is possible to fix it somehow so that css code updates by ajax also?是否可以以某种方式修复它,以便 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 %}
according to the docs only the part that is inside the data-ajax-cart-section
element will get updated.根据文档,只有
data-ajax-cart-section
元素内的部分会得到更新。 So you need to put the CSS styles that should be updated within the element:因此,您需要将应更新的 CSS styles 放入元素中:
{%- 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.