The price is not changing automatically when I select different variants

Solved
Highlighted
Tourist
10 0 0

hello all
The price is not changing automatically when I select different variants color and size in product page,
but image changing successfully

 

Here my product for test it
https://www.redsekor.com/products/portable-juice-blender-400ml-usb-cup-multi-function-fruit?variant=...

 

the full code of product-template.liquid :
https://justpaste.it/4j54j

 

my problem is exactlly like that
https://community.shopify.com/c/Shopify-Design/variant-price-not-updating-on-shopify/td-p/327359

0 Likes
Tourist
10 0 0

 

This is the product-template.liquid

The Full Code you can find it here : https://pastebin.com/RJ1xPwsJ

 

{{ 'jquery.elevateZoom.min.js' | asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}

{%- assign thumbnai_position = "none" -%}
{%- assign product_reviews = section.settings.display_product_reviews -%}
{%- assign product_vendor = section.settings.show_vendor -%}
{%- assign product_type = section.settings.show_product_type -%}
{%- assign product_ccountdown = section.settings.show_product_countdown -%}
{%- assign product_colorswatch = section.settings.use_color_swatch -%}
{%- assign product_subtotal = section.settings.show_price_subtotal -%}
{%- assign product_quantity = section.settings.show_quantity_selector -%}
{%- assign product_share = section.settings.show_share_buttons -%}
{%- assign product_tags = section.settings.show_tag -%}
{%- assign product_brand = section.settings.show_brand -%}
{%- assign product_category = section.settings.show_category -%}
{%- assign pt_item = section.settings.pt_item -%}

{% assign pp_grid = settings.pp_grid %}
{% case pp_grid %}
          <div class="slider-nav{% if section.settings.pt_position == 'bottom' %} horizontal{% else %} vertical{% endif %}" id="gallery_01">
            {% for image in product.images %}
            <div class="item">
              <a class ="thumb" href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'original' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
                <img src="{{ image.src | product_img_url: '100x100' }}" alt="{{ image.alt | escape }}">
              </a>
            </div>
            {% endfor %}
          </div> 
        </div>
      </div>
      <div class="{{ g_col_right }} product-single__detail grid__item {{ product_description_width }}">
        <div class="product-single__meta">
          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
          {% if product_reviews %}       
          <div class="custom-reviews a-left hidden-xs">          
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>          
          </div>
          {% endif %}
		  <div class="clearfix" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          </div>
          <div class="clearfix product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
            <p class="price-box product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
              {% if current_variant.compare_at_price > current_variant.price %}
              <span class="special-price product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                <span id="ProductPrice-{{ section.id }}"
                      itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                  {{ current_variant.price | money }}
                </span>
              </span>
              <s class="old-price" id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
              {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <span class="product-price__price product-price__price-{{ section.id }} price">
                <span id="ProductPrice-{{ section.id }}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                  {{ current_variant.price | money }}
                </span>
              </span>
              <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>

              {% endif %}
            </p>
          </div>
          <div class="product-info">
            {% if product.available %}
            <p class="product-single__alb instock"><label>{{ 'products.product.availability' | t }}</label>: <i class="fa fa-check"></i> {{'products.product.available' | t }}</p>
            {% else %}
            <p class="product-single__alb outstock"><label>{{ 'products.product.availability' | t }}</label>: {{'products.product.unavailable' | t }}</p>
            {% endif %}
            {% if product_type %}
            <p class="product-single__type"><label>{{ 'products.product.type' | t }}</label>: {{ product.type }}</p>
            {% endif %}
            {% if product_vendor %}
            <p itemprop="brand" class="product-single__vendor"><label>{{ 'products.product.vendor' | t }}</label>: {{ product.vendor | link_to_vendor }}</p>
            {% endif %}
            
          </div>

          {% if section.settings.show_desc == 'short' %}
          {% if product.description != blank %}
          {% assign content = product.description %} 
          {% if content contains "[shortcode]" %}           
          {% assign str = content | split: "[/shortcode]" | first %}                    
          {% assign str = str | split: "[shortcode]" | last %}
          {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
          {% assign content = content | remove: str %}
          {% endif %}                
          <div class="rte product-description short">
            <label  class="d-none">{{ 'products.product.overview' | t }}</label>
            {{ content | strip_html | truncatewords: 22}}
          </div>
          {% endif %}

          {% elsif section.settings.show_desc == 'full' %}
          {% if product.description != blank %}
          {% assign content = product.description %} 
          {% if content contains "[shortcode]" %}           
          {% assign str = content | split: "[/shortcode]" | first %}                    
          {% assign str = str | split: "[shortcode]" | last %}
          {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
          {% assign content = content | remove: str %}
          {% endif %}                
          <div class="rte product-description full">
            <label  class="d-none">{{ 'products.product.overview' | t }}</label>
            {{ content }}
          </div>
          {% endif %}
          {% endif %}


          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
            <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
              <div id="product-variants">
                {% assign variantCount = product.variants | size %}
                {% if product.available %}
                {% if variantCount > 1 %}
                <div class="{% if section.settings.use_color_swatch %}d-none{% else %}row no-swatch{% endif%}">
                  <select id="product-selectors" name="id" class="hidden box-sellect" style="display:none">
                    {% for variant in product.variants %}
                    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                    {% endfor %}
                  </select>
                </div>
                {% if product_colorswatch %}
                {% for option in product.options %}
                {% include 'swatch' with option %}
                {% endfor %}
                {% endif %}
                {% else %}
                <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
                {% endif %}
                {% endif %}

              </div>
              {% if product_subtotal %}
              <div class="total-price">
                <label>{{ 'cart.general.subtotal' | t }}: </label><span class="money">{{ product.price | money }}</span>
              </div>
              {% endif %}
              <div class="product-options-bottom">
                {% if product_quantity %}
                <div class="product-form__item product-form__item--quantity">
                  <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}:</label> 
                  <div class="form_qty">

                    <div class="reduced items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 1 ) result.value--; updatePricing(); return false;">
                      <i class="fa fa-minus"></i>
                    </div>
                    <input type="text" id="qty" name="quantity" value="1" min="1" class="quantity-selector"> 
                    <div class="increase items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++; updatePricing(); return false;">
                      <i class="fa fa-plus"></i>
                    </div>

                  </div>
                </div>
                {% endif %}

                <div class="product-form__item product-form__item--submit">
                  <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                    <span id="AddToCartText-{{ section.id }}">
                      {% unless current_variant.available %}
                      <i class="fa fa-shopping-basket"></i>
                      {{ 'products.product.sold_out' | t }}
                      {% else %}
                      <i class="fa fa-shopping-basket"></i>
                      {{ 'products.product.add_to_cart' | t }}
                      {% endunless %}
                    </span>
                  </button>
                </div>
              </div>
            </form>
            {% include 'product-wishlist' %}
          </div>
          <div class="product-wrap">
            {% if product_share %}
            <div class="wrap__social social_share_detail clearfix">
              <label class="">{{ 'general.social.share' | t }}:</label>
              <ul>
                <div class="addthis_inline_share_toolbox"></div>      
                <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-529be2200cc72db5"></script> 
              </ul>
            </div>
     <div class="tab-hozizoltal">
        <ul class="nav nav-tabs font-ct">
          {% if section.settings.product_tab1_enable %}
          <li class="nav-item"><a class="nav-link active" href="#tabs1" data-toggle="tab">{{ section.settings.product_tab1_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs2" data-toggle="tab">{{ section.settings.product_tab2_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs3" data-toggle="tab">{{ section.settings.product_tab3_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs4" data-toggle="tab">{{ section.settings.product_tab4_title }}</a></li>
          {% endif %}
        </ul>
        <div class="tab-content">
          {% if section.settings.product_tab1_enable %}
          <div class="tab-pane active" id="tabs1">
            {% if product.description != blank %}
            {% assign content = product.description %} 
            {% if content contains "[shortcode]" %}           
            {% assign str = content | split: "[/shortcode]" | first %}                    
            {% assign str = str | split: "[shortcode]" | last %}
            {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
            {% assign content = content | remove: str %}
            {% endif %}                
            <div class="rte description">
              <label  class="d-none">{{ 'products.product.overview' | t }}</label>
              {{ content }}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <div class="tab-pane" id="tabs2">{{ section.settings.product_tab2_content }}</div>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <div class="tab-pane" id="tabs3">
            {% if section.settings.custom_size_chart != blank %}
            <img src="{{ section.settings.custom_size_chart | img_url: "master" }}" alt="{{ section.settings.custom_size_chart_title }}" />
            {% else %}
            <div class="placeholder-bg">
              {% include 'placeholder-svg' %}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <div class="tab-pane" id="tabs4">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
          {% endif %}
          
        </div>

 

 

0 Likes
Trailblazer
237 27 29

 I checked your code, I think the line

 

jQuery('.product .total-price span.money').html(totalPriceHtml);

 

needs to be replaced with this one

 

jQuery('.product-single .total-price span.money').html(totalPriceHtml);

 

replace and check, clear cache as well

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Trailblazer
237 27 29

I believe that .product needs to be replaced with .product-single in each jquery line, which are 6-7 

 

please do it and then check

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Tourist
10 0 0

Thank you suyash for check it
i tried it now but no result

0 Likes
Trailblazer
237 27 29
change every line, there are 6-7 of them
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Tourist
10 0 0

yes, replaced all .product jquery line with .product-single
that is final code https://pastebin.com/xMjUQZQU

still same problem

0 Likes
Trailblazer
237 27 29

its not working, must be something different then

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Tourist
10 0 0

that's swatch.liquid file https://pastebin.com/CsvjiNxd
maybe have Something is missing

0 Likes
Trailblazer
237 27 29
I did not see any swatch code in source, so will be product file only
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes