Related Products

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:

HTML Template: Defines the structure of the related products section and carousel.

JavaScript: Contains logic for fetching products, managing state, and handling user interactions.

Methods: Includes functionality for adding products to the cart, initializing the carousel, and processing product data.

Lifecycle Hooks: Handles component initialization and updates.

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.

Methods:

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.

Related Products Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#

Related Products Component Documentation