Search Bar

<sw-search-bar>

ready
Renders the search bar. This component uses the search service to find entities in the administration.

Component properties

Property name Type Default
initialSearchType String
typeSearchAlwaysInContainer Boolean false
placeholder String
initialSearch String

Methods

Method name Parameters
createdComponent No parameters
destroyedComponent No parameters
registerListener No parameters
getLabelSearchType type
setFocus No parameters
closeOnClickOutside event
clearSearchTerm No parameters
onFocusInput No parameters
onBlur No parameters
showSearchBar No parameters
hideSearchBar No parameters
showSearchFieldOnLargerViewports No parameters
onSearchTermChange No parameters
showTypeContainer No parameters
filterTypeSelectResults term
onClickType type
setSearchType type
toggleOffCanvas No parameters
resetSearchType No parameters
doListSearch No parameters
doListSearchWithContainer No parameters
doGlobalSearch No parameters
loadResults searchTerm
loadTypeSearchResults searchTerm
setActiveResultPosition
emitActiveResultPosition No parameters
navigateLeftResults No parameters
navigateRightResults No parameters
navigateUpResults No parameters
navigateDownResults No parameters
checkScrollPosition No parameters
onKeyUpEnter No parameters
getSearchTypeProperty entityName propertyName
getEntityIconName entityName
getEntityIconColor entityName
isResultEmpty No parameters
onMouseEnterSearchType index

Imports

  • ./sw-search-bar.html.twig
  • ./sw-search-bar.scss

Watcher

Inject

  • searchService
  • searchTypeService

SASS variables

Variable name Value
$sw-search-bar-border-color $color-steam-cloud ($color-gray-300)
$sw-search-bar-background-color $color-white (#FFF)
$sw-search-bar-results-background-color $color-white (#FFF)
$sw-search-bar-border-radius $border-radius-default (4px)
$sw-search-bar-results-box-shadow 0 3px 6px 0 rgba(120, 138, 155, 0.3)
$sw-search-bar-results-z-index 800
$sw-search-bar-types-z-index 900
$sw-search-bar-z-index $z-index-search-bar-results (800)
$sw-search-bar-button-color-text $color-white (#FFF)
$sw-search-bar-mobile-box-shadow 0 3px 3px rgba(0, 0, 0, 0.3)
$sw-search-bar-result-color-icon darken($color-light-gray, 20%)
$sw-search-bar-types-item-hover-color-background lighten($color-shopware-blue, 40%)
$sw-search-bar-types-item-border-radius $border-radius-default (4px)

Twig blocks

  • sw_search_bar_button_off_canvas_toggle
  • sw_search_bar_version_display
  • sw_search_bar_button_search
  • sw_search_bar_mobile_controls
  • sw_search_bar_type
  • sw_search_bar_slot_input
  • sw_search_bar_input
  • sw_search_bar_icon
  • sw_search_bar_field
  • sw_search_bar_results_empty_state
  • sw_search_bar_results_list_column_header
  • sw_search_bar_results_list_column
  • sw_search_bar_results_list
  • sw_search_bar_results_empty_icon
  • sw_search_bar_results_empty_text
  • sw_search_bar_results_empty
  • sw_search_bar_results
  • sw_search_bar_types_container_empty_text
  • sw_search_bar_types_container_empty
  • sw_search_bar_types_container_tip
  • sw_search_bar_types_container
  • sw_search_bar_container
  • sw_search_bar

Slots

  • search-input