Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India

Introduction

Overview Understanding Themes Global Objects Startup Widgets

Global Widgets

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

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.
namename of the option
valuesan array containing the values of option
_idunique identifier of the 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.
priceprice of the product variant
compare_pricecompetitor's price for the same item
skuunique identifier for the product
weightweight of the product variant
inventory_managementspecifies whether the number of items in stock for this product variant are tracked or for the main product
inventory_quantitynumber of items in stock for this product variant
optionsCustom properties used to define product variants. Multiple options can exist
variant_idused to identify the selected product variant
idunique numeric identifier for the product variant
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.

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 (vuejs themes)

<ms-products>
    <table>
        <tr>
            <td>
                <img :src="ms.filters.image(product.product_images[0].image,'800x800')">
            </td>
            <td style="padding-left:20px">
                <h2>{{product.name}}</h2>
                <h5>
                    <b>{{ms.filters.translate('SKU')}}:</b>
                    {{product.sku}}
                </h5>

                <h1>{{ms.filters.currency(product.price)}}</h1>
                <h4 v-if="product.price!=product.compare_price && product.price && product.compare_price && product.price<product.compare_price && (product.compare_price-product.price)/product.compare_price*100 > 1">
                    &nbsp;( {{ms.filters.number((product.compare_price-product.price)/product.compare_price*100 , 0)}}% {{ms.filters.translate('OFF')}} )
                </h4>
                <h4>
                    <b>{{ms.filters.translate('item left in Stock')}}:</b>
                    {{product.inventory_quantity}}
                </h4>
            </td>
        </tr>
    </table>
</ms-products>

View Product Details (angular themes)

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