gistfile1.liquid

{% include 'breadcrumb' %}
<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}">
  <meta itemprop="shop-currency" content="{{ shop.currency }}">
  <section class="main-container col1-layout">
  <div class="main container">
    <div class="col-main">
      <div class="row">
         <div class="product-view">
          <div class="product-essential">
            <div class="product-img-box col-sm-4 col-xs-12 col-lg-5 wow bounceInLeft animated">
              <div class="product-image">
                {% if product.images.size == 0 %}
				   <div class="large-image">
                <img src="{{ 'http://placehold.it/750x1000' }}" alt="">
				  </div>
                {% else %}
                {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                <div class="large-image"> 
					<a href="{{ featured_image.src | img_url:'original' }}" class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20"> <img src="{{ featured_image.src | img_url:'grande' }}"> </a> 
                </div>
                {% if product.images.size > 1  %}
                <div class="flexslider flexslider-thumb">
                  <ul class="previews-list slides">
                    {% for image in product.images %}
                    <li><a href="{{ image.src | img_url:'original' }}" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '{{ image.src | img_url:'large' }}' "><img src="{{ image.src | img_url:'medium' }}" alt = "{{ image.alt | escape }}"/></a></li>
                    {% endfor %}
                  </ul>
                </div>
				  {% endif %}
                {% endif %}                
              </div>
              <div class="clear"></div>
            </div>
            <div class="product-shop col-sm-8 col-xs-12 col-lg-7 wow bounceInRight animated">
               {% if product.available %}
                <link itemprop="availability" href="http://schema.org/InStock">
                {% else %}
                <link itemprop="availability" href="http://schema.org/OutOfStock">
                {% endif %}
              <div class="product-name">
                  <h1>{{ product.name }}</h1>
              </div>
              {% if product.available %}
              <p class="availability in-stock pull-right"><span>Còn hàng</span></p>
              {% endif %}
              <div class="price-block">
                <div class="price-box">
                  {% if product.available %}
                   {% if product.compare_at_price_min > product.price_min %}
                    <p class="old-price"> <span class="price-label">Giá gốc:</span> <span class="price">{{ product.compare_at_price_max | money }}</span> </p>
                    <p class="special-price"> <span class="price-label">Giá khuyến mại</span> <span class="price">{{ product.price_min | money }}</span> </p>
                   {% else %}
                   <p class="special-price"> <span class="price-label">Giá </span> <span class="price">{{ product.price | money }}</span> </p>
                   {% endif %}
                    {% else %}
                    <p class="special-price"> <span class="price-label">Hết hàng:</span> <span class="price">Hết hàng </span> </p>
                  {% endif %}
                </div>
              </div>
              <div class="short-description">
                  {{ product.content | strip_html | truncatewords: 100 }}
              </div>
              <div class="add-to-box">
                <div class="add-to-cart">
                  <form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form">
                    {% assign variantCount = product.variants | size %}
                    {% if product.available %} 
                      {% if variantCount > 1 %} 
                      <select id="product-selectors" name="variantId" 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>
                      {% else %}
                      <input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
                      {% endif %}
                    {% endif %}
                    <label for="qty">Số lượng</label>
                    <div class="pull-left">
                      <div class="custom pull-left">
                        <input type="text" class="input-text qty" title="Qty" value="1" min="1" maxlength="12" id="qty" name="quantity">
                        <button onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button"><i class="fa fa-plus">&nbsp;</i></button>
                        <button onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="fa fa-minus">&nbsp;</i></button>
                      </div>
                    </div>
                    <div class="pull-left">
                    {% if product.available %}
                    <button class="button btn-cart add_to_cart" title="Thêm vào giỏ hàng"><span><i class="icon-basket"></i> Thêm vào giỏ hàng</span></button>
                    {% else %}
                    <button class="button btn-cart" title="Hết hàng" disabled="disabled" ><span>Hết hàng</span></button>
                    {% endif %}
					</div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="product-collateral wow bounceInUp animated">
          <div class="col-sm-12">
            <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
              <li class="active"> <a href="#product_tabs_description" data-toggle="tab">Thông tin sản phẩm </a> </li>        
              {% if settings.display_custom_tab_product %}<li> <a href="#product_tabs_custom" data-toggle="tab">{{ settings.custom_tab_product_title }}</a> </li>{% endif %}              
            </ul>
            <div id="productTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="product_tabs_description">
                <div class="std">
                  {{ product.content }}
                </div>
              </div>
				{% if settings.display_custom_tab_product %}
              <div class="tab-pane fade" id="product_tabs_custom">
                <div class="product-tabs-content-inner clearfix">
                  <p>{{ settings.custom_tab_product_content }}</p>
                </div>
              </div>
				{% endif %} 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
	</section>
</div>

{% if settings.display_other_product %}
<section class="upsell-pro">
  <div class="container">
    <div class="slider-items-products">
      <div class="new_title center">
        <h2>{{ settings.other_product_title }}</h2>
      </div>
      <div id="upsell-products-slider" class="product-flexslider hidden-buttons">
        <div class="slider-items slider-width-col4"> 
          {% for product in collections[settings.other_product].products %}
          <div class="item">
            {% include 'product-grid-item' %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}

{{ 'option-selectors.js' | bizweb_asset_url | script_tag }}

<script>  
var selectCallback = function(variant, selector) {

  var addToCart = jQuery('.btn-cart'),
      productPrice = jQuery('.special-price .price'),
	  comparePrice = jQuery('.old-price .price');
   
  if (variant) {
    if (variant.available) {
      // We have a valid product variant, so enable the submit button
      addToCart.text(' THÊM VÀO GIỎ HÀNG').removeClass('disabled').removeAttr('disabled');
		$('.product-shop .in-stock').text('Còn hàng').removeClass('out-stock');
    } else {
      // Variant is sold out, disable the submit button
      addToCart.text(' HẾT HÀNG').addClass('disabled').attr('disabled', 'disabled');
	  $('.product-shop .in-stock').text('Hết hàng').addClass('out-stock');
    }

    // Regardless of stock, update the product price
    productPrice.html(Bizweb.formatMoney(variant.price, "{{ store.money_format }}"));

    // Also update and show the product's compare price if necessary
    if ( variant.compare_at_price > variant.price ) {
      
	  comparePrice.html(Bizweb.formatMoney(variant.compare_at_price, "{{ store.money_format }}")).show();
    } else {
      comparePrice.hide();     
    }       
    
    
  } else {
    // The variant doesn't exist. Just a safeguard for errors, but disable the submit button anyway
    addToCart.text('Hết hàng').attr('disabled', 'disabled');
  }
    /*begin variant image*/
    if (variant && variant.image) {  
        var originalImage = jQuery(".large-image img"); 
        var newImage = variant.image;
        var element = originalImage[0];
        Bizweb.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
            jQuery(element).parents('a').attr('href', newImageSizedSrc);
            jQuery(element).attr('src', newImageSizedSrc);
        });
    }
    /*end of variant image*/
};
jQuery(function($) {
  {% if product.available and product.variants.size > 1 %}
    new Bizweb.OptionSelectors('product-selectors', {
      product: {{ product | json }},
      onVariantSelected: selectCallback, 
	  enableHistoryState: true
    });      

   {% endif %}
  
  // 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' %}
    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
  {% endif %}

  // Hide selectors if we only have 1 variant and its title contains 'Default'.
  {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
    $('.selector-wrapper').hide();
  {% endif %} 
  $('.selector-wrapper').css({
	  'text-align':'left',
	  'margin-bottom':'15px'
  });
});
</script>