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

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

<ms-product :alias="product.alias"></ms-product>

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.
product_images
Returns an array of product images. Each item contains properties such as image (relative URL) and metadata.
collections
Returns an array of collections (groups) to which the product belongs.
weightunit
Returns the weight unit of the product (e.g., grams, kilograms, pounds). Used along with weight.
dimension
Returns the dimensions of the product such as length, width, and height if defined.
tax
Returns the tax configuration applied to the product.
max_quantity
Returns the maximum quantity a customer can buy for this product in a single order.
min_limit_to_buy_this_product
Returns the minimum quantity that must be purchased for this product.
selected_quantity
Returns the quantity currently selected by the user in the product page.
selected_addons
Returns an object containing the selected addons for the product.
addons
Returns an array of available addons that can be purchased with the product.
wishlistexist
Returns true if the product already exists in the user’s wishlist, else false.
total_order_count
Returns the total number of orders that included this product.
total_sales_amount
Returns the total sales amount generated by this product across all orders.
last_order_date
Returns the timestamp of the last order placed for this product.

Examples

Show Brand

<div class="product-brand" v-if="product.brand">
  <p>Brand: <strong>{{ product.brand }}</strong></p>
</div>

Show Categories

<div class="product-categories" v-if="product.categories.length">
  <p>Categories:</p>
  <ul>
    <li v-for="category in product.categories" :key="category">{{ category }}</li>
  </ul>
</div>

Inventory Quantity

<div class="product-stock">
  <p v-if="product.inventory_quantity > 0">
    In Stock: {{ product.inventory_quantity }} units
  </p>
  <p v-else class="out-of-stock">
    Out of Stock
  </p>
</div>

Weight and Dimensions

<div class="product-dimensions">
  <p>Weight: {{ product.weight }} {{ product.weightunit }}</p>
  <p v-if="product.dimension.length">Dimensions: {{ product.dimension.length }} x {{ product.dimension.width }} x {{ product.dimension.height }} {{ product.dimension.unit }}</p>
</div>

Show Collections

<div class="product-collections">
  <span v-for="collection in product.collections" class="badge bg-primary me-1">{{ collection }}</span>
</div>

Show Discount Badge

<div v-if="product.selected_variant.compare_price > product.selected_variant.price" class="badge bg-danger">
  {{ ((product.selected_variant.compare_price - product.selected_variant.price) / product.selected_variant.compare_price * 100).toFixed(0) }}% OFF
</div>

View Product Details

<ms-product>
    <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-product>