The variant product does not change the price when selected

[Armando_amoros]

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?

https://moom.cl/products/m-beauty-case

Product detail template

{% if section.settings.enable_banner %}
<div class="banner margin_bottom_150 {% if section.settings.enable_line_top %}border-top{% endif %} {% if section.settings.enable_line_bot %}border-bot{% endif %}" style="background:{{section.settings.bgc_banner}};">
	<div class="container">
		<h1 class="title-font title-banner banner-product-detail text-center">{{product.title}}</h1>
		{% include 'breadcrumb' %}
	</div>
</div>
{% endif %}
<div class="container product-detail margin_bottom_150">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 margin_bottom_50">
      <div class="slick-product-detail margin_bottom_20">
        {% for image in product.images %}
        <div>
          <img src="{{ image.src | img_url: 'master' }}" class="img-responsive full-width engoj_img_main" alt="{{ image.alt | escape }}">
        </div>
        {% endfor %}

      </div>
      <div class="slick-nav-product-detail">
        {% for image in product.images %}
        <div class="engoj_img_variant">
          <img src="{{ image.src | img_url: 'master' }}" class="img-responsive" alt="{{ image.alt | escape }}">
        </div>
        {% endfor %}

      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 info-product-detail">
      <h1 class="title-font title-product margin_bottom_30">{{product.title}}</h1>
      <p class="number-font price margin_bottom_40 price-product engoj_price_main">{{ product.price | money }}
      {% if on_sale %}<s class="price-old">{{ product.compare_at_price | money }}</s>{% endif %}
      </p>
      {% if section.settings.show_rating%}
      <p class="product-preview margin_bottom_50 product-rating">
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}" style="color:#ee9051;"></span>
      </p>
      {% 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 class="margin_bottom_30">
        <select name="id" id="productSelect" class="engoj-except-select2 product-single__variants">
          {% for variant in product.variants %}
          {% if variant.available %}
          {% assign sku = variant.sku %}
          <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>
        {% if product.available and product.variants.size > 1 %}
        {% for option in product.options %}
        {% include 'swatch' with option %}
        {% endfor %}
        {% endif %}
      </div>
      <div class="flex margin_bottom_50 border-bot space_bot_50 btn-function">
        {% unless current_variant.available %}
        
        {% if section.settings.show_quantity %}
        <div>
          <div class="relative input-number-custom">
            
            <input type="number" min="1" value="1"  name="quantity" id="Quantity" pattern="[0-9]*">
            
          </div>
        </div>
        {% endif %}
        {% endunless %}
        
        <button type="submit" name="add" id="AddToCart" class="enj-add-to-cart-btn menu-font uppercase{% unless current_variant.available %} btn-outofstock{% endunless %}{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}" style="margin-right:20px;" {% unless current_variant.available %}disabled="disabled"{% endunless %}>
          <span id="AddToCartText-{{ section.id }}">
            {% unless current_variant.available %}
            {{ 'products.product.sold_out' | t }}
            {% else %}
            {{ 'products.product.addtocart' | t }}
            {% endunless %}
          </span>
        </button>
       
        {% include 'nixx-add-wishlist' %}
      </div>
      </form>
      {% if section.settings.enable_alltab %}
      <div class="inline-block border-bot">
        {% if section.settings.enable_description_tab %}
        <div class="inline-block margin_bottom_50">
          <button class="accordion menu-font btn-tab">{{section.settings.destab_title}}</button>
          <div class="panel">
            <p class="des-font des-tab"><br><br>{{product.description}}<br><br></p>
          </div>
        </div>
        {% endif %}
		{% if section.settings.enable_custom_tab %}
        <!--  -->
        <div class="inline-block margin_bottom_50">
          <button class="accordion menu-font btn-tab">{{section.settings.title_tab_2}}</button>
          <div class="panel">
            <p class="des-font des-tab"><br><br>{{section.settings.content_tab_2}}<br><br></p>
            
          </div>
        </div>
        {% endif %}
        <!--  -->
        {% if section.settings.show_rating%}
        <div class="margin_bottom_50">
          <button class="accordion menu-font btn-tab">{{section.settings.title_review_tab}} (0)</button>
          <div class="panel" id="review-tag">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
        {% endif %}
      </div>
      {% endif %}
      
      <div class="info-more">
        {% if section.settings.show_sku%}
        <p class="des-font margin_bottom_30 margin_top_50"><span class="menu-font">SKU: </span>
          {% assign current_variant = product.selected_or_first_available_variant %}
          {{ current_variant.sku }}
        </p>
        {% endif%}
        
        <p class="margin_bottom_30">
          <span class="menu-font margin_right_10">Categories:</span>
          {% for collection in product.collections %}
          <a href="{{ collection.url }}" class="delay03 margin_right_10">{{ collection.title }}, </a>
          {% endfor %}
        </p>
        
        <p class="margin_bottom_30">
          <span class="menu-font margin_right_30">Share:</span>
          <a href="#" class="delay03 margin_right_30"><i class="ti-facebook"></i></a>
          <a href="#" class="delay03 margin_right_30"><i class="ti-twitter-alt"></i></a>
          <a href="#" class="delay03 margin_right_30"><i class="ti-pinterest"></i></a>
          <a href="#" class="delay03 margin_right_30"><i class="ti-linkedin"></i></a>
        </p>
        
      </div>
      
    </div>
  </div>
</div>
{% 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 %}
    <div class="swatch error">
        <p>You must include the snippet swatch.liquid with the name of a product option.</p>
        <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
        <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
    </div>
{% 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 %}
		<style rel="stylesheet" type="text/css">
          .proVariants .selector-wrapper:nth-child({{ indexChild }}){display: none;}
          .maxus-productdetail__options:not(:last-child) {
            margin-right: 20px;
          }
        </style>
        {% 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 %}
<div class="maxus-productdetail__options{% unless section.settings.spd_style == "pd_style2" %} {% endunless %}">
  <div class="swatch clearfix {% if settings.po_style == "po_swatchs" %} align-center flex{% endif %}" data-option-index="{{ option_index }}">
    <p class="text-uppercase number-font">{{ variantsswatch }}</p>
    {% 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: ',' %}

    <div data-value="{{ value | escape }}"  data-style="square" class="maxus-color none swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}" {% if variant.available %}{% else %}data-toggle="tooltip" data-placement="top"  data-original-title="Sold Out"{% endif %}>
      {% if is_color %}
      <div class="tooltip">{{ value }}</div>
      {% endif %}
      <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
      {% if is_color %}
      <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | file_url }})">
        <div class="crossed-out"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 15.642 15.642" enable-background="new 0 0 15.642 15.642" width="25px" height="25px"><path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill="#000000"/></svg></div>
      </label>
      {% else %}
      <label for="swatch-{{ option_index }}-{{ value | handle }}" style="font-weight: 400;" class="number-font">
        {{ value }}
        <div class="crossed-out"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 15.642 15.642" enable-background="new 0 0 15.642 15.642" width="25px" height="25px"><path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill="#000000"/></svg></div>
      </label>
      {% endif %}
    </div>

    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% 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('<p>' + "Your cart is currently empty." + '</p>');
      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("<span class=\"shopify-product-reviews-badge\" data-id=\""+product.id+"\"></span>");
         $.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<length; i++) {
          var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
          if (radioButton.size()) {
            radioButton.get(0).checked = true;
          }
        }


        var inventoryInfo = productItem.find('.product-inventory span');
        if (variant.available) {
          if (variant.inventory_management!=null) {
            inventoryInfo.text(variant.inventory_quantity + " " + 'in_stock');
          } else {
            inventoryInfo.text('many_in_stock');
          }
        } else {
          inventoryInfo.text('out_of_stock');
        }

        // Total:
        var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
        var unitPriceTextMatch = $('.quickview-product .price').text().match(regex);

        if (!unitPriceTextMatch) {
          regex = /([0-9]+[.|,][0-9]+)/g;
          unitPriceTextMatch = $('.quickview-product .price').text().match(regex);
        }

        if (unitPriceTextMatch) {
          var unitPriceText = unitPriceTextMatch[0];
          var unitPrice = unitPriceText.replace(/[.|,]/g, '');
          var quantity = parseInt($('.quickview-product input[name=quantity]').val());
          var totalPrice = unitPrice * quantity;
          totalPrice = currencyConverter(totalPrice);

          var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
          regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
          if (!totalPriceText.match(regex)) {
            regex = /([0-9]+[.|,][0-9]+)/g;
          }
          totalPriceText = totalPriceText.match(regex)[0];

          var regInput = new RegExp(unitPriceText, "g");
          var totalPriceHtml = $('.quickview-product .price').html().replace(regInput, totalPriceText);

          $('.quickview-product .total-price span').html(totalPriceHtml);
        }

        if (variant && variant.featured_image) {
          var newImage = Shopify.resizeImage(variant.featured_image.src, 'small');
          newImage = newImage.replace(/https?:/,'');
          jQuery('.quick-view .quickview-more-views img').each(function() {
            var grandSize = jQuery(this).attr('src');
            if (grandSize == newImage) {
              jQuery(this).parent().trigger('click');
              return false;
            }
          });
        }

      } else {
        addToCart.text('unavailable').addClass('dåisabled').attr('disabled', 'disabled');
      }

      Currency.convertAll(shopCurrency, jQuery('#currencies a.selected').attr('data-currency'));
      jQuery('.selected-currency').text(Currency.currentCurrency);

    },
    /* Quick View SWATCH */
    createQuickViewVariantsSwatch: function(product, quickviewTemplate) {
      var self = this;
      if (product.variants.length > 1) {
        for (var i = 0; i < product.variants.length; i++) {
          var variant = product.variants[i];
          var option = '<option value="' + variant.id + '">' + variant.title + '</option>';
          quickviewTemplate.find('form.variants > select').append(option);
        }

        new Shopify.OptionSelectors("product-select-" + product.id, {
          product: product,
          onVariantSelected: self.selectCallbackQuickview,
          enableHistoryState: true
        });

        var filePath = window.file_url.substring(0, window.file_url.lastIndexOf('?'));
        var assetUrl = window.asset_url.substring(0, window.asset_url.lastIndexOf('?'));
        var options = "";

        for (var i = 0; i < product.options.length; i++) {
          options += '<div class="swatch flex align-center clearfix" data-option-index="' + i + '">';
          options += '<div class="header des-font">' + product.options[i].name + '</div>';
          var is_color = false;
          if (/Color|Colour/i.test(product.options[i].name)) {
            is_color = true;
          }
          var optionValues = new Array();
          for (var j = 0; j < product.variants.length; j++) {
            var variant = product.variants[j];
            var value = variant.options[i];
            var valueHandle = convertToSlug(value);
            var forText = 'swatch-' + i + '_' + valueHandle;
            if (optionValues.indexOf(value) < 0) {
              //not yet inserted
              options += '<div data-value="' + value + '" class="swatch-element ' + (is_color ? "color" : "") + valueHandle + (variant.available ? ' available ' : ' soldout ') + '">';

              if (is_color) {
                options += '<div class="tooltip">' + value + '</div>';
              }
              options += '<input id="' + forText + '" type="radio" name="option-' + i + '" value="' + value + '" ' + (j == 0 ? ' checked ' : '') + (variant.available ? '' : ' disabled') + ' />';

              if (is_color) {
                options += '<label for="' + forText + '" style="background-color: ' + valueHandle + ';"></label>';
              } else {
                options += '<label for="' + forText + '" class="number-font"  style="margin-top: 5px;">' + value + '</label>';
              }
              options += '</div>';
              if (variant.available) {
                $('.quickview-product .swatch[data-option-index="' + i + '"] .' + valueHandle).removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
              }
              optionValues.push(value);
            }
          }
          options += '</div>';
        }
        quickviewTemplate.find('form.variants > select').after(options);
        quickviewTemplate.find('.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 (product.available && product.options.size > 1) {
          Shopify.optionsMap = {};
          Shopify.linkOptionSelectors(product);
        }

      } else {
        quickviewTemplate.find('form.variants > select').remove();
        var variant_field = '<input type="hidden" name="id" value="' + product.variants[0].id + '">';
        quickviewTemplate.find('form.variants').append(variant_field);
      }
    },

    /* Quick View */
    createQuickViewVariants: function(product, quickviewTemplate) {
      var self = this;
      if (product.variants.length > 1) {
        for (var i = 0; i < product.variants.length; i++) {
          var variant = product.variants[i];
          var option = '<option value="' + variant.id + '">' + variant.title + '</option>';
          quickviewTemplate.find('form.variants > select').append(option);
        }

        new Shopify.OptionSelectors("product-select-" + product.id, {
          product: product,
          onVariantSelected: self.selectCallbackQuickview,
          enableHistoryState: true
        });

        //$('.quickview-product .single-option-selector').selectize();
        $('.quickview-product .selectize-input input').attr("disabled", "disabled");

        if (product.options.length == 1) {
          $('.selector-wrapper:eq(0)').prepend('<label>' + product.options[0].name + '</label>');
        }

        quickviewTemplate.find('form.variants .selector-wrapper label').each(function(i, v) {
          $(this).html(product.options[i].name);
        });
		
      } else {
        quickviewTemplate.find('form.variants > select').remove();
        var variant_field = '<input type="hidden" name="id" value="' + product.variants[0].id + '">';
        quickviewTemplate.find('form.variants').append(variant_field);
        
      }

    },

    /* Quick View VIEWMORE Slider */
    quickViewSlider: function(product, quickviewTemplate) {
      var featuredImage = Shopify.resizeImage(product.featured_image, 'grande');
      quickviewTemplate.find('.js-quickview-slide').append('<a title="'+ product.title +'" class="product-photo" href="' + product.url + '"><img class="engoj_img_main_quickview" src="' + featuredImage + '" alt="' + product.title + '"/><span class="loading" style="height: 100%; width: 100%; top:0; left:0 z-index: 999; position: absolute; display: none; background: url(' + window.loading_url + ') center no-repeat;"></span></a>');


      $('.js-quickview-slide').not('.slick-initialized').slick({
        autoplay: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        arrows: true,
        prevArrow: '<span class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></span>',
        nextArrow: '<span class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></span>',
        dots: false
      });
      $('.js-quickview-slide').on( 'dragstart', 'img', function() { return false; } );

      if (product.images.length > 2) {


        var quickViewCarousel = quickviewTemplate.find('.js-quickview-slide');

        for (i in product.images) {
          var grande = Shopify.resizeImage(product.images[i], 'grande');
          var compact = Shopify.resizeImage(product.images[i], 'compact');
          var item = '<div class="item"><a href="javascript&colon;void(0)" data-image="' + grande + '"><img src="' + compact + '"  /></a></div>';
          quickViewCarousel.not('.slick-initialized').slick('slickAdd', (item));
        }

        quickViewCarousel.find('a').click(function() {
          var featureImage = quickviewTemplate.find('.featured-image img');
          var moreviewLoad = quickviewTemplate.find('.featured-image .loading');
          if (featureImage.attr('src') != $(this).attr('data-image')) {
            featureImage.attr('src', $(this).attr('data-image'));
            moreviewLoad.show();
            featureImage.load(function(e) {
              moreviewLoad.hide();
              $(this).unbind('load');
              moreviewLoad.hide();
            });
          }
        });

      } else {
        quickviewTemplate.find('.more-views').remove();

      }
      $(document).on('click','.continue-shopping .close-window .btn-addToCart', function() {
        if ($(".js-quickview-slide").length) {
          $(".js-quickview-slide").slick('unslick');
        }
      });
    },

    /* Quick View ADD TO CART */
    initQuickviewAddToCart: function() {
      if ($('.quickview-product .btn-addToCart').length > 0) {
        $('.quickview-product .btn-addToCart').click(function() {
          var variant_id = $('.quickview-product select[name=id]').val();
          if (!variant_id) {
            variant_id = $('.quickview-product input[name=id]').val();
          }
          var quantity = $('.quickview-product input[name=quantity]').val();
          if (!quantity) {
            quantity = 1;
          }

          var title = $('.quickview-product .product-title a').html();
          var image = $('.quickview-product .featured-image img').attr('src');

          doAjaxAddToCart(variant_id, quantity, title, image);

        });
      }
    },
    /* Quick View update Pricing */
    updatePricingQuickview: function() {
      var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
      var unitPriceTextMatch = $('.quickview-product .price').text().match(regex);

      if (!unitPriceTextMatch) {
        regex = /([0-9]+[.|,][0-9]+)/g;
        unitPriceTextMatch = $('.quickview-product .price').text().match(regex);
      }

      if (unitPriceTextMatch) {
        var unitPriceText = unitPriceTextMatch[0];
        var unitPrice = unitPriceText.replace(/[.|,]/g, '');
        var quantity = parseInt($('.quickview-product input[name=quantity]').val());
        var totalPrice = unitPrice * quantity;

        var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
        regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
        if (!totalPriceText.match(regex)) {
          regex = /([0-9]+[.|,][0-9]+)/g;
        }
        totalPriceText = totalPriceText.match(regex)[0];

        var regInput = new RegExp(unitPriceText, "g");
        var totalPriceHtml = $('.quickview-product .price').html().replace(regInput, totalPriceText);

        $('.quickview-product .total-price span').html(totalPriceHtml);
      }
    }

  }
  })(jQuery);