Using Global Liquid Snippets - Revision history

Admin at 21:36, 2 June 2011

2011-06-02T21:36:50Z

Admin at 01:36, 27 May 2011

2011-05-27T01:36:33Z

Admin at 01:33, 27 May 2011

2011-05-27T01:33:57Z

Admin: Created page with 'A library of Liquid snippets is maintained for use in any theme. The following snippets are available: === multiple_options_prototype === This snippet is used to include the J…'

2011-05-27T01:30:59Z

Created page with 'A library of Liquid snippets is maintained for use in any theme. The following snippets are available: === multiple_options_prototype === This snippet is used to include the J…'

New page

A library of Liquid snippets is maintained for use in any theme.

The following snippets are available:

=== multiple_options_prototype ===

This snippet is used to include the JavaScript code necessary to support multiple options on a product page. This version is used in a <code>Prototype</code> environment.

Include the following code at the end of the <code>product.liquid</code> template.

<pre>
{% include 'multiple_options_prototype' %}
</pre>

Included code

<pre>
<script defer="defer" type="text/javascript">
// <![CDATA[
// prototype callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('cart-add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
$('cart-add').disabled = false; // reenable add-to-cart button
if (variant.price < variant.compare_at_price) {
$('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}") + '<br/><small>Usually <span class="compare-at-price">' + MultipleOptions.formatMoney(compare_at_price, "{{shop.money_with_currency_format}}</span></small>"); // update price field
} else {
$('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}"); // update price field
}
} else {
// variant doesn't exist
$('cart-add').addClassName('disabled'); // set add-to-cart button to unavailable class
$('cart-add').disabled = true; // disable add-to-cart button
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};

// initialize multi selector for product
Event.observe(document, 'dom:loaded', function() {
new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
// ]]>
</script>
</pre>

← Older revision		Revision as of 21:36, 2 June 2011
Line 6:		Line 6:
	* [[Global Liquid Snippet - multiple_options_jquery]]		* [[Global Liquid Snippet - multiple_options_jquery]]
	* [[Global Liquid Snippet - multiple_options_mootools]]		* [[Global Liquid Snippet - multiple_options_mootools]]
		+	* [[Global Liquid Snippet - headers]]

← Older revision		Revision as of 01:36, 27 May 2011
Line 6:		Line 6:
	* [[Global Liquid Snippet - multiple_options_jquery]]		* [[Global Liquid Snippet - multiple_options_jquery]]
	* [[Global Liquid Snippet - multiple_options_mootools]]		* [[Global Liquid Snippet - multiple_options_mootools]]
−
−	~~=== multiple_options_prototype ===~~
−
−	~~This snippet is used to include the JavaScript code necessary to support multiple options on a product page. This version is used in a <code>Prototype</code> environment.~~
−
−	~~Include the following code at the end of the <code>product.liquid</code> template.~~
−
−	~~<pre>~~
−	~~{% include 'multiple_options_prototype' %}~~
−	~~</pre>~~
−
−	~~Included code~~
−
−	~~<pre>~~
−	~~<script defer="defer" type="text/javascript">~~
−	~~// <![CDATA[~~
−	~~// prototype callback for multi variants dropdown selector~~
−	~~var selectCallback = function(variant, selector) {~~
−	~~if (variant && variant.available == true) {~~
−	~~// selected a valid variant~~
−	~~$('cart-add').removeClassName('disabled'); // remove unavailable class from add-to-cart button~~
−	~~$('cart-add').disabled = false; // reenable add-to-cart button~~
−	~~if (variant.price < variant.compare_at_price) {~~
−	$('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}") + '<br/><small>Usually <span class="compare-at-price">' + MultipleOptions.formatMoney(compare_at_price, "{{shop.money_with_currency_format}}</span></small>"); // update price field
−	~~} else {~~
−	~~$('price-field').innerHTML = MultipleOptions.formatMoney(price, "Price: {{shop.money_with_currency_format}}"); // update price field~~
−	}
−	~~} else {~~
−	~~// variant doesn't exist~~
−	~~$('cart-add').addClassName('disabled'); // set add-to-cart button to unavailable class~~
−	~~$('cart-add').disabled = true; // disable add-to-cart button~~
−	~~$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message~~
−	}
−	};
−
−	~~// initialize multi selector for product~~
−	~~Event.observe(document, 'dom:loaded', function() {~~
−	~~new MultipleOptions.Selectors("variant-select", { product: {{ product \| json }}, onVariantSelected: selectCallback });~~
−	~~});~~
−	~~// ]]>~~
−	~~</script>~~
−	~~</pre>~~

← Older revision		Revision as of 01:33, 27 May 2011
Line 2:		Line 2:

	The following snippets are available:		The following snippets are available:
		+
		+	* [[Global Liquid Snippet - multiple_options_prototype]]
		+	* [[Global Liquid Snippet - multiple_options_jquery]]
		+	* [[Global Liquid Snippet - multiple_options_mootools]]

	=== multiple_options_prototype ===		=== multiple_options_prototype ===