Carpose.de - Documentation
Carpose.de
  • React Integration
    • Getting Started
    • Demo
  • Car Search Modules
    • Car Search Form
    • Car Search Small
    • Car Search (KI)
    • Car Group
  • Offer Modules
    • Offer Slider
    • Offer Item
  • Misc Modules
    • Employee List
    • Store List
  • Components
    • Image Slider Viewer
    • 360° Interior Viewer
    • 360° Exterior Viewer
    • CO2 Class Label
    • Consumption Box
  • Angular Integration [DEPRECATED]
    • Getting Started
    • Slider
    • 360° Interior Viewer
    • 360° Exterior Viewer
Powered by GitBook
On this page
  • Overview
  • Installation
  • Usage
  • Configuration Attributes
  • Features
  • Example
  • Behavior
  • Integration with Other Components
  1. Car Search Modules

Car Search (KI)

Overview

The Intelligent Search component provides a natural language search interface for vehicles. It allows users to search for cars using conversational queries rather than structured filters, making it more intuitive and user-friendly.

Installation

The component is part of the Carpose application and requires no separate installation.

Usage

To use the Intelligent Search component in a standard HTML page:

<div 
  data-carpose-component="intelligent-search"
  data-api-key="your-api-key"
></div>

Configuration Attributes

The component reads configuration from data attributes on the provided element:

Attribute
Type
Default
Description

data-carpose-component

string

-

Identifies the component type, must be set to "intelligent-search"

data-api-key

string

-

API key for authentication with the Carpose backend services. Required for data fetching.

Features

  • Natural language search input for intuitive queries

  • Results displayed as car cards with vehicle details

  • Sorting options for search results:

    • Price (ascending/descending)

    • Mileage (ascending/descending)

    • Power (ascending/descending)

  • Pagination for navigating through search results

  • Loading indicators during search

  • "No results" message when no matching vehicles are found

  • Session storage persistence for search state (query, page, sorting)

Example

<div 
  data-carpose-component="intelligent-search"
  data-api-key="your-api-key"
></div>

Behavior

  1. Search Interface:

    • The component displays a prominent search input with a placeholder suggesting example queries.

    • Users can type natural language queries like "I'm looking for a city car" or "Show me SUVs with less than 50,000 km".

    • The search button triggers the query and displays loading indicators during the search process.

  2. Results Display:

    • Search results are displayed as car cards below the search interface.

    • Each car card shows key information about the vehicle.

    • A count of total matching vehicles is displayed above the results.

    • If no matching vehicles are found, a friendly message is displayed.

  3. Sorting and Pagination:

    • Once results are displayed, a sorting dropdown appears allowing users to sort by price, mileage, or power.

    • If there are more than 30 results, pagination controls appear at the bottom of the page.

    • Changing the sort order resets to the first page of results.

    • Clicking a pagination number fetches the corresponding page of results.

  4. State Persistence:

    • The component stores the current search query, page number, and sorting preference in session storage.

    • If the user leaves and returns to the page, their previous search state is restored.

    • This allows users to continue browsing from where they left off.

  5. Responsive Behavior:

    • The component adapts to different screen sizes.

    • On mobile devices, the sorting control appears above the results count for better usability.

Integration with Other Components

The Intelligent Search component uses the CarCard component to display search results, providing a consistent user experience across the application. When users click on a specific vehicle in the results, they are taken to the Car Detail view for that vehicle.

PreviousCar Search SmallNextCar Group

Last updated 6 days ago