salla-search

Store search. It shows a search box inside a modal, with live product results once three or more characters are typed (after a short pause), plus recent searches and popular searches before typing. Pressing Enter goes to the store's search results page. Use it in a theme header, either as a trigger (placeholder or inline) or as a bare modal that is opened from your own button.

Without placeholder or inline, only the modal is rendered. Open it by emitting the search::open event, for example salla.event.emit('search::open'). The component also emits these events through salla.event: salla-search::input.focused (first focus of the input), salla-search::product.clicked (payload { product, position }), salla-search::recommendation.clicked (payload { term, source }, where source is history, trending, suggestion or category) and Products Searched (payload { query, total }).

The input has a type of search. The back button and the remove button on each history item have an aria-label.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-search> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaSearch } from '@salla.sa/twilight-components-react/search';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaSearch } from '@salla.sa/twilight-components-react/search';

export function Example() {
  return (
    <SallaSearch placeholder oval height={48} />
  );
}

import { SallaSearch } from '@salla.sa/twilight-components-react/search';

export function Example() {
  return (
    <>
      <button onClick={() => salla.event.emit('search::open')}>Search</button>
      <SallaSearch />
    </>
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-search-product-card>, <salla-button>, <salla-modal>.