|
|
| (2 intermediate revisions by the same user not shown) |
| Line 3: |
Line 3: |
| The following snippets are available: | | The following snippets are available: |
|
| |
|
| === multiple_options_prototype ===
| | * [[Global Liquid Snippet - multiple_options_prototype]] |
| | | * [[Global Liquid Snippet - multiple_options_jquery]] |
| 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.
| | * [[Global Liquid Snippet - multiple_options_mootools]] |
| | | * [[Global Liquid Snippet - headers]] |
| 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>
| |