Product Single

Product Single Component Documentation

Overview

The Product Single Component is a Vue.js component designed to display detailed information about a product, including images, description, price, and purchase options. It integrates with Swiper for image carousels and provides functionality for adding products to a shopping cart or a shopping list. This component is designed to be used in e-commerce platforms and provides a rich user experience for product details.

Model Documentation

The component expects a model prop that should be an object containing details about the product. This object typically includes:

id: Unique identifier for the product.

cssClass: CSS classes to apply to the product section.

additionalFields: Optional fields for additional information.

Model Structure

The model object structure is as follows:

{
    "id": "string",
    "cssClass": "string",
    "additionalFields": [
        {
            "fieldName": "string",
            "label": "string",
            "authenticated": "boolean"
        }
    ],
    
}

Example Model

Here is an example of a model object:

{
    "id": "12345",
    "cssClass": "product-highlight",
    "additionalFields": [
        {
            "fieldName": "brand",
            "label": "Brand",
            "authenticated": false
        },
        {
            "fieldName": "category",
            "label": "Category",
            "authenticated": false
        }
    ],
    
}

Component Structure

The component consists of several key sections:

Product Gallery: Displays images of the product using Swiper for carousel functionality.

Product Details: Shows the product title, SKU, additional fields, price, and stock availability.

Quantity Selector: Allows users to select the quantity of the product they wish to purchase.

Add to Cart Button: Adds the selected product and quantity to the cart.

Add to List Modal: Allows users to add the product to a shopping list.

HTML Template

Functionality

Swiper Integration: Handles image carousel for both side images and main images.

Quantity Selection: Allows users to select the quantity of the product they want to purchase.

Add to Cart: Functionality for adding the product to the shopping cart.

Add to List: Opens a modal to add the product to a shopping list.

Methods

_getNoImageUrl(): Returns the URL of a placeholder image if no product images are available.

_formatPrice(price): Formats the price value for display.

_findMinimum(minOrderQuantity, orderQuantityStep): Calculates the minimum order quantity based on the given step and minimum order quantity.

_onQuantityChange(quantity, productData): Handles quantity changes in the input field.

_addToCart(variant): Adds the selected product variant to the shopping cart.

_openModalAddToList(variant): Opens the modal to add the product to a shopping list.

_getBadges(productData): Returns badges or tags related to the product based on its additional features.

Localization

Product Add to Cart: {{this.$t('product-add-to-cart')}}

Product Add to List: {{this.$t('product-add-to-list')}}

Notes

Ensure Swiper is properly initialized in the Vue component.

Validate the presence of model data before rendering to avoid errors.

Adjust styles and class names according to the project's design system.

This documentation provides a comprehensive overview of the Product Single Component's functionality and structure, ensuring ease of integration and usage in Vue.js-based e-commerce platforms.

Product Single

Product Single Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

Functionality#

Methods#

Localization#

Notes#