ms.product

The product widget represents a product.


Attributes

productSpecifies the alias of the product. Defaults to current product alias if used on a product page.

Settings

product (ms-data-product)

This is used to call the product in any state using product settings as:
ms-data-product
In this, the product alias value is assigned to ms-data-product so the product will render in ms.product widget.
Example:

<div ms-widget="ms.product" ms-data-product="{{product.alias}}">
</div>

Variables

nameReturns the name of the product.
descriptionReturns the description of the product.
featured_imageReturns the relative URL of the product's featured image.
aliasReturns the relative URL of the product.
skuReturns the SKU of the product.
priceReturns the price of the product. In case the product has multiple variants, it returns the price of default variant. Use a currency filter to return the value in a currency format.
brandReturns the brand of the product.
compare_priceReturns the compare price of product. In case product has multiple variants, it returns the compare price of default variant. Use a currency filter to return the value in a currency format.
availableReturns true if the product is available for purchase. Returns false if the product or its default variant's inventory_quantity value is zero or less, and its inventory_policy is not set to "Inventory allow out of stock."
num_reviewsReturns the number of reviews available for this product.
attributesReturns an array of the attributes of the product.
featuresReturns an array of the features of the product.
categoriesReturns an array of all of the categories to which a product belongs.
optionsReturns an array of the product's option.
inventory_quantityReturns an inventory quantity of the product.
imagesReturns an array of the products' images. Each item in the array contains various property of an image like name, relative URL etc. Use the image filter to link to the product image on StoreHippo Content Delivery Network.
linkedProductsReturns the linked products of the product. Linked products are the same product of different sellers which may have different price.
related_productsReturns an array of related products of the products.
_idReturns the id of the product.
publishReturns 1 if the product is published else 0.
weightReturns weight of the product.
sort_orderReturns sort order of product.the
inventory_managementReturns inventory management of the product. Either automatic or manual.
inventory_management_levelReturns inventory management level of the product.
option_setReturns the id of the option set used in the product.
variantsReturns an array of objects of variants of the product.
default_variantReturns the object of the default variant of the product.
uniqueskuReturns unique SKU of the product.
approveReturns whether the product is whether approved or not.
sellerReturns seller id of the product.
avg_ratingReturns average rating of the product on the scale of 1 to 5.
selected_optionsReturns object of selected option in the product.
product_has_multiple_variantsReturns 1 or 0 on the basis of product has multiple variants or not.
categoryReturns object of category of the product and it's parent category.
selected_variantReturns object of selected variant of the product.
created_onReturns creation time of the product in UTC format.
updated_onReturns last updated time of the product in UTC format.
list_priceReturns listing price such as MRP of the product.
our_priceReturns the price at which the product is actually sold.
original_priceReturns original price of the product.
discounts_totalReturns total amount of discount in the product.
discounts_percentageReturns discount percentage of the product.

Methods

load_featured_image(image)This function is used to assign a product image to the featured image. Pass image relative URL in it as an argument.
check_required_options(product,quantity)This function is used to add a product to the cart and contains two parameters product and quantity (it includes the number of particular amount of product that has to be added).

Examples

View Product Details

<div ms-widget="ms.product" ms-data-product="ms-dummy-product">
    <table>
        <tr>
            <td>
                <img data-ng-src="{{featured_image.image | image:'360x360'}}">
            </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>
                <h4>
                    <b>Quantity:</b>
                    {{product.inventory_quantity}}
                </h4>
            </td>
        </tr>
    </table>
</div>​