关键词：
【中文标题】Shopify 主题开发 |从选择列表中选择不同的产品变体时更新价格【英文标题】：Shopify Theme Development | Updating price when different product variant is chosen from select list 【发布时间】：2020-02-20 17:51:00 【问题描述】：当从其他产品选项的选择下拉列表中选择产品的新变体时，我一直在查看想要显示更新产品价格的人的帖子。他们都没有适合我的答案。
这是我的 product.liquid 文件和 theme.js。
我认为 theme.js 中相关的 sn-p 从第 3050 行开始。
% include 'breadcrumbs' %
<div itemscope itemtype="http://schema.org/Product" id="ProductSection- section.id " data-section-id=" section.id " data-section-type="product" data-enable-history-state="true">
<meta itemprop="name" content=" product.title ">
<meta itemprop="url" content=" shop.url product.url ">
<meta itemprop="image" content=" product.featured_image.src | img_url: '800x' ">
% assign current_variant = product.selected_or_first_available_variant %
<div class="section product-page-section">
<div class="section-inner">
<div class="product-page-left">
% assign current_variant = product.selected_or_first_available_variant %
% assign featured_image = current_variant.featured_image | default: product.featured_image %
<div class="featured-image" style="background-image: url( featured_image | img_url: 'master' )">
% if product.compare_at_price > product.price %
<div class="special-offer-banner">
Special<br/>
Offer!
</div>
% endif %
</div>
<div class="additional-images">
% for image in product.images %
<div class="additional-image-contain">
<a href=" image.src | img_url: 'master' " class="box-link additional-img"></a>
<div class="additional-image" style="background-image: url( image.src | img_url: 'compact' )"></div>
</div>
% endfor %
</div>
<div class="vendor-images">
% assign coll_handle = product.vendor | handleize %
<a href=" collections[coll_handle].url " class="box-link"></a>
<img src=" collections[coll_handle].image | collection_img_url: 'medium' " class="vendor-image">
</div>
</div>
<div class="product-page-right">
<h1 class="product-page-title" itemprop="name"> product.title </h1>
<h2 class="product-page-title" itemprop="brand" style="display: none;"> product.vendor </h2>
<div class="add-to-cart-contain">
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-price">
% if current_variant.compare_at_price > current_variant.price %
<p class="product-compare-at-price">
current_variant.compare_at_price | money
</p>
% endif %
<p class="product-regular-price" itemprop="price"> current_variant.price | money </p>
</div>
<select name="id" id="ProductSelect- section.id " class="product-single__variants">
% for variant in product.variants %
% if variant.available %
<option % if variant == product.selected_or_first_available_variant % selected="selected" % endif % data-sku=" variant.sku " value=" variant.id "> variant.title - variant.price | money_with_currency </option>
% else %
<option disabled="disabled">
variant.title - 'products.product.sold_out' | t
</option>
% endif %
% endfor %
</select>
<div class="product-page-quantity-add">
<input type="number" id="Quantity" name="quantity" value="1" min="1">
<div class="cta-button add-to-cart-button">
<button class="box-link" type="submit" name="add" id="AddToCart"></button>
<div class="button-text">
<p>Add to basket</p>
</div>
<div class="button-icon">
<img class="button-icon-image" src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/cart-white.png?849" >
</div>
</div>
</div>
</form>
</div>
<div id="shopify-product-reviews" data-id="product.id"> product.metafields.spr.reviews </div>
</div>
<div class="product-page-content">
%- assign description = product.description | split: '<!-- split -->' -%
<div class="product_tabs tabs rte">
<ul class="tab_titles">
% if description[0] != "" %
<li class="single_tab_title" data-tab-id="Description">
Description
</li>
% endif %
% if description[1] != "" %
<li class="single_tab_title" data-tab-id="ProductAdvantages">
Product Details
</li>
% endif %
% if description[2] != "" %
<li class="single_tab_title" data-tab-id="Specifications">
Additional Information
</li>
% endif %
</ul>
<div class="product-details">
% if description[0] != "" %
<div class="single_tab_content active" id="Description">
% if product.description contains '<!-- split -->' %
<h4 class="product-details-title">Description</h4>
<div class="product-details-contain"> description[0] </div>
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
% if description[1] != "" %
<div class="single_tab_content" id="ProductAdvantages">
% if product.description contains '<!-- split -->' %
<h4 class="product-details-title">Product Details</h4>
<div class="product-details-contain"> description[1] </div>
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
% if description[2] != "" %
<div class="single_tab_content" id="Specifications">
% if product.description contains '<!-- split -->' %
<div class="product-details-contain"><h4 class="product-details-title">Additional Information</h4></div>
description[2]
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
</div>
</div>
</div>
</div>
</div>
</div>
% unless product == empty %
<script type="application/json" id="ProductJson- section.id ">
product | json
</script>
% endunless %
'product-images.js' | asset_url | script_tag
'product-tabs.js' | asset_url | script_tag % include 'breadcrumbs' %
<div itemscope itemtype="http://schema.org/Product" id="ProductSection- section.id " data-section-id=" section.id " data-section-type="product" data-enable-history-state="true">
<meta itemprop="name" content=" product.title ">
<meta itemprop="url" content=" shop.url product.url ">
<meta itemprop="image" content=" product.featured_image.src | img_url: '800x' ">
% assign current_variant = product.selected_or_first_available_variant %
<div class="section product-page-section">
<div class="section-inner">
<div class="product-page-left">
% assign current_variant = product.selected_or_first_available_variant %
% assign featured_image = current_variant.featured_image | default: product.featured_image %
<div class="featured-image" style="background-image: url( featured_image | img_url: 'master' )">
% if product.compare_at_price > product.price %
<div class="special-offer-banner">
Special<br/>
Offer!
</div>
% endif %
</div>
<div class="additional-images">
% for image in product.images %
<div class="additional-image-contain">
<a href=" image.src | img_url: 'master' " class="box-link additional-img"></a>
<div class="additional-image" style="background-image: url( image.src | img_url: 'compact' )"></div>
</div>
% endfor %
</div>
<div class="vendor-images">
% assign coll_handle = product.vendor | handleize %
<a href=" collections[coll_handle].url " class="box-link"></a>
<img src=" collections[coll_handle].image | collection_img_url: 'medium' " class="vendor-image">
</div>
</div>
<div class="product-page-right">
<h1 class="product-page-title" itemprop="name"> product.title </h1>
<h2 class="product-page-title" itemprop="brand" style="display: none;"> product.vendor </h2>
<div class="add-to-cart-contain">
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-price">
% if current_variant.compare_at_price > current_variant.price %
<p class="product-compare-at-price">
current_variant.compare_at_price | money
</p>
% endif %
<p class="product-regular-price" itemprop="price"> current_variant.price | money </p>
</div>
<select name="id" id="ProductSelect- section.id " class="product-single__variants">
% for variant in product.variants %
% if variant.available %
<option % if variant == product.selected_or_first_available_variant % selected="selected" % endif % data-sku=" variant.sku " value=" variant.id "> variant.title - variant.price | money_with_currency </option>
% else %
<option disabled="disabled">
variant.title - 'products.product.sold_out' | t
</option>
% endif %
% endfor %
</select>
<div class="product-page-quantity-add">
<input type="number" id="Quantity" name="quantity" value="1" min="1">
<div class="cta-button add-to-cart-button">
<button class="box-link" type="submit" name="add" id="AddToCart"></button>
<div class="button-text">
<p>Add to basket</p>
</div>
<div class="button-icon">
<img class="button-icon-image" src="https://cdn.shopify.com/s/files/1/0043/0886/0977/files/cart-white.png?849" >
</div>
</div>
</div>
</form>
</div>
<div id="shopify-product-reviews" data-id="product.id"> product.metafields.spr.reviews </div>
</div>
<div class="product-page-content">
%- assign description = product.description | split: '<!-- split -->' -%
<div class="product_tabs tabs rte">
<ul class="tab_titles">
% if description[0] != "" %
<li class="single_tab_title" data-tab-id="Description">
Description
</li>
% endif %
% if description[1] != "" %
<li class="single_tab_title" data-tab-id="ProductAdvantages">
Product Details
</li>
% endif %
% if description[2] != "" %
<li class="single_tab_title" data-tab-id="Specifications">
Additional Information
</li>
% endif %
</ul>
<div class="product-details">
% if description[0] != "" %
<div class="single_tab_content active" id="Description">
% if product.description contains '<!-- split -->' %
<h4 class="product-details-title">Description</h4>
<div class="product-details-contain"> description[0] </div>
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
% if description[1] != "" %
<div class="single_tab_content" id="ProductAdvantages">
% if product.description contains '<!-- split -->' %
<h4 class="product-details-title">Product Details</h4>
<div class="product-details-contain"> description[1] </div>
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
% if description[2] != "" %
<div class="single_tab_content" id="Specifications">
% if product.description contains '<!-- split -->' %
<div class="product-details-contain"><h4 class="product-details-title">Additional Information</h4></div>
description[2]
% else %
Product Splits not set up properly!
% endif %
</div>
% endif %
</div>
</div>
</div>
</div>
</div>
</div>
% unless product == empty %
<script type="application/json" id="ProductJson- section.id ">
product | json
</script>
% endunless %
'product-images.js' | asset_url | script_tag
'product-tabs.js' | asset_url | script_tag 我该如何继续？
【问题讨论】：
【参考方案1】：注意：这仅在您将商品添加到购物车时已经记录了正确的商品价格时才有效（例如，变体 1 = 5 英镑，变体 2 = 10 英镑，如果您将选择更改为变体 2，如果它没有在产品页面上正确显示其价格，则一旦被选中，然后当您点击添加到购物车时，变体 2 项目将添加到购物车中。
我决定走一条与我提出问题时计划的路线不同的路线。
在创建选择下拉菜单时，我创建了数据属性并为他们提供了每个订单项的价格。
<select name="id" id="ProductSelect- section.id " class="product-single__variants product-variant-selector"% if product.variants.size == 1 % style="visibility: hidden;"% endif %>
% for variant in product.variants %
% if variant.available %
<option % if variant == product.selected_or_first_available_variant % selected="selected" % endif % data-sku=" variant.sku " value=" variant.id " data-compare-price=" variant.compare_at_price | money " data-regular-price=" variant.price | money ">
<div class="variant-title"> variant.title </div>
–
% if current_variant.compare_at_price > current_variant.price %
<div class="variant-compare-price">RRP: variant.compare_at_price | money </div>
% endif %
<div class="variant-regular-price">% if current_variant.compare_at_price > current_variant.price %NOW: % endif % variant.price | money </div>
</option>
% else %
<option disabled="disabled">
variant.title - 'products.product.sold_out' | t
</option>
% endif %
% endfor %
</select>
然后我使用非常基本的 jQuery 来更改值：
<script>
(function($)
var comparePrice = $('.product-compare-at-price');
var regularPrice = $('.product-regular-price');
var variantOptions = $('.product-variant-selector');
if ( variantOptions.length )
variantOptions.on('change', function()
var cPrice = $(this).find(":selected").attr("data-compare-price");
comparePrice.html(cPrice);
var rPrice = $(this).find(":selected").attr("data-regular-price");
regularPrice.html(rPrice);
);
)(jQuery);
</script>
这会随着选择的变化而改变，将正确的商品添加到购物车的功能仍然完好无损。
【讨论】：
如何在本地开发 Shopify 主题？
】如何在本地开发Shopify主题？【英文标题】：HowtodevelopShopifythemeslocally?【发布时间】：2016-12-1217:03:06【问题描述】：我打算开发一个Shopify主题，我想弄清楚如何在本地运行/编辑它。如果可能的话，我希望能够做到以下几点：将... 查看详情
在 Shopify 中选择新变体时价格未更新
】在Shopify中选择新变体时价格未更新【英文标题】：PricenotupdatingwhenselectinganewvariantinShopify【发布时间】：2020-11-2016:04:44【问题描述】：我正在尝试编辑Debut主题以更好地满足我客户的需求。每当我在product-template.liquid文件中编辑... 查看详情
Shopify Plus 启用 Checkout.liquid
】ShopifyPlus启用Checkout.liquid【英文标题】：ShopifyPlusEnablingCheckout.liquid【发布时间】：2020-03-0422:53:39【问题描述】：我是一名开发人员，在最近更新的Shopifyplus商店中工作。问题是我无法从主题的布局中添加checkout.liquid，它应该在... 查看详情
从 UNIX shell 脚本中的列表中选择唯一或不同的值
】从UNIXshell脚本中的列表中选择唯一或不同的值【英文标题】：SelectuniqueordistinctvaluesfromalistinUNIXshellscript【发布时间】：2010-10-1117:28:56【问题描述】：我有一个ksh脚本，它返回一长串值，换行符分隔，我只想查看唯一/不同的值... 查看详情
jQuery Validation：验证从名称不同的列表中选择了至少一个复选框
】jQueryValidation：验证从名称不同的列表中选择了至少一个复选框【英文标题】：jQueryValidation:validateatleastonecheckboxisselectedfromalistwherenamesaredifferent【发布时间】：2010-12-1615:08:12【问题描述】：我需要使用jQueryValidationPlugin验证从复... 查看详情
Shopify - 从实时站点到临时站点
】Shopify-从实时站点到临时站点【英文标题】：Shopify-FromlivesitetoStagingsite【发布时间】：2021-10-1304:58:41【问题描述】：是否可以将liveshopify网站导出到临时（开发人员）网站？我有一个实时站点，我想做一些更改，但我想在开发... 查看详情
android者开发如何选择测试机列表
...硬件千差万别。差异化带来良好的用户体验的同时，也给开发者带来的适配的问题。于是每个开发团队都需要面临选择测试机列表的问题。我基于如下的考量选取测试机：系统版本芯片屏幕品牌数据来源友盟指数：友盟是国内最... 查看详情
Shopify 主题许可证
】Shopify主题许可证【英文标题】：Shopifythemelicense【发布时间】：2020-06-0307:31:50【问题描述】：我构建了一个新的Shopify主题并想在市场上销售它，但在此之前，我想确保没有购买主题许可证的情况下没有人可以使用它。我该怎么... 查看详情
无法从下拉列表中选择值
】无法从下拉列表中选择值【英文标题】：Unabletoselectthevaluefromthedroplist【发布时间】：2016-04-1404:35:51【问题描述】：我知道问题对你们来说很容易回答，但是我卡在一个下拉列表中，我想从中选择出生月份。我一直在其他网站... 查看详情
多个终端从列表中选择一个数字
】多个终端从列表中选择一个数字【英文标题】：MultipleTerminaltoselectanumberfromalist【发布时间】：2016-12-0920:33:04【问题描述】：我正在使用c#winforms-MySql服务器。我有12个值，每小时我需要从12个值列表中选择一个值。定时器可以很... 查看详情
Shopify 在选择变体时触发功能，但不会覆盖现有功能
】Shopify在选择变体时触发功能，但不会覆盖现有功能【英文标题】：Shopifytriggerfunctiononvariantselectionbutdon\'toverrideexistingfunctionality【发布时间】：2019-11-1023:20:58【问题描述】：我在Shopify上使用“阁楼”主题。当我在产品页面上选... 查看详情
列表框多值选择
】列表框多值选择【英文标题】：ListBoxmultiplevalueselection【发布时间】：2013-06-1307:31:56【问题描述】：我已经根据查询输出创建了表单。我使用了三个组合框和一个列表框。第一个组合框给我部门列表，第二个部门的选择给我该... 查看详情
根据下拉列表的选择从不同字段提交数据 - laravel
】根据下拉列表的选择从不同字段提交数据-laravel【英文标题】：Submittingdatafromdifferentfieldsdependingonselectionofdropdown-laravel【发布时间】：2019-12-3012:32:31【问题描述】：我的表单包含一个下拉菜单，可以选择是或否。如果选择是，... 查看详情
如何根据 SPARQL 中对象的主题选择不同的查询？
】如何根据SPARQL中对象的主题选择不同的查询？【英文标题】：HowtochooseadifferentquerybasedonthesubjectofanobjectinSPARQL?【发布时间】：2016-12-2114:14:57【问题描述】：假设我有以下数据subject=davidpredicate=knowsobject1=Amyobject2=Briansubject=Amypredica... 查看详情
列表中选择的项目未显示为已选择
】列表中选择的项目未显示为已选择【英文标题】：Itemsselectedinalistarenotshownasselected【发布时间】：2012-10-1510:58:33【问题描述】：现在这可能是一个难以理解的问题。我真正想要的：要从通话记录中获取不同呼叫者的填充列表，... 查看详情
如何坚持匿名用户选择（例如：主题选择）
】如何坚持匿名用户选择（例如：主题选择）【英文标题】：Howtopersistanonuserselection(ex:themeselection)【发布时间】：2012-07-2705:26:28【问题描述】：很抱歉这个模棱两可的问题，但我走了。在每个页面上都有一个显示不同主题选项的... 查看详情
从 URL 列表中选择文件路径的正则表达式
】从URL列表中选择文件路径的正则表达式【英文标题】：RegularExpressiontoselectfilepathsfromlistofURL【发布时间】：2018-11-2715:53:24【问题描述】：我有一个从随机网站中提取的不同格式的URL列表：http://www.w3.org/2000/svghttp://www.w3.org/1999/xli... 查看详情
在选择框中选择不同的值和 id
】在选择框中选择不同的值和id【英文标题】：DIstinctvaluesandid\'sonselectioninselectbox【发布时间】：2018-07-2415:14:29【问题描述】：这听起来可能有点简单，但我没有得到任何线索。我想在列中填充具有不同值的选择框，我也需要它... 查看详情