Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
product.monogram-with-inventory-on-the-flask.liquid
<div class="clearfix" id="product-content" 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' }}" />
<form action="/cart/add" method="post" enctype="multipart/form-data">
<ul id="product-details">
<li id="product-title">
<h1 itemprop="name">{{ product.title }}</h1>
{% if settings.show_vendor %}
{% assign product_vendor_handle = product.vendor | handle %}
{% if collections[product_vendor_handle].handle == product_vendor_handle %}
{% assign vendor_url = collections[product_vendor_handle].url %}
{% else %}
{% assign vendor_url = product.vendor | url_for_vendor %}
{% endif %}
<h2 itemprop="brand">{{ product.vendor | link_to: vendor_url }}</h2>
{% endif %}
</li>
{% if settings.prod_desc_placement == 'above' %}
<li id="product-description" class="above">
{% comment %}<h2>Description</h2>{% endcomment %}
<div id="full_description" class="rte" itemprop="description">
{{ product.description }}
</div><!-- #full_description rte -->
</li>
{% endif %}
<li id="product-prices" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
{% if product.available %}
<link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
<link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}
<p id="product-price" class="smooth">
{% if product.compare_at_price > product.price %}
<span class="product-price on-sale" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="product-compare-price">{{ product.compare_at_price_max | money }}</span>
{% else %}
<span class="product-price" itemprop="price">{{ product.price | money }}</span>
{% endif %}
</p>
</li>
{% if product.available %}
{% if product.variants.size > 1 %}
<li id="product-variants" class="clearfix">
<select id="product-select" name="id[]" class="hidden">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
{% if settings.show_qty %}
{% include 'snippet-quantity' %}
{% endif %}
</li>
{% else %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% if settings.show_qty %}
<li id="product-variants" class="clearfix">
{% include 'snippet-quantity' %}
</li>
{% endif %}
{% endif %}
{% comment %}
Additional form fields to customize your product.
Example code below for every type of form fields.
Use any form field, and as many as you need.
{% endcomment %}
<li id="properties">
<div class="property-wrapper">
<input class="checkbox" type="checkbox" id="fourth-property" name="id[]" value="{{ product.variants.last.id }}" />
<label for="fourth-property">Add monogram for {{ product.variants.last.price | money }}</label>
</div>
<div class="property-wrapper hidden" id="monogram-wrapper">
<label for="third-property">Monogram</label>
<input class="text" type="text" id="third-property" name="properties[Monogram]" value="" disabled="disabled" />
</div>
</li>
<script>
jQuery('#fourth-property').change(function() {
if (jQuery(this).is(':checked')) {
jQuery('#monogram-wrapper').removeClass("hidden").fadeTo(200,1);
jQuery('#monogram-wrapper input').removeAttr('disabled').removeClass('disabled');
}
else {
jQuery('#monogram-wrapper').fadeTo(200,0).addClass("hidden");
jQuery('#monogram-wrapper input').addClass('disabled').attr('disabled', 'disabled');
}
});
</script>
{% assign is_backordered = false %}
{% if product.variants.size == 1 %}
{% assign variant = product.variants.first %}
{% if variant.available and variant.inventory_management != blank and variant.inventory_quantity <= 0 %}
{% assign is_backordered = true %}
{% endif %}
{% endif %}
<li id="backorder"{% unless is_backordered %} class="hidden"{% endunless %}>
<p>{{ settings.back_order_msg | replace: '%s', '<span id="selected-variant"></span>' }}</p>
</li>
<li id="product-add">
<div id="product-add-wrap">
<div id="product-add-medallion" class=""></div><!-- #product-add-medallion -->
<input type="submit" name="add" id="add" value="Add to cart" class="smooth">
</div><!-- #product-add-wrap -->
</li>
{% else %}
<li id="product-add">
<div id="product-add-wrap">
<div id="product-add-medallion" class=""></div><!-- #product-add-medallion -->
<input type="submit" name="add" class="disabled" disabled="disabled" id="add" value="Sold Out" class="smooth">
</div><!-- #product-add-wrap -->
</li>
{% endif %}
{% if collection %}
{% if collection.previous_product or collection.next_product %}
<li class="accent-text prev-next clearfix">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<span class="left">{{ '&larr; Previous Product' | link_to: prev_url }}</span>
{% endif %}
{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<span class="right">{{ 'Next Product &rarr;' | link_to: next_url }}</span>
{% endif %}
</li>
{% endif %}
{% endif %}
{% if settings.prod_desc_placement == 'below' %}
<li id="product-description" class="below">
<h2>Description</h2>
<div id="full_description" class="rte" itemprop="description">
{{ product.description }}
</div><!-- #full_description rte -->
</li>
{% endif %}
{% if settings.prod_desc_placement == 'bottom' %}
<li id="product-share">
{% include 'snippet-product-share' %}
</li><!-- #product-share -->
{% endif %}
</ul><!-- #product-description -->
</form>
<div id="product-photos">
{% if product.images.size == 0 %}
<div id="product-photo-container">
<img src="{{ '' | product_img_url: 'grande' }}" alt="" />
</div><!-- #product-photo-container -->
{% else %}
<div id="product-photo-container">
{% for image in product.images %}
<a class="gallery" href="{{ image.src | product_img_url: 'original' }}" rel="gallery">
<img src="{{ image.src | product_img_url: 'grande' }}" alt="{{ image.alt | escape }}" />
</a>
{% endfor %}
</div><!-- #product-photo-container -->
{% if product.images.size > 1 %}
<ul id="product-photo-thumbs" class="clearfix">
{% for image in product.images %}
<li class="product-photo-thumb">
<img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
{% unless settings.prod_desc_placement == 'bottom' %}
<div id="product-share">
{% include 'snippet-product-share' %}
</div>
{% endunless %}
</div><!-- #product-photos -->
{% if settings.prod_desc_placement == 'bottom' %}
<div id="product-description" class="bottom">
<h2>Description</h2>
<div id="full_description" class="rte" itemprop="description">
{{ product.description }}
</div><!-- #full_description rte -->
</div>
{% endif %}
{% comment %}
<div class="gvproduct" style="clear:both; padding-top:25px" data-id="{{ product.id}}"></div>
{% endcomment %}
</div><!-- #product-content -->
{% include 'snippet-related-products' %}
{% include 'snippet-breadcrumbs' %}
<script>
jQuery(function() {
// OPTION SELECT
{% if product.variants.size > 1 %}
{% assign look_for_image_match = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
{% assign look_for_image_match = true %}
{% assign option_index = forloop.index0 %}
{% endif %}
{% endfor %}
Shopify.doNotTriggerClickOnThumb = false;
var selectCallback = function(variant, selector) {
if (variant && variant.available) {
// selected a valid variant that is available.
jQuery('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1); // remove unavailable class from add-to-cart button, and re-enable button
// if item is backordered yet can still be ordered, we'll show special message.
if (variant.inventory_management && variant.inventory_quantity <= 0) {
jQuery('#selected-variant').html({{ product.title | json }} + ' - ' + variant.title);
jQuery('#backorder').removeClass("hidden").fadeTo(200,1);
} else {
jQuery('#backorder').fadeTo(200,0).addClass("hidden");
}
if ( variant.compare_at_price > variant.price ) {
jQuery('#product-price').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<span class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</span>'); // update price field
} else {
jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' ); // update price field
}
{% if settings.show_multiple_currencies %}
Currency.convertAll(shopCurrency, jQuery('[name=currencies]').val(), 'form[action="/cart/add"] span.money');
{% endif %}
} else {
// variant doesn't exist or is sold out
jQuery('#backorder').fadeTo(200,0).addClass("hidden");
var message = variant ? "Sold Out" : "Unavailable";
jQuery('#add').val(message).addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5); // set add-to-cart button to unavailable class and disable button
}
};
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
jQuery('.single-option-selector').addClass('special-select').customStyle();
// Remove the Monogram options from all option select elements.
jQuery('.single-option-selector option').filter(function() {
return jQuery(this).text() === 'Monogram';
}).remove();
// Add label if only one product option and it isn't 'Title'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
jQuery('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}
// Auto-select first available variant on page load.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
jQuery('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}
{% if look_for_image_match %}
// If a Color is selected, show the matching product image.
jQuery('.single-option-selector:eq({{ option_index }})').bind('change', function() {
if (!Shopify.doNotTriggerClickOnThumb) {
jQuery('#product-photo-thumbs img[alt="' + jQuery(this).val() + '"]:eq(0)').trigger('click');
}
Shopify.doNotTriggerClickOnThumb = false;
return true;
});
// If an image is shown in Main View, auto-select the corresponding Color option.
jQuery('#product-photo-thumbs img').bind('click', function() {
var color = jQuery(this).attr('alt');
if (color && color !== '') {
var options = jQuery('.single-option-selector:eq({{ option_index }}) option[value="' + color + '"]');
if (options.size() !== 0) {
Shopify.doNotTriggerClickOnThumb = true;
jQuery('.single-option-selector:eq({{ option_index }})').val(color).trigger('change');
}
}
return true;
});
{% endif %}
{% endif %}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.