Components
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: 1.
Product Gallery : Displays images of the product using Swiper for carousel functionality.
2.
Product Details : Shows the product title, SKU, additional fields, price, and stock availability.
3.
Quantity Selector : Allows users to select the quantity of the product they wish to purchase.
4.
Add to Cart Button : Adds the selected product and quantity to the cart.
5.
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. Modified at 2024-08-27 10:15:48
