-
Notifications
You must be signed in to change notification settings - Fork 58
Beyond Quickstart
Quickstart is a great way to get started. But sometimes, in fact often, you'll need more. Below are some helpful tips to keep you going. A lot of features can be implemented without touching anything except the index.html and init.js file. That's one of the goals. That being said, if you are doing anything really complex, don't make your job needlessly difficult by not editing quickstart.js (just rename it so it isn't saved over during an update). Also, the extensions and MVC files are all commented pretty heavily, so if you can't find the answer to what something does (or how to do it) here, look in the .js files.
If you are going to be adding your own JS code (renderFormats, app events, etc), then it is recommended you add your own extension. This will make it easier on you (or the next person) to upgrade the project as new versions of the MVC are released. In the extensions directory, there is a sample.js file you can use to get started. Rename that file so that it is not erased during the upgrade.
As mentioned in quickstart, FireFox and Safari will allow you to run the index.html file locally. This makes the testing (at least during the initial build phase) go pretty easily. Quickstart.js will even change some of it's behaviors to better accommodate this environment, such as loading checkout without redirecting to the httpsURL var.
Whether testing locally or on a server, you can set ?debug=1 on the URI to enable a small debug panel at the bottom. The contents of that panel are at the bottom of your index.html file, so you can easily add more tools to make your job easier.
If you need to add a new template for a product list, search results or subcategory list, it's fairly easy. Copy one that is similar, paste it into appTemplates, give it a new ID and modify as needed. Where you need it called, change the loadsTemplate in the bindData to the new ID. The template will automatically be added to memory the first time it's called. If you call a template that doesn't exist, an error will be thrown.
The following actions are taken ONLY if the data-bind var has a value. So if the attribute/field isn't populated, this code isn't run. When it is run, it is run in this order:
- className: will add as a class to the tag that has the data-bind on it.
- pretext: simple text you want output before the value. No HTML.
- posttext: simple text you want output after the value. No HTML.
- before: for html you want before the output content. (actually uses $.before())
- after: for html you want after the output content. (actually uses $.after())
- wrap: uses $.wrap() to wrap a tag around the value.
Examples:
<h5 class='prodMSRP' data-bind='var: product(zoovy:prod_msrp); format:money; currencySign: $; hideZero:true; pretext: MSRP: ;'></h5>
<ul id='homepageFeaturedItems' data-bind="var: category(@products); format: productList; editor: finder; extension: store_prodlist; loadsTemplate: productListTemplate; hide_multipage:1; before:<h2>Featured Items</h2>; withReviews:1;" class='listStyleNone fluidList clearfix noPadOrMargin productList'></ul>
<span data-bind='var: reviews(average); format:addClass; className:review_;' class='reviewSprite'></span>
In the 'reviewSprite' example above, the format addClass will add the class 'review_' but also append the value to the className and assign that as well. So if the value is 6, 'review_' and 'review_6' are both assigned.
The recommended approach for tier 1 categories in the appView would be to hard code them and use the bindNav/#! (covered in steps 5 and 6 of the quickstart tutorial). This provides the most search engine friendly and highest performance.
Alternatively, you can add this to your html in the appView and the tier 1 categories will be displayed using the template 'categoryListTemplateRootCats':
<ul id='tier1categories'></li>
There are three classes that you can add to the appView area that will get translated as items are added and removed from the cart. They are as follows:
- cartItemCount: The total number of items that are in the cart.
- cartSubtotal: The order dollar total BEFORE shipping, tax, handling, etc.
- cartTotal: The order total after shipping, tax, handling etc. Note that if a shipping method hasn't been selected, cartTotal may not be 100% accurate.
Both the native product lists and the elastic search results support a variety of parameters for adding more control. The ones listed below are shared between the two (more info can be found in the store_prodlist.js extension):
- hide_multipage: turn off the entire multipage header (ex: items 1 - 15 of 24 and the controls section).
- hide_multipage_controls: turn off just the controls portion of the header (arrows and page dropdown)
- loadsTemplate: what template to load per product.
- withInventory: will get inventory with the product record request. Required if add to cart button is present in the list. Slower.
- withVariations: will get variations (product options - size, color, etc) with product record request. Required if an add to cart button is present. Slower.
- withReviews: will get reviews data with product record request. Slower.
- items_per_page: The max number of items to display before going to multipage
A good combination for showing a fixed number of items with no multipage is to set items_per_page to X and hide_multipage to true in the data-bind (ex: data-bind="items_per_page:5; hide_multipage:true; ...")
There are too many renderFormats to name and document outside the code itself. If you see a renderFormat and are curious about it, look at what extension is uses (in the data-bind) and look in the extension itself. If no extension is present, it's in the controller.js file.
You can add your own render formats as well. There are a variety of ways to do this, the easiest of which is to add something like this into the appInitComplete function in init.js
app.ext.myRIA.renderFormats.[MYFORMATNAME] = function($tag,data){
//do something...
}
- $tag is a jquery object of the tag itself.
- data is an object:
- data.bindData is an object that contains all the data bind key/value pairs as the index and value.
- data.value is the value. this should never be blank by the time you get to this function.