Product Variant Price Not changing when selected

Highlighted
New Member
3 0 0

Hi Everyone

I need a bit of help.

My product prices are not changing when options are selected. Each variant has a price and should show when clicked. This worked properly before today. I don't know what went wrong or changed. 

See link https://www.dandilocks.com/collections/wigs/products/raw-cambodian-deluxe-full-lace-wig

0 Likes
Highlighted
Shopify Partner
1012 209 254

Hello,

Check your theme console there is JS conflict whenever you click any option it trigger another error.
And as I check your product page, I find product image is also missing.
To fix it try to use backup of theme or remove the custom code which you did recently.
Alternatively you have to check theme files manually and fix the issue.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
3 0 0

Thanks for the response. Yes i am aware that i dont have images, site is still being populated. I didnt make any changes to the codes recently. I can't code. This is the product.liquid. 

Please can you take a look to see what the problem may be?

<div class="mlvedaform">
{% include 'breadcrumb' %}
{% section 'product-template' %}

{%- assign current_variant = product.selected_or_first_available_variant -%}
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {%- if product.featured_image -%}
    {%- assign image_size = product.featured_image.width | append: 'x' -%}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {%- endif -%}
  "description": "{{ product.description | strip_html | escape }}",
  {%- if current_variant.sku != blank -%}
    "sku": "{{ current_variant.sku }}",
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": "{{ variant.sku }}",
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : "{{ variant.price | divided_by: 100.00 }}",
        "priceCurrency" : "{{ shop.currency }}",
        "url" : "{{ shop.url }}{{ variant.url }}"
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
  
  $(function(){
    $('.swatch :radio').change(function() {
      var optionIndex = $(this).closest('.swatch').attr('data-option-index');
      var optionValue = $(this).val();
      $(this).closest('form').find('.single-option-selector').eq(optionIndex).val(optionValue).trigger('change');
      {%- if settings.show_multiple_currencies -%}
		Currency.convertAll(shopCurrency, $('#currencies li.selected').attr('data-currency'));
      {%- endif -%}
    });
  });
  
{%- if product.variants.size > 1 -%}
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
         
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
         	
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
       productOptions.push(variant);
    {% endfor %}
{%- endif -%}

// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus
var Shopify = Shopify || {};
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex) {
    
  switch (selectorIndex) {
    case 0:
      var key = 'root';
      var selector = $('.single-option-selector:eq(0)');
      break;
    case 1:
      var key = $('.single-option-selector:eq(0)').val();
      var selector = $('.single-option-selector:eq(1)');
      break;
    case 2:
      var key = $('.single-option-selector:eq(0)').val();  
      key += ' / ' + $('.single-option-selector:eq(1)').val();
      var selector = $('.single-option-selector:eq(2)');
  }
  
  var initialValue = selector.val();
  selector.empty();
  var availableOptions = Shopify.optionsMap[key];
  for (var i=0; i<availableOptions.length; i++) {
    var option = availableOptions[i];
    var newOption = $('<option></option>').val(option).html(option);
    selector.append(newOption);
  }
  $('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
    if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
      $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
    }
    else {
      $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
    }
  });
  if (jQuery.inArray(initialValue, availableOptions) !== -1) {
    selector.val(initialValue);
  }
  selector.trigger('change');  
  
};
Shopify.linkOptionSelectors = function(product) {
  // Building our mapping object.
  for (var i=0; i<product.variants.length; i++) {
    var variant = product.variants[i];
    if (variant.available) {
      // Gathering values for the 1st drop-down.
      Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
      Shopify.optionsMap['root'].push(variant.option1);
      Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
      // Gathering values for the 2nd drop-down.
      if (product.options.length > 1) {
        var key = variant.option1;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option2);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
      // Gathering values for the 3rd drop-down.
      if (product.options.length === 3) {
        var key = variant.option1 + ' / ' + variant.option2;
        Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
        Shopify.optionsMap[key].push(variant.option3);
        Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
      }
    }
  }
  // Update options right away.
  Shopify.updateOptionsInSelector(0);
  if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
  if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
  // When there is an update in the first dropdown.
  $(".single-option-selector:eq(0)").change(function() {
    Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });
  // When there is an update in the second dropdown.
  $(".single-option-selector:eq(1)").change(function() {
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    return true;
  });
};

{% if product.available and product.options.size > 1 %}
  var $addToCartForm = $('form[action="/cart/add"]');
  if (window.MutationObserver && $addToCartForm.length) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function(){
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }
  Shopify.linkOptionSelectors({{ product | json }});
{% endif %}
{%- if product.options.size == 1 -%}
  {% for variant in product.variants %}
    {% unless variant.available %}
    $('.single-option-selector option').filter(function() { return $(this).html() === {{ variant.title | json }}; }).remove();
    $(".swatch-element.{{ variant.title | handleize }}").remove();
    {% endunless %}
  {% endfor %}
  $('.single-option-selector').trigger('change');
{%- endif -%}
  
</script>


0 Likes
Highlighted
Shopify Partner
1012 209 254

Every theme have a different code and I can't run single file and debug issue as I already mentioned it's JS conflict.
But if you are sure you didn't made any changes in theme code, install a fresh copy of theme and cross-check in it.
Alternatively contact you theme support or developer to rectify issue.

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
New Member
3 0 0

Please is there any one who can help provide a solution? 

0 Likes