product-buyx.liquid

<!-- /templates/product.liquid -->
{% include 'buyx-product' with product %}
{% include 'buyx-price-min' with product %} 


<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% assign current_variant = product.selected_or_first_available_variant %}
  {% if current_variant.title contains '% Off' %} 
    {% assign current_variant = product.variants[0] %}
  {% endif %}
  {% for varianti in product.variants %}
	{% unless varianti.title contains '% Off' %}
	  {% if varianti.available %} 
		{% assign variant = varianti %}
	  {% endif %}
	{% endunless %}
  {% endfor %}


  <div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
      <div class="product-single__photos">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% comment %}
          Display current variant image, or default first
        {% endcomment %}
        <div class="product-single__photo-wrapper">
          <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
        </div>

        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}
        {% for image in product.images %}
          {% unless image contains featured_image %}
            <div class="product-single__photo-wrapper">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
          {% endunless %}
        {% endfor %}
      </div>
    </div>

    <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
      <div class="product-single__meta">
        {% if settings.product_vendor_enable %}
          <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
        {% endif %}

        <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          {% comment %}
            Optionally show the 'compare at' or original price of the product.
          {% endcomment %}

          {% if product.compare_at_price > buyx_price_min %}
            <span class="product-single__price--wrapper">
              <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <span id="ComparePrice" class="product-single__price--compare-at">
                {{ product.compare_at_price | money }}
              </span>
              <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            </span>
          {% endif %}

          <span id="ProductPrice" class="product-single__price{% if product.compare_at_price > buyx_price_min %} on-sale{% endif %}" itemprop="price">
            {{ current_variant.price | money }}
          </span>

          <hr class="hr--small">

          <meta itemprop="priceCurrency" content="{{ shop.currency }}">
          <link itemprop="availability" href="http://schema.org/{% if buyx_product_available %}InStock{% else %}OutOfStock{% endif %}">

        {% if buyx_product_available %}
          <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
		{% endif %}

            <select name="id" id="ProductSelect" class="product-single__variants">
              {% for variant in product.variants %}
                {% unless variant.title contains '% Off' %}
                  {% 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 %}
                  {% endif %}
			    {% endunless %}
              {% endfor %}
            </select>

            {% comment %}
            <div class="product-single__quantity">
              <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
              <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
            </div>
            {% endcomment %}

            <div class="product-single__add-to-cart">
              <button onclick="goog_report_conversion()" type="submit" name="add" id="AddToCart" class="btn">
                <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
            </div>
       {% if buyx_product_available %}
          </form>
       {% endif %}

        </div>

        <div class="product-single__description rte" itemprop="description">
          {{ product.description }}
        </div>
        
        <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

        {% if settings.social_sharing_products %}
          {% include 'social-sharing' %}
        {% endif %}
      </div>
      </div>
  </div>

  {% if collection %}
    <hr class="hr--clear">
    <div class="text-center">
      <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
    </div>
  {% endif %}

</div>

{% comment %}

  *IMPORTANT:*
  This theme uses a customized version of `option_selection.js` to support using radio inputs for
  color and size variants. The custom version is in `variant_selection.js`.

  If you wish to enable the default dropdowns for size and color
  you can change the liquid asset tag below from:

  {{ 'variant_selection.js' | asset_url | script_tag }}

  to

  {{ 'option_selection.js' | shopify_asset_url | script_tag }}

  If you use the default `option_selection.js` the labels for the dropdowns will
  appear outside the dropdown.

  You will also need to change `.radio-wrapper` to `.selector-wrapper` below.

{% endcomment %}

<!-- include it again, as variables were changed by related products -->
{% include 'buyx-price-min' with product %} 

{{ 'variant_selection.js' | asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

  jQuery(function($) {
    
    
 
function buyx_product_json(product) {
     if (product == null) {
          return null
     }
     var variants = []
     //does it have BuyXDiscount option?
     var option_position = -1
     for (var oi = 0, olen = product.options.length; oi < olen; oi++) {
         if (product.options[oi] == "BuyXDiscount") {
             option_position = oi+1
             break
         }
     }
     if (option_position == -1) {
         return product
     }
     if (product.options.length > 1) {
          product.options.splice(option_position-1, 1)
     } else {
          product.options[0] = "Title"
     }
     option_position = "option" + option_position
     product.available = false
     for (var vi = 0, vlen = product.variants.length; vi < vlen; vi++) {
         if (product.variants[vi][option_position] == "Default") {
             //product.variants[vi][option_position] = ""
             variants.push(product.variants[vi])
             product.available = product.available || product.variants[vi].available
         }
     }
     product.variants = variants
     return product
  }

    
    new Shopify.OptionSelectors('ProductSelect', {
      product: buyx_product_json({{ product | json }}),
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' and product.options.first != 'BuyXDiscount' %}
      $('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
    {% if buyx_product_variants_size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

<!-- Google Code for Add to cart Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 937725195;
    w.google_conversion_label = "xcIzCMfo4WEQi5qSvwM";
    w.google_conversion_value = 50.00;
    w.google_conversion_currency = "USD";
    w.google_remarketing_only = false;
  }
  // DO NOT CHANGE THE CODE BELOW.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    window.google_is_call = true;
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
}
/* ]]> */
</script>
<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>