UpSearch Plugin Overview

UpSearch Plugin is a frontend component for integrating UpSearch into your e-shop. The plugin is built with React.js and written in TypeScript.

Main Features

• Search and results display - Efficient processing and presentation of search results
• Search suggestions (Autocomplete) - Intelligent query suggestions for better user experience
• Result filtering - Advanced filtering options for refined search
• User interaction tracking - Integrated analytics tracking for monitoring user behavior

Components

The plugin consists of two main JavaScript components:

1. upSearchSuggest.js

Component for autocomplete/suggestions, typically placed in the header of all website pages. Displays search suggestions while typing.

2. upSearchResults.js

Component with complete search results (SERP), placed on a dedicated search results page.

info

Both components complement each other - upSearchSuggest expects a search results page to exist and links to it.

Technology Stack

• React.js - UI framework
• TypeScript - Typed JavaScript
• SCSS - Component styling
• Webpack - Build system
• Storybook - UI component development and documentation

Project Structure

src/
├── app/           # Application business logic
│   ├── api/       # API client (generated from OpenAPI)
│   ├── i18n/      # Internationalization
│   └── lib/       # Utilities and libraries
├── pages/         # Demo page HTML templates
├── styles/        # SCSS styles
│   ├── base/      # Base styles (variables, mixins)
│   ├── components/# Component styles
│   ├── core/      # Core UI elements (input, button)
│   └── layout/    # Layout styles
└── ui/            # React UI components

Analytics Tracking

The plugin automatically sends user interactions to PB Tracker. Tracked events include:

Event	Description
show_results	Display of results in autocomplete or SERP
hide	Closing autocomplete
addtocart	Adding product to cart
select	Clicking on a product

More information about tracking can be found in the Analytics section.