<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' }}">
<div class="product-single">
<div class="grid product-single__hero">
<div class="grid__item large--one-half">
<div class="row ptxx-carousel pbxxx-carousel bg-blue" id="ProductPhoto">
<div class="col-sm-8 col-sm-offset-2 col-xs-12 prn wow fadeInDown">
<div class="img-row">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<div class="img-3" style="background-image:url({{ featured_image | img_url: '2000x2000' }})" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" data-image-id="{{ featured_image.id }}">
</div>
<div class="img-col">
<div class="img-1" style="background-image:url({{ product.images.last | img_url: '2000x2000' }})" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" data-image-id="{{ featured_image.id }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="purchase" class="row ptxx pbxxx bg-gray">
<div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
<h1 class="wow fadeInDown pbm">
{{ product.description }}
</h1>
<div class="row wow fadeInDown">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
{% if product.variants.size > 1 %}
<!-- FOR PIN SETS WITH OPTIONS! -->
<div class="col-md-5 col-sm-5 col-sm-offset-0 col-xs-12 prn">
<h6 class="tc-orange pbs">Select set or individual</h6>
{% for variant in product.variants %}
{% if variant.available %}
<div class="radiofun">
<input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} />
<label for="radio_{{variant.id}}">{{ variant.title }} — ${{ variant.price | money_without_currency | remove: '.00' }}</label>
</div>
{% endif %}
{% endfor %}
</div>
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12 prn">
<div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %} input-group" style="display: block;">
<h6 class="tc-orange">{{ 'products.product.quantity' | t }}</h6>
<div class="input-group pts">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant[1]">–</button>
</span>
<input type="text" id="Quantity" name="quantity" value="1" min="1" max="100" class="quantity-selector form-control input-number"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button>
</span>
</div>
</div>
<p class="tc-gray ptxss text-center p-small">Save on shipping with more pins!</p>
<div class="checkout-01">
<button type="submit" name="add" id="AddToCart" class="btn-purchase bg-teal tc-white">
<h6 class="tc-white">{{ 'products.product.add_to_cart' | t }}</h6>
</button>
</div>
</div>
<!-- END PIN SETS WITH OPTIONS! -->
{% else if product.variants.size == 1 %}
<!-- FOR SOLO PINS! -->
<div class="col-md-5 col-sm-5 col-sm-offset-0 col-xs-12 prn">
<div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %} input-group pts" style="display: block;">
<h6 class="tc-orange ptm">{{ 'products.product.quantity' | t }}</h6>
<div class="input-group pts">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant[1]">–</button>
</span>
<input type="text" id="Quantity" name="quantity" value="1" min="1" max="100" class="quantity-selector form-control input-number"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">+</button>
</span>
</div>
</div>
<p class="tc-gray ptxss text-center p-small">Save on shipping with more pins!</p>
</div>
<div class="col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12 prn">
<div class="">
<h6 class="tc-orange ptm">Total</h6>
<div class="price">
<h3 class="float-left mbn mts">$<span id="price-total" value="{{variant.id}}">{{ variant.price | money_without_currency }}</span></h3>
</div>
</div>
<div class="checkout-01">
<button type="submit" name="add" id="add" class="btn-purchase bg-teal tc-white">
<h6 class="tc-white">{{ 'products.product.add_to_cart' | t }}</h6>
</button>
</div>
</div>
<!-- END SOLO PINS! -->
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
{% if settings.product_related_enable %}
{% include 'related-products' %}
{% endif %}
<div class="row ptxx pbxxx bg-white">
<div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
<h1 class="mbx">Check out some of the other pins that have been featured on <b>The Good Pin Club!</b></h1>
{% for product in collections.previous-pins.products %}
<a class="previous-pin" href="{{ product.url }}" style="background-image:url({{ product.featured_image | product_img_url: 'large' }})"></a>
{% endfor %}
</div>
</div>
</div>
{% if settings.product_related_enable %}
{% include 'related-products' %}
{% endif %}
</div>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
//plugin bootstrap minus and plus
$('button.btn-number').click(function(e) {
console.log('button clicked!');
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
console.log(type);
var input = $('#Quantity');
console.log(input);
console.log(input.val());
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
} else if (type == 'plus') {
console.log('i made it here');
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
}
} else {
input.val(0);
}
//Calculate Latest Price
var pin = parseInt(input.val());
var ppin = (pin* {{ variant.price | money_without_currency}});
var ptotal = (ppin);
$('#price-total').html(ptotal.toFixed(2));
});
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector,
translations: {
add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
sold_out : "{{ 'products.product.sold_out' | t }}",
unavailable : "{{ 'products.product.unavailable' | t }}"
}
});
};
</script>
Not even sure where to start with this one! Can anyone help direct me in the right area?
Thank you so much!
