Shopify 变体价格现在正确显示
Posted
技术标签:
【中文标题】Shopify 变体价格现在正确显示【英文标题】:Shopify Variant Price Now Showing Correctly 【发布时间】:2020-03-09 09:54:06 【问题描述】:这看起来很简单,但无论出于何种原因,我都看不到森林中的树木。所以我在屏幕截图 1 中看到了当前情况,我为一个产品设置了三个不同的变体。产品的尺寸基于 ML...但出于某种原因,所有 3 个变体都显示在按钮上,而不是所选的那个。
我目前用来提取这个的代码是:
% if current_variant.available %
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
% for variant in product.variants %
variant.price | money_without_trailing_zeros
% endfor %
</strong>
</span>
</button>
% else %
【问题讨论】:
【参考方案1】:仅使用 Liquid 无法实现您想要实现的目标。 Liquid 只是一种在服务器端呈现的模板语言。它不会在客户端更新。
您只想在按钮中显示所选变体的价格,但 Liquid 在服务器端没有关于此的信息,您只需遍历所有可用变体的价格。因此,您会在按钮中看到所有价格。
要解决此问题,请使用 Liquid 使用第一个可用或选择的变体价格,并在客户端使用 javascript 更新剩余。
如果有,则返回当前选择的变体的变体对象 是 URL 中有效的 ?variant= 查询参数。如果没有 选择的变体,返回第一个可用的变体。
这样做,你的代码会像
<button type="submit" name="add" class="border--none">
<span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
add to bag |
<strong>
product.selected_or_first_available_variant.price | money_without_trailing_zeros
</strong>
</span>
</button>
然后在变体更改时通过 JavaScript 更改价格,这取决于您的主题。
更多关于Selected or First Available Variant的信息
【讨论】:
感谢@Bilal Akbar 的回复,多一些方向会对此有好处/ @GlenWheeler 如答案中所述,这取决于主题。监听变量更改事件,然后修改按钮文本。以上是关于Shopify 变体价格现在正确显示的主要内容,如果未能解决你的问题,请参考以下文章
Shopify - 通过多个变体 ID 检索多个变体详细信息