Product Modal

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.

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

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

HTML Template: Defines the layout of the modal, including product details, galleries, and action buttons.

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

Computed Properties: Provides derived state or calculated values based on component data.

Usage

To use the Product Modal Component:

Include the Component: Add the component to your Vue.js application using the app.component method.

Trigger the Modal: Emit the toogleΜodal event with the product and variant data to display the modal.

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.

Product Modal Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#

Product Modal Component Documentation