ms.products

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

Attributes
Variables
Examples

Attributes

grouptype	The group type from which you list the products. Options are "category", "collection", "brand".
groupalias	The group name on the basis of which you list the products. Options are alias of a category, collection or a product.
pagesize	Used to limit the number of records or products you want to list.
filters	Passes an array of objects as a filter to filter out the results on basis of some conditions.

Variables

products

Returns the array of products. Each product contains various details like name, price, compare_price, alias etc.

group

Returns the detail of the group

name	Name of the group
alias	Alias of the group
url	URL of the group page. It automatically constructs URL based on the group type

Examples

Show Products from collection (vuejs themes)

<ms-products grouptype="collection" :groupalias="ms.variables.home_collection1">
    <section v-if="group.products.length">
        <div class="container">
            <h3>
                <a :href="'/collection/'+group.alias">{{group.name}}</a>
            </h3>
            <ms-addon-slick-carousel class="slider" 
                :options='{arrows: true,slidesToShow:4,slidesToScroll: 1,infinite: true,dots:false,autoplay: true,autoplaySpeed: 2000,pauseOnHover:true,prevArrow: &apos;<div class="slick-arrow prev position-absolute d-flex align-items-center justify-content-center bg-secondary text-white" role="button" style="height:30px;width:26px;top: -45px;right:28px;z-index:1"><i class="bi bi-chevron-left lh-1 fs-5"></i></div>&apos;,nextArrow: &apos;<div class="slick-arrow next position-absolute d-flex align-items-center justify-content-center bg-secondary text-white" role="button" style="height:30px;width:26px;right:0;top: -45px;z-index:1"><i class="bi bi-chevron-right lh-1 fs-5"></i></div>&apos;,responsive: [{breakpoint: 1399,settings:{slidesToShow: 4}},{breakpoint: 992,settings:{slidesToShow: 3}}]}'>
                <template v-for="product in group.products">
                    <div class="items h-auto">
                        <w-product-grid-item :product="product"></w-product-grid-item>
                    </div>
                </template> 
            </ms-addon-slick-carousel>
        </div>
    </section>
</ms-products>

Show Products from collection (angular themes)

<section ms-widget="ms.products" ms-data-grouptype="collection" ms-data-groupalias="{{ms.variables.home_collection1}}">
    <div ng-if="products.length">
        <a class="mobile-heading fw_500" ng-href="/collection/{{::record.alias}}">
            {{::record.name}}
        </a>
        <div class="no_foundItem ms-flex-center" ng-if="!products.length">
            {{'No product found'|msT}}
        </div>
        <div ng-if="products.length && (ms.screen.m_up)">
            <div class="slider" id="{{::record.alias}}" ms-data-interval="5000">
                <div dir="{{direction}}" class="collection-item-{{ms.user.language}}" ms-widget="ms.addon.slickCarousel" ms-data-use_theme='1' ms-data-options='{{collection_slideoptions}}'>
                    <div ng-repeat="product in products" class="items">
                        <div ms-widget="product_grid_item" class="coll-prd-grid-item"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Introduction

Global Widgets