Changing the Item Page - Bumby-Wool/builder GitHub Wiki

This guide will give a brief introduction on editing the item page. For a more in depth understanding of how this works go through the Angular JS Tutorial.

A word of caution, modifying the item page will effect all of the item templates

The item page is found at components\item\item.html and contains the scaffold which each item template/options are loaded into.

There are use main variables to work with for data on the item page

• $ctrl.item - This variable holds the current item record retrieved from the services\itemDataService.js. The current item is populated based on the URL, for instance https://bumby-wool.github.io/builder/#!/items/pants selects the pants record from the itemDataService.
• $ctrl.selectedVariant - This variable holds the currently selected variant of the current item. The default is the first variant in the variant list for this item.

First we'll start with an example of adding a new element at the item level. Start by adding the new field description to the Diaper Cover item in the services\itemDataService.js file.

Next we'll make that field show up on the item page. Go to the components\item\item.html and add the following code at the bottom of the file <p>{{$ctrl.item.description}}</p>

Now run the application locally to see the effect, at the bottom of the diaper cover page the description appears

Note that for other items besides the diaper cover the <p></p> is still on the page but because we didn't define a description for those items there is no content in it for the other items.

In the case where the <p></p> has additional styling it would ideal for it to only be on the page when there is content in the description. To do exactly that we add an condition in the ng-if attribute which determines when the <p></p> should be on the page. If we want it only to be on the page when there is a description for the item the code would look like this <p ng-if="$ctrl.item.description">{{$ctrl.item.description}}</p>