|
|
| 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>
| |