Shopify主题开发|从选择列表中选择不同的产品型号时更新价格

Question

当从其他产品选项的选择下拉列表中选择产品的新变体时，我一直在寻找人们努力显示最新产品价格的帖子。

他们中的任何一个都没有提供解决方案并提供了一段代码来帮助他们解决该问题，或者该帖子在没有提供帮助的情况下被忽略了。

这是我的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 }}

这真的使我发疯，所以任何能够帮助的人，都非常感谢您！

谢谢杰森。

Answer 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>
                &nbsp;&ndash;&nbsp;
                {% if current_variant.compare_at_price > current_variant.price %}
                    <div class="variant-compare-price">RRP: {{ variant.compare_at_price | money }}&nbsp;</div>
                {% endif %}
                <div class="variant-regular-price">{% if current_variant.compare_at_price > current_variant.price %}NOW:&nbsp;{% 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>

然后，这会随着选择的变化而改变，并且向购物车中添加正确项目的功能仍然保持不变。

谢谢杰森。