Tutorial on using product javascript

From Shopify Wiki

Jump to: navigation, search

This tutorial describes some new javascript classes that have been added with the Multiple Options support, which can be used by designers to implement functionality in their themes.

To make use of any Multiple Options functionality, the theme.liquid layout file must include the following code in the <head> section of the file: 

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

New Liquid Filter

We've create a new liquid filter. The json filter will take a liquid drop and convert it into json format, which is useful for passing into javascript.

For example: 

<script>
  var json_product = {{ product | json }}
</script>

... will output: 

var json_product = { 
  "options": [{"name": "Size"}, {"name": "Color"}, {"name": "Material"}], 
  "handle": "shopify-t-shirt", 
  "available": true, 
  "price": 2000, 
  "title": "Shopify T-shirt", 
  "featured_image": "/files/1/0000/0001/products/shopify_blue_shirt_1.png?1239915435", 
  "tags": ["casual", "shopify", "tshirt"], 
  "url": "/products/shopify-t-shirt", 
  "type": "Shirt", 
  "compare_at_price": null, 
  "id": 388, 
  "images": [ "/files/1/0000/0001/products/shopify_blue_shirt_1.png?1239915435", 
              "/files/1/0000/0001/products/shopify_green_shirt.png?1239915435", 
              "/files/1/0000/0001/products/shopify_red_shirt.png?1239915435" ], 
  "compare_at_price_varies": false, 
  "compare_at_price_max": 0, 
  "price_varies": false, 
  "description": "These t-shirts are fanastic quality, made from the finest organic cotton available, and pre-shrunk to a perfect fit every time.", 
  "variants": [ { "option2": "Blue", 
                  "option3": "Cotton", 
                  "available": true, 
                  "weight": 1000, 
                  "price": 2000, 
                  "title": "Medium / Blue / Cotton", 
                  "inventory_quantity": 1, 
                  "compare_at_price": null, 
                  "id": 1329, 
                  "sku": "", 
                  "option1": "Medium"}, 
                { "option2": "Green", 
                  "option3": "Cotton", 
                  "available": true, 
                  "weight": 1000, 
                  "price": 2000, 
                  "title": "Medium / Green / Cotton", 
                  "inventory_quantity": 1, 
                  "compare_at_price": null, 
                  "id": 1331, 
                  "sku": "", 
                  "option1": "Medium" }, 
                { "option2": "Red", 
                  "option3": "Cotton", 
                  "available": true, 
                  "weight": 1000, 
                  "price": 2000, 
                  "title": "Medium / Red / Cotton", 
                  "inventory_quantity": 1, 
                  "compare_at_price": null, 
                  "id": 1330, 
                  "sku": "", 
                  "option1": "Medium"}, 
              ], 
  "price_max": 2000, 
  "vendor": "Shopifywear", 
  "compare_at_price_min": 0, 
  "price_min": 2000 
}

Shopify.FormatMoney javascript function

We've created a FormatMoney function that, in conjunction with liquid, can be used in javascript to output prices of your products using the correct currency format defined in your shop. 

var formatted_price = Shopify.formatMoney(price, currency_format );

Where:

price 
price in cents
currency_format
(optional). By default the format is $ amount. Replaces the 'amount' string with price.

For example: 

var price = Shopify.formatMoney(variant.price, "{{ shop.money_with_currency_format }}");
// will then set price = "$ 21.00 CAD"
Retrieved from "http://wiki.shopify.com/Tutorial_on_using_product_javascript"