The product widget represents a product.


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


product (ms-data-product)

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

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


name Returns the name of the product.
description Returns the description of the product.
featured_image Returns the relative URL of the product's featured image.
alias Returns the relative URL of the product.
sku Returns the SKU of the product.
price Returns 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.
brand Returns the brand of the product.
compare_price Returns 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.
available Returns 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_reviews Returns the number of reviews available for this product.
attributes Returns an array of the attributes of the product.
features Returns an array of the features of the product.
categories Returns an array of all of the categories to which a product belongs.
options Returns an array of the product's option.
inventory_quantity Returns an inventory quantity of the product.
images Returns 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.
linkedProducts Returns the linked products of the product. Linked products are the same product of different sellers which may have different price.
related_products Returns an array of related products of the products.
_id Returns the id of the product.
publish Returns 1 if the product is published else 0.
weight Returns weight of the product.
sort_order Returns sort order of product.the
inventory_management Returns inventory management of the product. Either automatic or manual.
inventory_management_level Returns inventory management level of the product.
option_set Returns the id of the option set used in the product.
variants Returns an array of objects of variants of the product.
default_variant Returns the object of the default variant of the product.
uniquesku Returns unique SKU of the product.
approve Returns whether the product is whether approved or not.
seller Returns seller id of the product.
avg_rating Returns average rating of the product on the scale of 1 to 5.
selected_options Returns object of selected option in the product.
product_has_multiple_variants Returns 1 or 0 on the basis of product has multiple variants or not.
category Returns object of category of the product and it's parent category.
selected_variant Returns object of selected variant of the product.
created_on Returns creation time of the product in UTC format.
updated_on Returns last updated time of the product in UTC format.
list_price Returns listing price such as MRP of the product.
our_price Returns the price at which the product is actually sold.
original_price Returns original price of the product.
discounts_total Returns total amount of discount in the product.
discounts_percentage Returns discount percentage of the product.


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


View Product Details

<div ms-widget="ms.product" ms-data-product="ms-dummy-product">
                <img data-ng-src="{{featured_image.image | image:'360x360'}}">
            <td style="padding-left:20px">
                    <b>Product Code:</b>
                    {{product.sku | uppercase}}

                <h4 ng-if="product.compare_price">
                        <b style="padding:5px 15px;">
                            {{((product.compare_price-product.price)/product.compare_price)*100|number:2}}% OFF