-
Notifications
You must be signed in to change notification settings - Fork 57
data bind
Data binding are used in the view (within a template) to load dynamic data that was retrieved via the API. There are two parameters required for each data-bind; var and format. Some formats may allow for or require additional parameters, such as currencySign:$; on a money format.
Custom formats can be set within an extension. If you reference a custom format, you must also specify the extension. ex:
format:myFormat; extension:myRIA;
Several of the zoovy extensions have custom formats in them.
The key/value pairs must be properly formatted, so be sure to remember to end with a ;
The following parameters are available on all the default formats:
The value for this is made up of two parts, referred to as 'namespace' (product, category, order) and attribute (zoovy:prod_name, pretty, orderid). Namespace refers to the type of data that is being dealt with and hints to the tranlation functions in the controller on how to treat the data. attribute refers to the id within the data object. ex:
{"zoovy:prod_name":"Han Solo Action Figure","zoovy:base_price":42.95}Format lets the templating system know how to output the data. A format could be as simple as text, money or wiki.
The values entered here will be output before/after the data, respectively.
ex:
var:product(zoovy:prod_mfg); format:text; pretext:Mfg: ; would output: Mfg: Some Manufacturer
Specify another var to use if the primary var is blank. for example, in a prodlist, you may want to use a product color instead of the name, but default to the name if color isn't set. ex:
var: product(zoovy:prod_color); defaultVar: product(zoovy:prod_name); format: text;
If you don't want a field to appear blank, you can set a defaultValue. ex:
var: product(zoovy:prod_color); defaultValue: blue; format: text;
Will output value as plain text. More commonly used on small text blocks (use wiki on big ones). ex:
<div data-bind="var: product(zoovy:prod_mfgid); format(text);pretext: Mfg ID: ;"></div>will run creole wiki interpolator over text. Should be run on all big text blocks, such as prod_desc or on page content. ex:
<div data-bind="var: product(zoovy:prod_desc); format(wiki);"></div>
Outputs a fully qualified image url. ex:
<img class='prodThumb' data-bind='var: product(zoovy:prod_image1); format:imageURL; bgcolor:ffffff;' width='50' height='50' />The zoovy media library can generate an instance of any image with any dimensions. The template translator uses the height and width on the img tag to determine what size should be output. Failure to add a height/width will result in a very large image being output. A CSS class can not be used to set size for this reason. bgcolor will set the background color if padding needs to occur. Padding may occur if the aspect ratio of the original image and the instance are not identical. To pad with transparency, set bgcolor:TTTTTT;
Meant to work with the youtube:videoid attribute, it will output an iframe with the youtube movie in it. ex:
<div data-bind="var:product(youtube:videoid);format:youtubeVideo;"></div>Useful for tabs and other conditional display elements where you only want them shown if the attribute is populated. Use css to hide the html element in question and then a display:block; css attribute is added to the tag. ex:
<li class='tab displayNone' data-bind="var:product(zoovy:prod_desc);format:showIfSet;"></li>In this case, the li would only be visible if the product description was populated.
Will output a PayPalEC button and link accordingly. requires a checkout extension to be loaded.
Will output a Google Checkout button and link accordingly. requires a checkout extension to be loaded.
Will output a truncated text block, useful for only showing the first X number of characters in a product description. set numCharacters:X; ex:
var: product(zoovy:prod_desc); format:truncText; numCharacters: 150;
will output only the first 150 characters followed by ... if the original text was greater than 150 characters
For use in a line-item within a shopping cart. Outputs the product variations/options as static text (let's the user know which options were selected).
Converts a unix timestamp into a MM, DD, YY format. set showTime:1; for HH:MM to be output as well. ex:
<span data-bind='var:order(CREATED_GMT);format:unix2mdy;'></span>Use on form elements to populate based on previously entered or predefined data. For example, this is used a lot in the checkout templates. ex:
<input type='text' name='data.bill_email' id='data-bill_email' required='required' value='' data-bind='var: cart(data.bill_email); format:popVal;' />
A pretty handy format for users who are writing their own onclick events. You most likely will need a product ID or a category ID for passing into the function. ex:
<button data-bind='var:category(id);format:assignAttribute; attribute:data-path;'></button>
The output would be:
<button data-path=".cat.safe.id"></button>
Then you could pass in the value of $(this).data-path in your onClick function.
You guessed it. Will format an integer as money. Some additional key/value pairs are available for this one: hideZero - if set to true, will hide a 0 so it isn't output as $0.00. currencySign - Typically, going to be set to $ but allows for any currency sign to be used. Note that the output is always US Dollars (currently)
ex:
<span data-bind='var:order(ORDER_TOTAL);format:money; currencySign: $; hideZero:false;'></span>