Storefront Search¶

This webcomponent allows to perform a search for products with a given query.

Attributes¶

Attribute name	Type	Default	Description
`module-instance-id` (optional)	number	number	-
`locale` (optional)	string	-	A custom locale allowing to manually set in which language the products should display if needed
`settings` (optional)	object	-	Settings which tell the webcomponent in which form should the results be displayed

Settings attribute¶

Attribute name	Type	Default	Description
`settings.isSearchSuggestLayerEnabled` (optional)	boolean	false	If set to `true` the search suggester will be displayed
`settings.isNamesShorteningEnabled` (optional)	boolean	false	If set to `true` the names will be shortened to 28 characters after which three dots will be displayed
`settings.isLoadingMoreSearchResultsEnabled` (optional)	boolean	false	If set to `true` the button allowing to search more results will be displayed
`settings.showProductRate` (optional)	boolean	false	If set to `true` the rating of each found product will be displayed
`settings.showProductAvailability` (optional)	boolean	false	If set to `true` the availability of each found product will be displayed
`settings.showProductPrice` (optional)	boolean	false	If set to `true` the price of each found product will be displayed

Example¶

sourceoutput

<h-storefront-search 
    module-instance-id="12"
    settings="{
        'isPhraseSuggestionsEnabled': true,
        'isSearchInCategoriesEnabled': true,
        'isSearchInProducersEnabled': true,
        'isSearchInProductsEnabled': true,
        'isSearchSuggestLayerEnabled': true,
    }"
    class="storefront-search"
></h-storefront-search>

<h-storefront-search 
    module-instance-id="12"
    settings="{
        'isPhraseSuggestionsEnabled': true,
        'isSearchInCategoriesEnabled': true,
        'isSearchInProducersEnabled': true,
        'isSearchInProductsEnabled': true,
        'isSearchSuggestLayerEnabled': true,
    }"
    class="storefront-search"
>
   <form action="/pl/s" method="post">
        <h-search
            settings="{
                isSearchSuggestLayerEnabled: true,
                isNamesShorteningEnabled: true,
                isSearchButtonPinnedOnMobile: true,
                isLoadingMoreSearchResultsEnabled: false,
                showProductRate: false,
                showProductAvailability: false,
                showProductPrice: false
            }"
            locale="pl_PL"
            module-instance-id="12"
            class="search"
        >
            <div class="search__bar">
                <h-search-close class="search__close" tabindex="0" role="button">
                    <svg class="icon icon_l icon_clickable">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-arrow-left"></use>
                    </svg>
                </h-search-close>

                <h-search-clear module-instance-id="12" aria-label="Wyczyść" tabindex="0" role="button">
                </h-search-clear>

                <h-search-input class="search__input" module-instance-id="12">
                    <input type="search" placeholder="Szukaj" name="search" autocomplete="off">
                </h-search-input>

                <h-search-submit class="search__submit" aria-label="Szukaj" tabindex="0" role="button">
                    <svg class="icon icon_clickable">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
                    </svg>
                </h-search-submit>
            </div>

            <div class="search__icon labeled-icon">
                <h-icon icon-name="icon-search" size="l">
                    <svg class="icon icon_l">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
                    </svg>
                </h-icon>

                <div class="labeled-icon__signature">Szukaj</div>
            </div>
        </h-search>
   </form>
</h-storefront-search>