正文

Shopify 变体价格现在正确显示

 2023-02-16  23

关键词：

【中文标题】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 &nbsp; | &nbsp; 

        <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 &nbsp; | &nbsp; 
      <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主题开发|从选择列表中选择不同的产品变体时更新价格【英文标题】：ShopifyThemeDevelopment|Updatingpricewhendifferentproductvariantischosenfromselectlist【发布时间】：2020-02-2017:51:00【问题描述】：当从其他产品选项的选择下拉列表中... 查看详情

Shopify 在选择变体时触发功能，但不会覆盖现有功能

】Shopify在选择变体时触发功能，但不会覆盖现有功能【英文标题】：Shopifytriggerfunctiononvariantselectionbutdon\'toverrideexistingfunctionality【发布时间】：2019-11-1023:20:58【问题描述】：我在Shopify上使用“阁楼”主题。当我在产品页面上选... 查看详情

Shopify - 通过多个变体 ID 检索多个变体详细信息

】Shopify-通过多个变体ID检索多个变体详细信息【英文标题】：Shopify-Retrievesmultiplevariantdetailbymultiplevariantid【发布时间】：2019-05-0309:02:37【问题描述】：有没有办法在单个shopify调用中使用多个变体ID获取多个变体详细信息。实际... 查看详情

Shopify：如何显示每个位置变体的库存数量？

】Shopify：如何显示每个位置变体的库存数量？【英文标题】：Shopify:Howtodisplayinventoryquantitiesofavariantperlocation?【发布时间】：2020-08-2408:00:11【问题描述】：是否可以在产品页面上显示每个位置的产品变型的库存数量？由于此信息... 查看详情

html[shopify]每个变体显示多个图像(代码片段)

查看详情

使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】：ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】：2016-05-1509:28:20【问题描述】：嘿，我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情

shopify 产品的颜色样本/变体下拉列表

】shopify产品的颜色样本/变体下拉列表【英文标题】：ColorSwatch/Variantdropdownlistforshopifyproducts【发布时间】：2013-09-2410:00:39【问题描述】：我打算做的是为产品“颜色”变体做一个下拉列表，但是与选项值有某种关联，会显示图像... 查看详情

Shopify - 将尺寸变体从选择下拉菜单更改为按钮

】Shopify-将尺寸变体从选择下拉菜单更改为按钮【英文标题】：Shopify-Changesizevariantfromselectdropdowntobuttons【发布时间】：2020-07-2807:13:45【问题描述】：我想将我的变体显示从下拉（选择）更改为使用按钮。我在网上其他地方找不到... 查看详情

Shopify- 获取属性形式 <select>

】Shopify-获取属性形式<select>【英文标题】：Shopify-gettingattributeform<select>【发布时间】：2021-10-0522:28:33【问题描述】：所以我有一个问题。我正在Sopify中开发一家商店，并且我有一个自定义部分，其中我有用于选择变体... 查看详情

尝试在 Shopify 中添加变体时出错

】尝试在Shopify中添加变体时出错【英文标题】：ErrorwhentryingtoaddavariantinShopify【发布时间】：2017-02-0813:42:27【问题描述】：我正在尝试向现有产品ID添加一个变体。下面是我完成的JSON请求。但是我得到一个错误"errors":"variant":"expec... 查看详情

使用 Shopify 在 Collection 页面上筛选变体

】使用Shopify在Collection页面上筛选变体【英文标题】：VariantfilteronCollectionpageswithShopify【发布时间】：2017-12-2223:22:28【问题描述】：我正在尝试在我的收藏页面中设置过滤器。到目前为止，我设法设置了一个很棒的自定义标签过... 查看详情

在 Shopify 产品页面上显示一种颜色选项

】在Shopify产品页面上显示一种颜色选项【英文标题】：DisplayonecolouroptiononShopifyproductpage【发布时间】：2021-01-1810:47:02【问题描述】：我试图在任何时候只显示我产品的一种颜色变体。当我手动为每种产品颜色分配图像时，我可... 查看详情

使用 WooCommerce 选择变体时更新产品页面上的价格

】使用WooCommerce选择变体时更新产品页面上的价格【英文标题】：UpdatingthepriceonproductpagewhenvariationsarechosenwithWooCommerce【发布时间】：2017-07-1216:41:19【问题描述】：我在使用WooCommerce在产品页面上显示产品的更新价格时遇到了一些... 查看详情

Shopify 创建订单

】Shopify创建订单【英文标题】：ShopifyCreateorder【发布时间】：2015-04-0217:44:25【问题描述】：我正在尝试从我的IOS应用到我的Shopify网站创建订单。这是文档说我应该做的。创建一个仅包含产品变体ID的简单订单。POST/admin/orders.json"... 查看详情

Shopify：向特定产品页面添加其他部分

】Shopify：向特定产品页面添加其他部分【英文标题】：Shopify:Addadditionalsectionstoaspecificproductpage【发布时间】：2021-06-2918:07:43【问题描述】：我正在尝试向我的Shopify产品页面添加其他部分。我已经成功添加了这些部分，但现在只... 查看详情

在区域 shopify 商店中正确使用 hreflang / canonical 标签 [关闭]

】在区域shopify商店中正确使用hreflang/canonical标签[关闭]【英文标题】：Correctuseofhreflang/canonicaltagsonregionalshopifystores[closed]【发布时间】：2019-04-2222:03:05【问题描述】：我正在设置2个区域性shopify网站。我是否应该考虑使用规范标... 查看详情

html更新购物车页面上图像的脚本，以显示在变体图像应用程序中选择的正确缩略图。(代码片段)

查看详情

更新变体产品价格 - 在产品页面中不可见 - Woocommerce

】更新变体产品价格-在产品页面中不可见-Woocommerce【英文标题】：Updatevariationproductprice-notvisibleinproductpage-Woocommerce【发布时间】：2017-09-0106:19:37【问题描述】：我已经定制了可变类型的进口产品。然后我制作了一个必须更新变... 查看详情