Product Modal Component Documentation#
Overview#
The Product Modal Component is a component designed to display detailed product information in a modal window. It integrates product image galleries, variant selection, and purchasing options with an engaging user interface. This component is ideal for e-commerce platforms where users need an enhanced view of a product, including its images, variants, and pricing details.Model Documentation#
Model Structure#
productData: Object containing detailed product information.alias
: Product URL alias.
description
: Detailed product description.
showPrice
: Boolean to display the price.
productVariants
: Array of product variants.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).
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#
The component is structured as follows:HTML Template: Contains the modal structure and product display elements.
JavaScript: Handles data binding, user interactions, and dynamic behavior.
Methods: Define functionalities such as image zoom, adding to cart, and managing shopping lists.
Computed Properties: Provides computed values based on the component’s state.
HTML Template#
The HTML template of the component defines the layout and structure of the modal:JavaScript#
The JavaScript code manages the functionality and dynamic behavior of the component:Explanation#
1.
HTML Template: Defines the layout of the modal, including product details, galleries, and action buttons.
2.
JavaScript Methods: Includes methods for handling user interactions (e.g., adding to cart, zooming images) and managing component state (e.g., initializing Swipers, updating shopping lists).
3.
Computed Properties: Provides derived state or calculated values based on component data.
Usage#
To use the Product Modal Component:1.
Include the Component: Add the component to your Vue.js application using the app.component
method.
2.
Trigger the Modal: Emit the toogleΜodal
event with the product and variant data to display the modal.
3.
Handle Interactions: Utilize methods like addToCart
and updateShoppingList
for handling user actions.
This component enhances the user experience by providing a detailed view of products with interactive galleries and purchase options.Modified at 2024-08-27 10:07:22