The variant product does not change the price when selected

Armando_amoros · November 9, 2021, 9:02pm

Hi everyone, good afternoon.

In the variblaes products, when selecting, they do not update in price, each one having its price in the back end

I leave the codes of the templates, the product and the function code

why doesn’t the price change?

Product detail template

{% if section.settings.enable_banner %}

	

		# {{product.title}}
		{% include 'breadcrumb' %}
	

{% endif %}

  

    

      

        {% for image in product.images %}
        

          
        

        {% endfor %}

      

      
        {% for image in product.images %}
        

          
        

        {% endfor %}

      

    

    
      # {{product.title}}
      

{{ product.price | money }}
      {% if on_sale %}~~{{ product.compare_at_price | money }}~~{% endif %}
      

      {% if section.settings.show_rating%}
      

        
      

      {% endif%}
      
      {% if section.settings.enable_alltab %}
      
        {% if section.settings.enable_description_tab %}
        

          
          

            

{{product.description}}

          

        

        {% endif %}
		{% if section.settings.enable_custom_tab %}
        
        
          
          

            

{{section.settings.content_tab_2}}

            
          

        

        {% endif %}
        
        {% if section.settings.show_rating%}
        
          
          

            
{{ product.metafields.spr.reviews }}

          

        

        {% endif %}
      

      {% endif %}
      
      
        {% if section.settings.show_sku%}
        

SKU: 
          {% assign current_variant = product.selected_or_first_available_variant %}
          {{ current_variant.sku }}
        

        {% endif%}
        
        

          Categories:
          {% for collection in product.collections %}
          {{ collection.title }}, 
          {% endfor %}
        

        
        

          Share:
          
          
          
          
        

        
      

      
    

  

{% if section.settings.enable_pd_relate %}
	{% include 'nixx-pd-relate' %}
{% endif %}
{% if section.settings.enable_newsletter %}
	{% include 'nixx-newsletter' %}
{% endif %}

# Swatch

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% capture variantsswatch %} {% endcapture %}
{% if swatch == "Color" %}
	{% capture variantsswatch %}{{ 'products.variants.color' | t }}{% endcapture %}
{% elsif swatch == "Size" %}
	{% capture variantsswatch %}{{ 'products.variants.size' | t }}{% endcapture %}
{% else %}
	{% capture variantsswatch %}{{ swatch }}{% endcapture %}
{% endif %}
{% if swatch == blank %}
    
        

You must include the snippet swatch.liquid with the name of a product option.

        

Use: `{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}`

        

Example: `{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}`

    

{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% assign indexChild = 0 %}
{% for option in product.options %}
    {% if option == swatch %}
        {% assign found_option = true %}
        {% assign option_index = forloop.index0 %}
		{% assign indexChild = forloop.index %}
		
        {% assign downcased_option = swatch | downcase %}
        {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
            {% assign is_color = true %}
        {% endif %}
    {% endif %}
{% endfor %}
{% unless found_option %}

{% else %}

  

    

{{ variantsswatch }}

    {% assign values = '' %}
    {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
    {% assign values = values | join: ',' %}
    {% assign values = values | append: ',' | append: value %}
    {% assign values = values | split: ',' %}

    
      {% if is_color %}
      
{{ value }}

      {% endif %}
      
      {% if is_color %}
      
      {% else %}
      
      {% endif %}
    

    {% endunless %}
    {% if variant.available %}
    
    {% endif %}
    {% endfor %}
  

{% endunless %}
{% endif %}

Quickview

(function($) {
  function showPopup(selector) {
    $(selector).addClass('active'); 
  } window.showPopup=showPopup;

  function hidePopup(selector) {
    $(selector).removeClass('active');
  }

  function qtyProduct() {  
    $('.qtyplus').click(function(e){
      var fieldName = $(this).attr('data-field');
      var currentVal = parseInt($('input[name='+fieldName+']').val());

      if (!isNaN(currentVal)) {
        $('input[name='+fieldName+']').val(currentVal + 1);
      } else {
        $('input[name='+fieldName+']').val(1);
      }
      e.preventDefault();
    });

    $(".qtyminus").click(function(e) {

      var fieldName = $(this).attr('data-field');
      var currentVal = parseInt($('input[name='+fieldName+']').val());
      if (!isNaN(currentVal) && currentVal > 1) {
        $('input[name='+fieldName+']').val(currentVal - 1);    }
      else {
        $('input[name='+fieldName+']').val(1);
      }
      e.preventDefault();
    });
  }
  window.qtyProduct=qtyProduct;

  function doAjaxAddToCart(variant_id, quantity, title, image) {

    $.ajax({
      type: "post",
      url: "/cart/add.js",
      data: 'quantity=' + quantity + '&id=' + variant_id,
      dataType: 'json',
      beforeSend: function() {
        showPopup('.loading');
      },
      success: function(msg) {

        $('.tshopify-popup').removeClass('active');
        hidePopup('.quickview-product');
        Shopify.getCart(function(cart) {
          tbuildCart(cart);
        });
      },
      error: function(xhr, text) {
        hidePopup('.loading');
        $('.error-message').text($.parseJSON(xhr.responseText).description);
        showPopup('.error-popup');
      }
    });
  }window.doAjaxAddToCart=doAjaxAddToCart;

  function tbuildCart(cart) {
    // Start with a fresh cart div
    var $cartContainer = $('.enj-minicart-ajax');
    $cartContainer.empty();

    // Show empty cart
    if (cart.item_count === 0) {
      $cartContainer
      .append('

' + "Your cart is currently empty." + '

');
      cartCallback(cart);
      return;
    }

    // Handlebars.js cart layout
    var items = [],
        item = {},
        data = {},
        source = $("#CartTemplate").html(),
        template = Handlebars.compile(source);

    // Add each item to our handlebars.js data
    $.each(cart.items, function(index, cartItem) {

      /* Hack to get product image thumbnail
       *   - If image is not null
       *     - Remove file extension, add _small, and re-add extension
       *     - Create server relative link
       *   - A hard-coded url of no-image
      */
      if (cartItem.image != null){
        var prodImg = cartItem.image.replace(/(\.[^.]*)$/, "_small$1").replace('http:', '');
      } else {
        var prodImg = "//cdn.shopify.com/s/assets/admin/no-image-medium-cc9732cb976dd349a0df1d39816fbcc7.gif";
      }

      // Create item's data object and add to 'items' array
      item = {
        id: cartItem.variant_id,
        line: index + 1, // Shopify uses a 1+ index in the API
        url: cartItem.url,
        img: prodImg,
        name: cartItem.product_title,
        variation: cartItem.variant_title,
        properties: cartItem.properties,
        itemAdd: cartItem.quantity + 1,
        itemMinus: cartItem.quantity - 1,
        itemQty: cartItem.quantity,
        price: Shopify.formatMoney(cartItem.price, ajaxCartConfig.moneyFormat),
        vendor: cartItem.vendor
      };

      items.push(item);
    });

    // Gather all cart data and add to DOM
    data = {
      items: items,
      note: cart.note,
      totalPrice: Shopify.formatMoney(cart.total_price, ajaxCartConfig.moneyFormat)
    }

    $cartContainer.append(template(data));
    $('.enj-cartcount').html(cart.item_count);
    $('body').removeClass('drawer--is-loading');
    $('body').trigger('ajaxCart.afterCartLoad', cart);
  };

  function convertToSlug(text) {
    return text.toLowerCase().replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
  } window.convertToSlug=convertToSlug;

  $(document).ready(function() {
    quickView();

  });

  $(document).on('click',' .overlay,.continue-shopping, .close-window', function() {
    hidePopup('.tshopify-popup');
    setTimeout(function(){
      $('.loading').removeClass('loaded-content');
    },500);
    return false;
  });

  function quickView() {
    $('.engoj_btn_quickview').click(function() {

      showPopup('.loading');
      var id = $(this).data('id');
//       var rating = (($(this).closest('.product-info').find('.spr-badge').attr('data-rating')) * 20)+"%";

      Shopify.getProduct(id, function(product) {
        var template = $('#quick-view').html();
        $('.quickview-product').html(template);
        var quickview = $('.quickview-product');
        
        quickview.find('.rating').append("");
         $.getScript(window.location.protocol + "//productreviews.shopifycdn.com/assets/v4/spr.js");
        
        
        quickview.find('.product-title a').html(product.title).attr('href', product.url);
        quickview.find('.product-cate').html(product.type);
//         quickview.find('.spr-badge .spr-active').css({"width": rating});
        if (quickview.find('.product-desc').length > 0) {
          var description = product.description.replace(/(<([^>]+)>)/ig, "");
          description = description.split(" ").splice(0, 20).join(" ") + "...";
          quickview.find('.product-desc').text(description);
        } else {
          quickview.find('.product-desc').remove();
        }

        quickview.find('.price').html(Shopify.formatMoney(product.price, window.money_format));
        quickview.find('.product-inner').attr('id', 'product-' + product.id);
        quickview.find('.variants').attr('id', 'product-actions-' + product.id);
        quickview.find('.variants select').attr('id', 'product-select-' + product.id);

        if (product.compare_at_price > product.price) {
          quickview.find('.compare-price').html(Shopify.formatMoney(currencyConverter(product.compare_at_price_max), window.money_format)).show();
          quickview.find('.price').addClass('on-sale');
        } else {
          quickview.find('.compare-price').html('');
          quickview.find('.price').removeClass('on-sale');
        }

        //out of stock
        if (!product.available) {
          quickview.find("select, input, .total-price, .dec, .inc, .variants label, .quantity-all, .e-quantity").remove();
          quickview.find(".btn-addToCart").parent().addClass('no-qtt').removeClass('btn-nixx');
          quickview.find(".btn-addToCart").text('Sold Out').addClass('btn-outofstock').attr("disabled", "disabled");
        } else {
          quickview.find('.total-price span').html(Shopify.formatMoney(currencyConverter(product.price), window.money_format));

          tshopifyQuickview.createQuickViewVariantsSwatch(product, quickview);
        }

        qtyProduct();
        tshopifyQuickview.quickViewSlider(product, quickview);
        tshopifyQuickview.initQuickviewAddToCart();

        $('.quickview-product').addClass('active');
        $('.loading').addClass('loaded-content');

        if ($('.quickview-product .total-price').length > 0) {
          $('.quickview-product span[class=qtyplus]').on('click', tshopifyQuickview.updatePricingQuickview);
          $('.quickview-product span[class=qtyminus]').on('click', tshopifyQuickview.updatePricingQuickview);
        }

//         quickview.find('.owl-carousel').owlCarousel({
//           items: quickview.find('.owl-carousel').attr('data-items'),
//           dots: false
//         })
      });
      return false;
    });
  } window.quickView=quickView;

  var tshopifyQuickview = {

    selectCallbackQuickview: function(variant, selector) {
      var self = this;
      var productItem = jQuery('.quickview-product .product-item'),
          addToCart = productItem.find('.btn-addToCart'),
          productPrice = productItem.find('.price'),
          comparePrice = productItem.find('.compare-price'),
          totalPrice = productItem.find('.total-price span');

      if (variant && variant.featured_image) {
        var originalImage = jQuery(".engoj_img_main_quickview");
        var newImage = variant.featured_image;
        var element = originalImage[0];
        Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
          var $el = $(element);
          $el.attr('src', newImageSizedSrc);
        });        
      }

      if (variant) {
        if (variant.available) {
          addToCart.removeClass('disabled').removeAttr('disabled').text('translation missing: en.products.product.add_to_cart');
                                                                        } else {
                                                                        addToCart.val('sold_out').addClass('disabled').attr('disabled', 'disabled');
        }
        productPrice.html(Shopify.formatMoney(currencyConverter(variant.price), window.money_format));

        if ( variant.compare_at_price > variant.price ) {
          comparePrice.html(Shopify.formatMoney(currencyConverter(variant.compare_at_price), window.money_format)).show();
          productPrice.addClass('on-sale');
        } else {
          comparePrice.hide();
          productPrice.removeClass('on-sale');
        }

        var form = jQuery('#' + selector.domIdPrefix).closest('form');
        for (var i=0,length=variant.options.length; i

Topic		Replies	Views
Why doesn't the variant price change on my product page? Store Design third-party-themes	5	154	April 3, 2023
Price is not updating with variant selection Store Design	0	47	April 28, 2022
Product Variant Price not updating on Variant selection only after refresh - Minimal Theme Store Design shop-performance	1	59	March 21, 2022
Why are product variants not updating price on selection? Shopify Discussion shop-performance	1	60	June 9, 2022
Price varient not updaing in shop item Store Design design , collection-page , css , third-party-themes , shopify-themes , html , product-page	8	115	August 19, 2024

The variant product does not change the price when selected

Product detail template

# Swatch

Quickview

Related topics