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