Search Component Documentation

Overview

The Search component is a component designed to provide a search interface for products or items. It includes a search bar where users can input search terms, and dynamically displays search results with pagination controls. The component manages search queries, displays results with images and titles, and handles pagination and loading states.

Model Documentation

Model Structure

The Search component relies on a data model that includes:

model: The component's configuration object.

timerId: Identifier for the debounce timer used in the search functionality.

filterData: Array holding the search results.

SearchText: The current search query entered by the user.

url: The current URL, used for search state management.

pageSize: Number of items displayed per page in the search results.

currentPage: The current page number in the search results.

isLoading: Boolean indicating whether the search results are currently being loaded.

Example Model

Here's a sample model configuration:

Component Structure

The Search component consists of the following parts:

HTML Template: Defines the layout of the search section, including the search input field, result display, and pagination controls.

JavaScript: Contains logic for handling search functionality, loading states, and pagination.

Methods: Includes functions for searching, managing pagination, and handling UI updates.

Computed Properties: Provides reactive calculations for pagination controls.

HTML Template

The HTML template defines the structure of the search component. It includes:

Search Input: An input field for entering search queries and a search icon.

Loading State: Displayed when search results are being fetched.

No Results State: Displayed when no search results are found.

Search Results: Displays a list of products that match the search query.

Pagination Controls: Allows users to navigate between pages of search results.

Here’s the HTML template for the search component:

JavaScript

The JavaScript part of the Search component handles the logic for searching and pagination.

Component Definition

Explanation

Props: The component accepts a model object that provides configuration details such as sorting order.

Data: Manages internal state, including search text, filter data, loading status, and pagination settings.

Methods:

getUrlParam: Retrieves and sets the search query from URL parameters.

delayedSearch: Handles search input with a debounce mechanism to reduce the number of search requests.

Search: Executes the search operation and updates results.

sendFilterRequest: Manages pagination by updating the current page and re-fetching results.

Computed Properties: Calculate pagination visibility and state, such as showing the next or previous page links.

Usage

To use the Search component, include it in your Vue application and provide a model configuration. Here’s how you can incorporate it into your template:

Example of Model Data

This setup allows the Search component to display a functional search interface with results and pagination controls. Ensure that your application includes methods like _findProductsByTitle and _addToCartAsync to handle data fetching and cart operations.

Search

Search Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Component Definition#

Explanation#

Usage#

Example of Model Data#