javascript - Shopify 主题开发 | 从选择列表中选择不同的产品变体时更新价格
问题描述
当从其他产品选项的选择下拉列表中选择产品的新变体时，我一直在查看想要显示更新产品价格的人的帖子。他们都没有适合我的答案。
这是我的 product.liquid 文件和 theme.js。
我认为 theme.js 中的相关片段从第 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" alt="Add to cart">
</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" alt="Add to cart">
</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 = 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>
然后，这会随着 select 的变化而改变，并且将正确的项目添加到购物车的功能仍然完好无损。
推荐阅读
- r - 将 valueBox 标题链接到不同的 tabPanel
- c# - System.Data.SqlClient.SqlException：“函数或过程 update_Faculty 的参数太多。”
- typescript - 不能对 HTMLInputElement 使用 setSelectionRange 方法
- reporting-services - 获取 power bi 切片器中选定值的值
- sql - SQL Server CTE 查询重复值
- c# - 如何根据对象的属性对添加对象的位置进行排序
- tensorflow - 在 tensorflow 或 pytorch 中临时释放 gpu
- azure - 在 DevOps 中从 ARM 模板部署逻辑应用程序时，如何创建与 Azure KeyVault 的 API 连接
- python - 使用 beautifulsoup 'NoneType' 对象进行 Webscraping 没有属性 'get_text'
- scala - scala - 比较元组或通过超过 1 个元组的键相交