Difference between revisions of "Adding multiple drop down options to product pages"
From Spiffy Stores Knowledge Base
| Line 14: | Line 14: | ||
| − | ===1. Update your theme.liquid file to include the | + | ===1. Update your theme.liquid file to include the option_dropdowns.js javascript=== |
To use the Option Dropdowns javascript, your theme must include the following code in the header of the theme.liquid file. | To use the Option Dropdowns javascript, your theme must include the following code in the header of the theme.liquid file. | ||
| Line 76: | Line 76: | ||
'''There are two components to the required javascript script:''' | '''There are two components to the required javascript script:''' | ||
* Define a callback (which is called whenever a user changes one of the newly created <select> elements | * Define a callback (which is called whenever a user changes one of the newly created <select> elements | ||
| − | * Instantiate the javascript | + | * Instantiate the javascript MultipleOptions model |
| Line 103: | Line 103: | ||
// selected a valid variant | // selected a valid variant | ||
$('cart-add').removeClass('disabled'); // remove unavailable class from add-to-cart button | $('cart-add').removeClass('disabled'); // remove unavailable class from add-to-cart button | ||
| − | $('cart-add').disabled = false; | + | $('cart-add').disabled = false; // reenable add-to-cart button |
if (variant.price < variant.compare_at_price) { | if (variant.price < variant.compare_at_price) { | ||
| − | + | $('price-field').innerHTML = MultipleOptions.formatMoney(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 { | } else { | ||
| − | + | $('price-field').innerHTML = MultipleOptions.formatMoney(price, "{{shop.money_with_currency_format}}"); // update price field | |
} | } | ||
} else { | } else { | ||
// variant doesn't exist | // variant doesn't exist | ||
$('cart-add').addClass('disabled'); // set add-to-cart button to unavailable class | $('cart-add').addClass('disabled'); // set add-to-cart button to unavailable class | ||
| − | $('cart-add').disabled = true; | + | $('cart-add').disabled = true; // disable add-to-cart button |
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message | $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message | ||
} | } | ||
| Line 121: | Line 121: | ||
| − | ===4. Instantiate | + | ===4. Instantiate MultipleOptions javascript=== |
| − | To use Spiffy Stores' javascript helper, you must instantiate | + | To use Spiffy Stores' javascript helper, you must instantiate MultipleOptions.Selectors with the id of the <select>, a javascript representation of the product, and a callback. This will hide the existing <select> element, build new <select> elements for each product option, and bind the callback to each selector. |
<pre> | <pre> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 128: | Line 128: | ||
// initialize multi selector for product | // initialize multi selector for product | ||
window.addEvent('domready', function() { | window.addEvent('domready', function() { | ||
| − | new | + | new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); |
}); | }); | ||
--> | --> | ||
| Line 135: | Line 135: | ||
Format of javascript is: |
Format of javascript is: | ||
| − | new | + | new MultipleOptions.Selectors(<domid of select>, { product: <product>, onVariantSelected: <callback>}); |
| Line 141: | Line 141: | ||
'''Here's a complete MooTools script that calls the Spiffy javascript helper to enabled multiple options for a product:''' | '''Here's a complete MooTools script that calls the Spiffy javascript helper to enabled multiple options for a product:''' | ||
<pre> | <pre> | ||
| − | |||
<!-- | <!-- | ||
// mootools callback for multi variants dropdown selector | // mootools callback for multi variants dropdown selector | ||
| Line 148: | Line 147: | ||
// selected a valid variant | // selected a valid variant | ||
$('cart-add').removeClass('disabled'); // remove unavailable class from add-to-cart button | $('cart-add').removeClass('disabled'); // remove unavailable class from add-to-cart button | ||
| − | $('cart-add').disabled = false; | + | $('cart-add').disabled = false; // reenable add-to-cart button |
if (variant.price < variant.compare_at_price) { | if (variant.price < variant.compare_at_price) { | ||
| − | + | $('price-field').innerHTML = MultipleOptions.formatMoney(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 { | } else { | ||
| − | + | $('price-field').innerHTML = MultipleOptions.formatMoney(price, "{{shop.money_with_currency_format}}"); // update price field | |
} | } | ||
} else { | } else { | ||
// variant doesn't exist | // variant doesn't exist | ||
$('cart-add').addClass('disabled'); // set add-to-cart button to unavailable class | $('cart-add').addClass('disabled'); // set add-to-cart button to unavailable class | ||
| − | $('cart-add').disabled = true; | + | $('cart-add').disabled = true; // disable add-to-cart button |
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message | $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message | ||
} | } | ||
| Line 164: | Line 163: | ||
// initialize multi selector for product | // initialize multi selector for product | ||
window.addEvent('domready', function() { | window.addEvent('domready', function() { | ||
| − | new | + | new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); |
}); | }); | ||
--> | --> | ||
</script> | </script> | ||
| + | |||
</pre> | </pre> | ||
A full example using MooTools can be found here (it's a fake store"): http://fresh.spiffystores.com/products/apples | A full example using MooTools can be found here (it's a fake store"): http://fresh.spiffystores.com/products/apples | ||
Revision as of 12:04, 31 March 2010
This tutorial details how to update an existing theme to use Spiffy Stores' new multiple option javascript helper. This javascript helper will build multiple select drop-down boxes for a given product, so that users can easily select a product variant by selecting different values for each product option. A callback mechanism allows designers to provide a callback action to enable/disable their 'add to cart' button and update and price field, etc.
While designers can create their own selector methods if they like, using the built-in javascript helper is an easy way to implement multiple select boxes as a way to select product variants and custom options.
Contents
Quick Overview of Steps
1. Add the new "option_dropdowns.js" javascript helper to your theme.liquid file
2. Update your product.liquid template to use <select> tag and use unique ids
3. Define a callback
4. Instantiate javascript with valid parameters
1. Update your theme.liquid file to include the option_dropdowns.js javascript
To use the Option Dropdowns javascript, your theme must include the following code in the header of the theme.liquid file.
Insert the following into the head section
{{ 'option_dropdowns.js' | global_asset_url | script_tag }}
{{ 'mootools' | global_asset_url | script_tag }}
for example...
<head>
<title>{{ shop.name }} — {{ page_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{{ header.author }}
{{ header.copyright }}
{{ header.description }}
{{ header.keywords }}
{{ 'stylesheet.css' | asset_url | stylesheet_tag }}
{{ 'mootools.js' | global_asset_url | script_tag }}
{{ 'option_dropdowns.js' | global_asset_url | script_tag }}
{{ content_for_header }}
</head>
2. Update your Product.liquid template
Inside your product.liquid file, ensure you have a <form> element that posts to the "/cart/add" action, and that contains a <select> element that contains all the variants for your given product.
For example:
<form action="/cart/add" method="post">
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<input name="cart-add" type="submit" class="button" id="cart-add" value="Buy Now!">
<span id="price-field"></span>
</form>
You need to ensure the following elements are in place in your <form> to use Spiffy Stores' javascript helper:
- use a <select> element as the selection method for your variants
- the <select> element requires a unique id. ie: <select id='variant-select' name='id'>
- there should be a div element with an id of "price-field" for messages when selecting different variants. This is used for updating the price of the product, or setting a 'unavailable' or 'sold out' message
- the add to cart button should have an id of "cart-add". This is to allow the callback to enable/disable the button.
There are two components to the required javascript script:
- Define a callback (which is called whenever a user changes one of the newly created <select> elements
- Instantiate the javascript MultipleOptions model
3. Define a callback in your Product.liquid template
A callback is called whenever a user changes one of the new multiple <select> drop-down boxes. You can define a callback to perform whatever actions you need (for example, update the price, enable/disable the add to cart button if the particular option is not valid, etc.)
The format of the callback is:
var selectCallback = function(variant, selector) {
<your code goes here>
}
This callback will be called when any of the new <select> elements is changed by a user. Your callback should handle the following cases: • When variant passed in is null (no valid variant with the selected options was found) • When variant passed in is not available (there is a variant with the selected options, but available = false) • when variant passed in is available
Here's a sample callback function for mootools:
<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector, price, compare_at_price) {
if (variant && variant.available == true) {
// selected a valid variant
$('cart-add').removeClass('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, "{{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, "{{shop.money_with_currency_format}}"); // update price field
}
} else {
// variant doesn't exist
$('cart-add').addClass('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
}
};
-->
</script>
4. Instantiate MultipleOptions javascript
To use Spiffy Stores' javascript helper, you must instantiate MultipleOptions.Selectors with the id of the <select>, a javascript representation of the product, and a callback. This will hide the existing <select> element, build new <select> elements for each product option, and bind the callback to each selector.
<script type="text/javascript">
<!--
// initialize multi selector for product
window.addEvent('domready', function() {
new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
-->
</script>
Format of javascript is:
new MultipleOptions.Selectors(<domid of select>, { product: <product>, onVariantSelected: <callback>});
Here's a complete MooTools script that calls the Spiffy javascript helper to enabled multiple options for a product:
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector, price, compare_at_price) {
if (variant && variant.available == true) {
// selected a valid variant
$('cart-add').removeClass('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, "{{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, "{{shop.money_with_currency_format}}"); // update price field
}
} else {
// variant doesn't exist
$('cart-add').addClass('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
window.addEvent('domready', function() {
new MultipleOptions.Selectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
-->
</script>
A full example using MooTools can be found here (it's a fake store"): http://fresh.spiffystores.com/products/apples