Overview#
The RelatedProducts
component is a component designed to display a carousel of related products. This component allows users to view and interact with a list of products that are related to a specific item, enhancing the shopping experience by showcasing additional options. It includes functionalities for handling product data, displaying products in a carousel, and managing user interactions.Model Documentation#
Model Structure#
The RelatedProducts
component relies on a data model that includes:componentId
: The unique ID for the component.
carouselId
: The ID for the carousel element, derived from componentId
.
filter
: A filter string used to fetch products based on criteria.
defaultVariant
: The default product variant used in related product queries.
relatedProducts
: An array of related product objects.
hasRelatedProducts
: A boolean indicating whether there are related products to display.
flag
: A boolean flag for carousel initialization control.
lists
: Additional list-related data (not used in the current implementation).
isUserLoggedIn
: A boolean indicating whether the user is logged in.
loadingKey
: A key used to track loading states for adding products to the cart.
Example Model#
Here's a sample model configuration:Component Structure#
The RelatedProducts
component consists of the following parts:1.
HTML Template: Defines the structure of the related products section and carousel.
2.
JavaScript: Contains logic for fetching products, managing state, and handling user interactions.
3.
Methods: Includes functionality for adding products to the cart, initializing the carousel, and processing product data.
4.
Lifecycle Hooks: Handles component initialization and updates.
5.
Computed Properties: (Not utilized in this component but reserved for future enhancements.)
HTML Template#
The HTML template defines the layout of the related products section. It includes:Section Container: A container with conditional classes and ID for the component.
Header: Displays the section header if provided.
Carousel: A carousel element for displaying related products.
Product List Items: Iterates over relatedProducts
to render each product using the productlistitem
component.
Here's the relevant part of the HTML template:JavaScript#
The JavaScript section contains the logic for the RelatedProducts
component. It includes:Data Properties: Define initial values and states for the component.
addToCart(product, i)
: Adds a product to the cart and handles loading state.
isLoading(i)
: Checks if a specific product is in the loading state.
calculateCurrency(price)
: Formats the product price.
hasDiscount(price, initialPrice)
: Determines if a product has a discount.
getImageLink(imageLink)
: Returns the product image link or a placeholder if not available.
carouselInitialization()
: Initializes the carousel with custom options.
getAlignmentClass(alignment)
: Returns alignment classes based on the provided alignment value.
fetchRelatedProducts()
: Fetches related products based on the association type.
processRelatedProducts(e)
: Processes and updates the list of related products.
filterAndProcessRelatedProducts(e)
: Filters and processes products based on specific criteria.
processProductVariants(p)
: Processes product variants to set initial quantities and units.
Here's the relevant JavaScript code:Explanation#
Data Properties: Initialize the component state and track related products, loading status, and user authentication.
Methods: Handle various functionalities including adding products to the cart, calculating currency, checking for discounts, fetching related products, and initializing the carousel.
Lifecycle Hooks: mounted()
to fetch related products, updated()
to initialize the carousel when related products are available.
Carousel Initialization: Uses the tiny-slider
library for creating a responsive carousel with various options.
Usage#
To use the RelatedProducts
component, register it with your Vue application and include it in your template. Pass the necessary model
data to configure the component.Modified at 2024-08-27 10:25:08