Shopify Theme Development |Обновление цены при выборе другого варианта продукта из списка выбора - PullRequest
1 голос
/ 24 октября 2019

Я часами искал сообщения людей, изо всех сил пытающихся показать обновленную цену продукта, когда новый вариант продукта выбран из выпадающего списка выбора других вариантов продукта.

Ни один из нихна самом деле предоставить решение и дать блок кода, который помог им исправить это, или сообщение просто игнорируется без помощи.

Вот мой файл 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 Ответ

0 голосов
/ 24 октября 2019

ПРИМЕЧАНИЕ: это будет работать только в том случае, если правильная цена товара уже зарегистрирована, когда вы добавляете товар в корзину (например, вариант 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>

Это затем изменяется, когда выбор делает, и функциональность добавления правильного предмета в корзину остается неизменной.

Спасибо, Джейсон.

...