关键词：
【中文标题】在 Shopify 中选择新变体时价格未更新【英文标题】：Price not updating when selecting a new variant in Shopify 【发布时间】：2020-11-20 16:04:44 【问题描述】：我正在尝试编辑 Debut 主题以更好地满足我客户的需求。每当我在 product-template.liquid 文件中编辑变体选择器时，它都会引发错误并且不会将价格更新为正确的变体。
错误：
Uncaught TypeError: Cannot read property 'available' of undefined
at Product._initVariants (theme.js?v=785054923643579389:8098)
at new Product (theme.js?v=785054923643579389:8010)
at Sections._createInstance (theme.js?v=785054923643579389:47)
at Sections.<anonymous> (theme.js?v=785054923643579389:141)
at NodeList.forEach (<anonymous>)
at Sections.register (theme.js?v=785054923643579389:139)
at HTMLDocument.<anonymous> (theme.js?v=785054923643579389:9467)
原始代码是这样的（按预期完美运行）：
<div class="product-form__controls-group">
% for option in product.options_with_values %
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector- forloop.index0 " >
option.name
</label>
<select class="single-option-selector single-option-selector-section.id product-form__input" id="SingleOptionSelector- forloop.index0 " data-index="option forloop.index ">
% for value in option.values %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
</select>
</div>
% endfor %
</div>
我对此进行了编辑（我将两者分开，因为这是我的客户在他提出的设计中需要的）：
<div class="product-form__controls-group">
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-0">
Material
</label>
<select class="single-option-selector single-option-selector- section.id product-form__input" id="SingleOptionSelector- forloop.index0 " data-index="option forloop.index ">
% for option in product.options_by_name['Material'].values %
% for value in option %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
% endfor %
</select>
</div>
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-1">
Size
</label>
<select class="single-option-selector single-option-selector- section.id product-form__input" id="SingleOptionSelector- forloop.index0 " data-index="option forloop.index ">
% for option in product.options_by_name['Size'].values %
% for value in option %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
% endfor %
</select>
</div>
</div>
如果有人可以帮助我，那就太棒了，因为 Shopify 论坛根本没有帮助。
【问题讨论】：
【参考方案1】：您的代码不起作用，因为它没有创建 Theme JS 所期望的所需架构。所以它无法识别所选的变体。在原始代码中，使用 this 指定了一个名为 data-index 的数据属性。
data-index="option forloop.index "
但是，您没有将其更改为数值，因为您没有使用 for 循环。所以要解决这个问题，我们必须在选项数组中找到选项的位置。为此，我这样做了。
% for product_option in product.options_with_values %
% if product_option.name == "Material" %
% assign material_index = forloop.index %
% elsif product_option.name == "Size" %
% assign size_index = forloop.index %
% endif %
% endfor %
如果您正在使用，也包括其他选项。所以完整的工作代码是
% for product_option in product.options_with_values %
% if product_option.name == "Material" %
% assign material_index = forloop.index %
% elsif product_option.name == "Size" %
% assign size_index = forloop.index %
% endif %
% endfor %
<div class="product-form__controls-group">
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-0">
Material
</label>
<select class="single-option-selector single-option-selector- section.id product-form__input" id="SingleOptionSelector-material_index" data-index="optionmaterial_index">
% for option in product.options_by_name['Material'].values %
% for value in option %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
% endfor %
</select>
</div>
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-1">
Size
</label>
<select class="single-option-selector single-option-selector- section.id product-form__input" id="SingleOptionSelector-size_index" data-index="optionsize_index">
% for option in product.options_by_name['Size'].values %
% for value in option %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
% endfor %
</select>
</div>
</div>
【讨论】：
附加问题，现在当我想将所述变体添加到我的购物车时，它给了我这个错误：TypeError: Cannot read property 'classList' of null at Product._setCartCountBubble (theme.js?v=16941873179886687807:8536) at theme.js?v=16941873179886687807:8377
@SiemenGijbels 你确定这是因为上面的代码吗？因为它对我来说在新的 Debut 主题上工作得很好。可能你做了一些其他的自定义？Shopify 在选择变体时触发功能，但不会覆盖现有功能
】Shopify在选择变体时触发功能，但不会覆盖现有功能【英文标题】：Shopifytriggerfunctiononvariantselectionbutdon\'toverrideexistingfunctionality【发布时间】：2019-11-1023:20:58【问题描述】：我在Shopify上使用“阁楼”主题。当我在产品页面上选... 查看详情
Shopify 变体价格现在正确显示
】Shopify变体价格现在正确显示【英文标题】：ShopifyVariantPriceNowShowingCorrectly【发布时间】：2020-03-0909:54:06【问题描述】：这看起来很简单，但无论出于何种原因，我都看不到森林中的树木。所以我在屏幕截图1中看到了当前情况... 查看详情
使用 WooCommerce 选择变体时更新产品页面上的价格
】使用WooCommerce选择变体时更新产品页面上的价格【英文标题】：UpdatingthepriceonproductpagewhenvariationsarechosenwithWooCommerce【发布时间】：2017-07-1216:41:19【问题描述】：我在使用WooCommerce在产品页面上显示产品的更新价格时遇到了一些... 查看详情
购物车数据未在 shopify 中使用 ajax 更新
】购物车数据未在shopify中使用ajax更新【英文标题】：cartdatanotupdateinshopifyusingajax【发布时间】：2019-05-0114:36:21【问题描述】：我在Shopify中遇到问题。我想使用ajax更新按钮点击时的购物车数量，但它会给出类似的错误"status":404,"m... 查看详情
尝试在 Shopify 中添加变体时出错
】尝试在Shopify中添加变体时出错【英文标题】：ErrorwhentryingtoaddavariantinShopify【发布时间】：2017-02-0813:42:27【问题描述】：我正在尝试向现有产品ID添加一个变体。下面是我完成的JSON请求。但是我得到一个错误"errors":"variant":"expec... 查看详情
Shopify - 通过多个变体 ID 检索多个变体详细信息
】Shopify-通过多个变体ID检索多个变体详细信息【英文标题】：Shopify-Retrievesmultiplevariantdetailbymultiplevariantid【发布时间】：2019-05-0309:02:37【问题描述】：有没有办法在单个shopify调用中使用多个变体ID获取多个变体详细信息。实际... 查看详情
更新变体产品价格 - 在产品页面中不可见 - Woocommerce
】更新变体产品价格-在产品页面中不可见-Woocommerce【英文标题】：Updatevariationproductprice-notvisibleinproductpage-Woocommerce【发布时间】：2017-09-0106:19:37【问题描述】：我已经定制了可变类型的进口产品。然后我制作了一个必须更新变... 查看详情
Shopify - 将尺寸变体从选择下拉菜单更改为按钮
】Shopify-将尺寸变体从选择下拉菜单更改为按钮【英文标题】：Shopify-Changesizevariantfromselectdropdowntobuttons【发布时间】：2020-07-2807:13:45【问题描述】：我想将我的变体显示从下拉（选择）更改为使用按钮。我在网上其他地方找不到... 查看详情
Shopify- 获取属性形式 <select>
】Shopify-获取属性形式<select>【英文标题】：Shopify-gettingattributeform<select>【发布时间】：2021-10-0522:28:33【问题描述】：所以我有一个问题。我正在Sopify中开发一家商店，并且我有一个自定义部分，其中我有用于选择变体... 查看详情
隐藏产品可变价格，直到在 WooCommerce 中选择所有变体字段
】隐藏产品可变价格，直到在WooCommerce中选择所有变体字段【英文标题】：HideproductvariablepriceuntilallvariationfieldsareselectedinWooCommerce【发布时间】：2020-05-0319:17:22【问题描述】：我想在WooCommerce的产品页面上隐藏价格，直到客户选择... 查看详情
Shopify 的新主题编辑器未显示自定义部分
】Shopify的新主题编辑器未显示自定义部分【英文标题】：CustommadesectionsnotappearingwithShopify\'snewthemeeditor【发布时间】：2017-02-1308:52:39【问题描述】：随着新主题编辑器的发布，我被分配使用Shopify的新主题构建器框架来构建新客户... 查看详情
WooCommerce 变体图像未显示
...：2017-01-2716:29:01【问题描述】：在单个产品页面上，当我选择一种颜色时，特色图像不会改变。WordPress已更新至4.6.1，WooCommerce已更新至2.6.2，Storefront主题已更新至2.1.2。我已经停用了除WooCommerce之外的所有插件，并且完全按照我 查看详情
Shopify：如何显示每个位置变体的库存数量？
】Shopify：如何显示每个位置变体的库存数量？【英文标题】：Shopify:Howtodisplayinventoryquantitiesofavariantperlocation?【发布时间】：2020-08-2408:00:11【问题描述】：是否可以在产品页面上显示每个位置的产品变型的库存数量？由于此信息... 查看详情
使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体
】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】：ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】：2016-05-1509:28:20【问题描述】：嘿，我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情
选择器选项未动态更新 SwiftUI
】选择器选项未动态更新SwiftUI【英文标题】：PickerOptionsNotUpdatingDynamicallySwiftUI【发布时间】：2020-07-1611:56:34【问题描述】：我有一个选择器，它需要在找到新的BLE外围设备时进行动态更新。但是，选择器永远不会使用新值进行... 查看详情
shopify 产品的颜色样本/变体下拉列表
】shopify产品的颜色样本/变体下拉列表【英文标题】：ColorSwatch/Variantdropdownlistforshopifyproducts【发布时间】：2013-09-2410:00:39【问题描述】：我打算做的是为产品“颜色”变体做一个下拉列表，但是与选项值有某种关联，会显示图像... 查看详情
产品变体未反映 Django 电子商务项目中订单摘要中的更新数量
】产品变体未反映Django电子商务项目中订单摘要中的更新数量【英文标题】：ProductvariantsnotreflectingupdatedquantityinOrderSummaryinaDjangoE-commerceProject【发布时间】：2020-11-2017:17:49【问题描述】：我对订单摘要页面中相关的变体和数量有... 查看详情
使用 Shopify 在 Collection 页面上筛选变体
】使用Shopify在Collection页面上筛选变体【英文标题】：VariantfilteronCollectionpageswithShopify【发布时间】：2017-12-2223:22:28【问题描述】：我正在尝试在我的收藏页面中设置过滤器。到目前为止，我设法设置了一个很棒的自定义标签过... 查看详情