Widgets

Theme Pages consists of widgets. Widgets are reusable blocks that contain HTML template aswellJavascript Controller to make it self-sufficient.

Example:

Creating widgets

You can add a widget with the help of design theme.

Using widgets

Every widget provides a scope which contains variables and functions that widget's controller provides. Those variables and functions can be used in the widget template.

<div ms-widget="widgetName" ></div>​

Example 1 (getting product data on product page)

<div ms-widget="ms.product" >
     Name:  {{product.name}}
     Price:  {{product.price|msCurrency}}
    <button ng-click="ms.cart.add(product)"> Buy Now</button>
</div>

Example 2 (getting category and product data on category page

<div ms-widget="ms.categoryProducts" >
     Category Name:  {{category.name}}
     Numer of Products: {{category.productCount}}
     Products:
     <ul>
         <li ng-repeat="product in products">{{product.name}}</li>
    </ul>
</div>

Example 3 (getting collection and product data on collection page

<div ms-widget="ms.collectionProducts" >
     Category Name:  {{collection.name}}
     Numer of Products: {{collection.productCount}}
     Products:
     <ul>
         <li ng-repeat="product in products">{{product.name}}</li>
    </ul>
</div>

Example 4 (getting brand and product data on brand page

<div ms-widget="ms.brandProducts" >
     Category Name:  {{brand.name}}
     Numer of Products: {{brand.productCount}}
     Products:
     <ul>
         <li ng-repeat="product in products">{{product.name}}</li>
    </ul>
</div>

Global Widgets

StoreHippo offers a number of global widgets that provide the basic functionality needed to create the store. For example, ms.product widget provides product object on the product page. Following are commonly used global widgets:

• ms.product
• ms.products
• ms.navigation
• ms.collections
• ms.categories

Global Widgets vs Global Objects

Global widgets provide variables and functions that are available for use within the scope of the global widget. However, there are certain variables or global objects that are available in the global scope. They are not related to any global widget and can be used anywhere in the theme. For example, ms.user is a global object.