Product Modal
Product Modal Component Documentation
Overview
Model Documentation
Model Structure
id: Product ID.title: Product title.alias: Product URL alias.description: Detailed product description.showPrice: Boolean to display the price.productVariants: Array of product variants.id: Variant ID.sku: Stock Keeping Unit.price: Variant price.initialPrice: Original price before discount.quantity: Available stock quantity.canOrder: Boolean to indicate if the product can be ordered.additionalFeatures: Additional features like stock availability.mediaItems: Array of media items.mediaType: Type of media (e.g., Image).link: URL of the media.variant: Selected product variant.variant.salesUnitId: Sales unit ID for the variant.variant.unit: Sales unit name.Example Model
{
"id": "12345",
"title": "Sample Product",
"alias": "sample-product",
"description": "This is a detailed description of the sample product.",
"showPrice": true,
"productVariants": [
{
"id": "v1",
"sku": "SKU12345",
"price": 99.99,
"initialPrice": 119.99,
"quantity": 50,
"canOrder": true,
"additionalFeatures": {
"stockAvailability": {
"message": "In Stock"
}
}
}
],
"mediaItems": [
{
"mediaType": "Image",
"link": "path/to/image1.jpg"
},
{
"mediaType": "Image",
"link": "path/to/image2.jpg"
}
]
}Component Structure
HTML Template
JavaScript
Explanation
1.
2.
3.
Usage
1.
app.component method.2.
toogleΜodal event with the product and variant data to display the modal.3.
addToCart and updateShoppingList for handling user actions.