Last Visited Products

Documentation: Last Visited Products Component

The Last Visited Products Component is a Vue.js component that displays a carousel of products that a user has recently visited. It provides a visually engaging way to showcase these products, leveraging a carousel for easy navigation.

Overview

The Last Visited Products Component dynamically renders a list of products that users have previously interacted with. It retrieves product data from local storage, processes it, and displays it in a responsive carousel layout. This component is particularly useful for e-commerce sites to remind users of their recent browsing history.

Model Documentation

The model object is used to configure the component's appearance and behavior.

Model Structure

id: String
A unique identifier for the component, used to set the id attribute of the carousel.

cssClass: String
Optional CSS class(es) for additional styling of the component.

header: String
The header text to be displayed at the top of the section.

alignment: Number
Determines the alignment of the header text. Possible values:

1 for left alignment

2 for center alignment

3 for right alignment

Example Model

{
  "id": "last-visited-products",
  "cssClass": "last-visited-products",
  "header": "Recently Viewed Products",
  "alignment": 2
}

Component Structure

The Last Visited Products Component consists of:

Header Section: Displays a title if provided in the model.

Carousel Container: A carousel element to showcase the products.

Product List Items: Individual product components rendered within the carousel.

HTML Template

The HTML template defines the layout and structure of the component:

JavaScript

The JavaScript code handles data retrieval, product processing, and carousel initialization.

Explanation

Data Handling: The component retrieves visited products from local storage and processes them to display in the carousel.

Product Processing: Products are fetched based on IDs stored in local storage. Additional data (e.g., units) is also retrieved if necessary.

Carousel Initialization: The component initializes the carousel using the tns library with customizable options and default settings.

Responsive Carousel: The carousel is configured to adapt to different screen sizes, showing a varying number of items per view.

Usage

To integrate the Last Visited Products Component into your Vue.js application:

Include the Component: Register lastvisitedproductsdefault in your Vue app.

Provide the Model: Pass a configuration object to the component to define its appearance and behavior.

Initialize and Display: Ensure the component has access to the visited products data in local storage, and it will handle display and interaction automatically.

Last Visited Products

Documentation: Last Visited Products Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#