Skip to main content

Product Description

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.

QG11


Arguments

ContextTypeDescription
app_featuresObjectApplication specific feature flags.
bag_dataObjectbag_data is an Object which contain bag details
bulk_pricesObjectContians detailed price of a product
compare_slugsArrayPreviously compared product slugs
frequently_compared_productsArrayAn array of objects containing the attributes for frequent comparision.
is_logged_inBooleanTo check if a user is logged in or not.
productObjectProduct object containing details of product.
product_metaObjectproduct_meta object which contain product size and quantity
product_variantsObjectProduct variant object containing all variants
similar_compare_productsArrayAn array of objects containing the attributes for similar comparision.
similar_productsArrayAn array of objects containing the attributes for similar comparision.
user_pincodeArrayAn 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>

Was this section helpful?