Coupling element visibility to components

The visibility attribute links the visibility of any HTML element with the visibility of a component. If the referenced component is shown or hidden, the element follows automatically - or, with :inverse, shows the opposite. A typical use case is showing/hiding headings, tab buttons, or container areas depending on ws-search-result. The attribute can be set on any HTML element.

Prerequisite

JavaScript bundle ws-search-component-x.x.x.js from version 1.9.1

Syntax

In the following notations, component stands for the name of the referenced component, source for a single source of a multi-source component, and name for the name of a filter:

Notation	Behavior
`visibility="component"`	Element follows the visibility state of the component.
`visibility="component:inverse"`	Element shows the opposite: visible when the component is hidden.
`visibility="component-source"`	For multi-source components, a single source is referenced, for example `ws-search-result-product`.
`visibility="ws-filter-name"`	For filters, the filter name is referenced, for example `ws-filter-brand`.

Available as component references are: ws-search-result, ws-suggest-result, and ws-filter.

Examples

ws-search-result

<div visibility="ws-search-result">
  Is shown when a ws-search-result is visible
</div>

<div visibility="ws-search-result:inverse">
  Is shown when all ws-search-result are hidden
</div>

<div visibility="ws-search-result-product">
  Is shown when ws-search-result[source="product"] is visible
</div>

<div visibility="ws-search-result-product:inverse">
  Is shown when ws-search-result[source="product"] is hidden
</div>

ws-suggest-result The use with ws-suggest-result works analogously to ws-search-result, for example visibility="ws-suggest-result-category". ws-filter

<div visibility="ws-filter-brand">
  Is shown when ws-filter[name="brand"] is visible
</div>

<div visibility="ws-filter-brand:inverse">
  Is shown when ws-filter[name="brand"] is hidden
</div>

If visibility refers to a component with multiple sources (for example visibility="ws-search-result" without a source suffix), the following applies: The element is visible when at least one source is visible, and is only hidden when all sources are hidden.

Superseded attributes and workarounds

visibility replaces the previous mechanisms for controlling visibility. These continue to work but should no longer be used in new projects:

hide-with (deprecated): behaves like visibility="component", but does not support :inverse.
filter-container and suggest-container: workarounds that are replaced by visibility but remain usable.

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

Coupling element visibility to components

Prerequisite

Syntax

Examples

Superseded attributes and workarounds

​Prerequisite

​Syntax

​Examples

​Superseded attributes and workarounds

Prerequisite

Syntax

Examples

Superseded attributes and workarounds