<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

Widgets

Theme Pages consists of widgets. Widgets are reusable blocks that contain HTML template as well Javascript 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

<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

<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>

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:

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.

Theme Pages consists of widgets. Widgets are reusable blocks that contain HTML template as well Javascript 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

<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

<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>

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:

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.

FAQ

Q. How to open a widget in a popup or modal window?

There is a global widget ms.modal that opens the given widget in a modal window. The following code will open widget sampleWidget in a modal window.

<a href="javascript:void(0)" ms-widget="ms.modal" ms-data-widget="sampleWidget">Open SampleWidget in modal window</a>
2018-07-06T06:36:58.312Z