Search Component

Overview

The search componenet is a vue component that is used to search for products, categories using algolia search engine.

Search Component Directory Structure

├───components
│   ├───search
│   │   ├───collectButtons.vue
│   │   ├───deilveryButtons.vue
│   │   ├───Description.vue
│   │   ├───Filters.vue
│   │   ├───FunctionalWidgets.vue
│   │   ├───Hits.vue
│   │   ├───HubOptions.vue
│   │   ├───nextDayClickButton.vue
│   │   ├───PolyHierarchy.vue
│   │   ├───Search.vue
│   │   ├───SearchStock.vue
│   │   ├───SubDeptMenu.vue
│   │   ├───TwoHourButton.vue

Hits.vue

The Hits Vue component is a versatile product listing module for web pages. It efficiently renders product information, incorporating review stars, stock details, and add-to-cart buttons. Featuring mixins and helpers for common functionalities, the component dynamically adapts its layout based on window width, ensuring a responsive design. It supports interactions like saving products for later, and its robust structure facilitates seamless integration with Algolia for tracking. Additionally, it incorporates conditional rendering based on stock availability and adjusts its display based on user preferences, offering a comprehensive solution for product presentation and interaction on an e-commerce platform.

Component Overview

Components:

• AisHits, AisPagination: Handles hits (search results) and pagination.
• ExcludingVat: Displays VAT information.
• collectButton, deliveryButton, nextDayClickButton, TwoHourButton: Custom buttons.
• TwoHourAddress: Address component for two-hour delivery.

Methods:

• created: Forces a render on component creation.
• mounted: Executes after component mounting, sets up listeners, and triggers actions.
• watch: Listens for changes in "site" and "hits," refreshes stock information.
• Helper Methods:
  • buildAlt, transformItems, arraysEqual, setTitle : Handle product info and formatting.
• Interaction Methods:
  • seeVariations, saveForLater, scrollToProduct : Handle user interactions.

Computed Properties:

• reviewsEnabled: Checks if reviews are enabled.
• itemNameType: Utilizes a superscript helper for certain product name types.
• generateImgUrl: Generates dynamic WordPress image URLs.
• showDiscountBadge: Determines if the discount badge should be displayed.
• filterStock: Filters products based on stock availability.