Product Description

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

The product description page will display all the required details of a product including media and content. It also displays product variants for customers to select one or multiple of them and add them to the bag.

Arguments

Context	Type	Description
app_features	Object	Application specific feature flags.
bag_data	Object	bag_data is an Object which contain bag details
bulk_prices	Object	Contians detailed price of a product
compare_slugs	Array	Previously compared product slugs
frequently_compared_products	Array	An array of objects containing the attributes for frequent comparision.
is_logged_in	Boolean	To check if a user is logged in or not.
product	Object	Product object containing details of product.
product_meta	Object	product_meta object which contain product size and quantity
product_variants	Object	Product variant object containing all variants
similar_compare_products	Array	An array of objects containing the attributes for similar comparision.
similar_products	Array	An array of objects containing the attributes for similar comparision.
user_pincode	Array	An array of object conatining the attribute of similar products

context.product

This will be an object with all the necessary details regarding a product. You can use this data to render the UI as required.

Example:

Example given below will render a short product description card:

theme/global/components/fy-product-card.vue

// Product Description Example

<div className="product-description" v-if="context && context.product">
    <h1>{{context.product.name}}</h1>
    <p>Brand Name: {{context.product.brand.name}}</p>

    <div className="product-details">
        <span>Color: {{context.product.attributes.color}}</span>
        <span>Occassion: {{context.product.attributes.occassion}}</span>
        <span>Description: {{context.product.attributes.style_note}}</span>
    </div>
</div>