Shopify Theme Development | Updating price when different product variant is chosen from select list

user_10134447 0
Viewed 3633

I have been looking through posts of people wanting to show an updated product price, when a new variant of the product is selected from a select drop down list of other product options. None of them have answers that work in my case.

Here is my product.liquid file and theme.js.

I think the relevant snippet within the theme.js begins at line 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 }}

How can I proceed?

shopify-template shopify liquid javascript
1 Answers

Note: this will only work if the correct price for the item is logged already when you add the item to cart (eg. variant 1 = £5, variant 2 = £10, if you change the select to variant 2, once selected if it is not displaying its price correctly on the product page but then when you hit add to cart, the variant 2 item is added to the cart).

I decided to go down a different route to the one I'd planned when I asked the question.

When creating the select dropdown, I have created data-attributes and gifted them the prices of each line item.

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

I then use pretty basic jQuery to change the values:

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

This then changes as the select does and the functionality of adding the correct item to cart is still intact.

user_101344470
Related