Shopify 主題開發 | 從 select 列表中選擇不同產品變體時更新價格

Question

當從 select 其他產品選項的下拉列表中選擇產品的新變體時，我一直在查看想要顯示更新產品價格的人的帖子。 他們都沒有適合我的答案。

這是我的 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 英鎊，如果您將 select 更改為變體 2，一旦選擇，如果它沒有在產品頁面上正確顯示其價格，但是當您點擊添加到購物車時，變體 2 商品被添加到購物車中）。

當我問這個問題時，我決定走一條與我計划的路線不同的路線。

在創建 select 下拉列表時，我創建了數據屬性並為它們提供了每個行項目的價格。

<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>

然后，這會隨着 select 的變化而改變，並且將正確的商品添加到購物車的功能仍然完好無損。