ms.products

This widget is used to list the products on the basis of category, collection or a product alias.


Attributes

group_typeThe group type from which you list the products. Options are "category", "collection", "product".
group_aliasThe group name on the basis of which you list the products. Options are alias of a category, collection or a product.
pagesizeUsed to limit the number of records or products you want to list.
filtersPasses an array of objects as a filter to filter out the results on basis of some conditions.

Variables

productsReturns the array of products. Each product contains various details like name, price, compare_price, alias etc.
facetsIf facets are enabled in store settings and products of a category is fetched using this widget, then with the category products, facets are also returned by this widget in facets variable.

Examples

Listing products of specified category

<div ms-widget="ms.categoryProducts" ms-data-category="ms-dummy-category">
      <table ng-repeat="product in products">
            <tr>
                  <td ng-repeat="images in product.images | limitTo : 1">
                        <img data-ng-src="{{images.image | image}}" width="240"> 
                  </td>
                  <td style="padding-left:20px">
                        <h2>{{product.name}}</h2>
                        <h5>
                              <b>Product Code:</b> 
                              {{product.sku | uppercase}}
                        </h5>
                        <h1>{{product.price|msCurrency}}</h1>
                        <h4 ng-if="product.compare_price">
                              <del>{{product.compare_price|msCurrency}}</del>
                              <span>
                                    <b style="padding:5px 15px;">
                                    {{((product.compare_price-product.price)/product.compare_price)*100 | number :2 }}% OFF
                                    </b>
                              </span>
                        </h4>
                        <br>
                        <h4>
                              <b>Quantity</b>
                              <br><br>
                              {{product.inventory_quantity}}
                        </h4>
                        <br>
                  </td>
            </tr>
      </table>
</div>

List product on the basis of specified collection

<div ms-widget="ms.collectionProducts" ms-data-collection="ms-dummy-collection">
    <table ng-repeat="product in products">
        <tr>
            <td ng-repeat="images in product.images | limitTo : 1">
                <img data-ng-src="{{images.image | image}}" width="240">
            </td>
            <td style="padding-left:20px">
                <h2>{{product.name}}</h2>
                <h5>
                    <b>Product Code:</b>
                    {{product.sku | uppercase}}
                </h5>
                <h1>{{product.price|msCurrency}}</h1>
                <h4 ng-if="product.compare_price">
                    <del>{{product.compare_price|msCurrency}}</del>
                    <span>
                        <b style="padding:5px 15px;">{{((product.compare_price-product.price)/product.compare_price)*100 | number :2 }}% OFF
                                    </b>
                    </span>
                </h4>
                <br>
                <h4>
                    <b>Quantity</b>
                    <br><br>
                    {{product.inventory_quantity}}
                </h4>
                <br>
            </td>
        </tr>
    </table>
</div>