JavaScript plugins

ThemeWare® extends the Shopware storefront with a few JavaScript plugins. These plugins are needed for various features and are only loaded if these features are configured or used.

ThemeWare® "Announcement banner" (twtAnnouncementBannerPlugin)

• This plugin stores a timestamp in the "localStorage" (the visitor's browser) when the visitor closes the ThemeWare® "Announcement banner".
• The "Announcement banner" is then hidden for 12 hours.
• The close button only appears if the visitor has accepted the cookies.
• When closing, it dispatches the event twtAnnouncementBanner/closed on document. The header plugins then recalculate their positions.
• The plugin is only registered if Shopware's default cookie notice is used and the "Announcement banner" is configured as "closable".
• Trigger: data-twt-announcement-banner="closable"

"CookiePermission" (twtCookiePermission)

• This plugin overrides the function "_setBodyPadding" of Shopware's JS plugin "CookiePermission" to adjust the body padding to the configurable cookie notice.
• In the modal layouts, it moves the keyboard focus into the cookie notice when it opens. From there, the first tab reaches the link and the buttons. On the privacy page, the focus stays on the page so that it can be read.
• The plugin is only registered if Shopware's default cookie notice is used and a layout type other than "Banner: bottom (default)" is selected. With "Banner: bottom (default)", Shopware's original plugin runs unchanged.
• Trigger: data-cookie-permission

ThemeWare® "Configurator tooltip" (twtConfiguratorTooltip)

• This plugin shows the name of a variant option in the configurator of the product page as a tooltip.
• With the mouse, the tooltip only appears on devices with real hover, on touch devices none appears. With the keyboard, it appears when the option is focused.
• The plugin is only registered if a ThemeWare® layout type is active in the configurator.
• Trigger: data-twt-configurator-tooltip

ThemeWare® "Countdown banner" (twtCountdownBannerPlugin)

• This plugin handles the countdown of the ThemeWare® CMS "Countdown banner".
• The plugin is only registered if a "Countdown banner" is used in a shopping experience.
• Trigger: data-twt-countdown-banner

ThemeWare® "Floating widget" (twtFloatingWidget)

• This plugin handles the ThemeWare® "Floating widget".
• It controls opening and closing and the display of the overlay.
• It also prevents the widget from sliding out of the visible area when the browser window is resized.
• The plugin is only registered if the "Floating widget" is activated in the theme configuration.
• Trigger: id="twt-floating-widget"

ThemeWare® "Fullscreen search" (twtFullscreenSearch)

• This plugin closes the fullscreen search when the keyboard focus leaves the overlay.
• When closing, it moves the focus back to the search button in the header.
• The plugin is only registered if the layout type "Fullscreen search" is activated in the theme configuration.
• Trigger: data-twt-fullscreen-search

ThemeWare® "Full-width sticky header" (twtFullWidthStickyHeader)

• This plugin handles the ThemeWare® "Full-width sticky header".
• It calculates and positions various header elements, also again after the "Announcement banner" has been closed.
• The plugin is only registered if the "Full-width sticky header" is activated in the theme configuration.
• Trigger: data-twt-full-width-sticky-header

ThemeWare® "Hero slider" (twtHeroSliderPlugin)

• This plugin handles the ThemeWare® CMS blocks "Hero slider".
• It makes the slider operable with the keyboard and controls the "Pause" and "Play" buttons when autoplay is active.
• The plugin is only registered if a "Hero slider" is used in a shopping experience.
• Trigger: data-twt-hero-slider

ThemeWare® "Image parallax" (twtImageParallaxPlugin)

• This plugin gently moves the image of a slide or presentation teaser against the mouse movement.
• It does not run on touch devices or when the system setting "Reduce motion" is active.
• The plugin is only registered if a hero slide or presentation teaser uses the image animation "Parallax".
• Trigger: data-twt-image-parallax

ThemeWare® "Mobile sticky header" (twtMobileStickyHeader)

• This plugin positions the flyout search in the fixed mobile header.
• The plugin is only registered if the mobile header is set to fixed in the theme configuration.
• Trigger: data-twt-mobile-sticky-header="2"
• Note: Runs without jQuery. The previous jQuery version (twtMobileStickyHeaderJquery) can be enabled temporarily under tab "Others" => block "Compatibility (HC-Architecture®)" => section "Header" => "Header scripts (sticky navigation, Shopping Experiences Header)", jQuery is loaded automatically for it.

ThemeWare® "Mobile sticky header", jQuery version (twtMobileStickyHeaderJquery)

• Deprecated version of the plugin "Mobile sticky header", requires jQuery.
• Trigger: data-twt-mobile-sticky-header="2" and data-twt-header-scripts="jquery"

ThemeWare® "Parallax banner" (twtParallaxBannerPlugin)

• This plugin handles the "Parallax effect" in ThemeWare® CMS banners.
• The effect can be activated in the configuration of the corresponding CMS elements.
• The plugin is only registered if a CMS element has the class twt-parallax-banner.
• Trigger: class*="twt-parallax-banner"

ThemeWare® "Hover image on touch devices" (twtProductImageToggle)

• On touch devices, this plugin switches between the cover image and the hover image of a product box when the row with the two dots below the image is tapped.
• It only sets a class on the image wrapper, the animation itself is handled by CSS. A tap on the image still opens the product page.
• The row with the dots is not a tab stop and is not read out by screen readers, because the hover image carries no additional information compared to the cover image.
• The plugin is only registered if the hover effect "hover image (Custom field)" and "Hover image on touch devices" are active and the product has a hover image. It is only loaded once such a product box is on the page.
• Trigger: data-twt-product-image-toggle

ThemeWare® "CSS scroll animations" (twtScrollAnimation)

• This plugin handles the "CSS scroll animations" for CMS blocks.
• The CSS scroll animations can be activated in the theme configuration.
• The plugin is only registered if a CMS block has the class twt-cms-animation.
• Trigger: class*="twt-cms-animation"

ThemeWare® "Shopping experiences header" (twtShoppingExperiencesHeader)

• This plugin handles the ThemeWare® "Shopping experiences header".
• It calculates and positions various header elements so that they overlay the shopping experience.
• The plugin is only registered if the "Shopping experiences header" and "Header 1.x" or "Header 2.x" are activated in the theme configuration.
• Trigger: data-twt-shopping-experiences-header="true"
• Note: Runs without jQuery. The previous jQuery version (twtShoppingExperiencesHeaderJquery) can be enabled temporarily under tab "Others" => block "Compatibility (HC-Architecture®)" => section "Header" => "Header scripts (sticky navigation, Shopping Experiences Header)", jQuery is loaded automatically for it.

ThemeWare® "Shopping experiences header", jQuery version (twtShoppingExperiencesHeaderJquery)

• Deprecated version of the plugin "Shopping experiences header", requires jQuery.
• Trigger: data-twt-shopping-experiences-header="true" and data-twt-header-scripts="jquery"

ThemeWare® "Slideout communities" (twtSlideoutCommunities)

• This plugin handles the ThemeWare® "Slideout communities".
• It prevents the logos from sliding out of the visible area when the browser window is resized.
• The plugin is only registered if the "Slideout communities" are activated in the theme configuration.
• Trigger: id="twt-slideout-communities"

ThemeWare® "Sticky top navigation" (twtStickyMainNavigation)

• This plugin handles the ThemeWare® "Sticky top navigation".
• It fixes the top navigation to the top edge of the browser, depending on the setting "Fixed" when scrolling down or when scrolling up.
• The navigation slides in and, with "fixed when scroll up", also slides out again. It stays visible as long as it is used with the mouse or keyboard. Focused elements do not disappear below the fixed navigation. If the system setting "Reduce motion" is active, there is no animation.
• When the fixed state changes, it dispatches the event twtStickyNavMain/changed on document, event.detail.sticky is then true or false.
• The plugin is only registered if the "Sticky top navigation" and "Header 1.x" or "Header 2.x" are activated in the theme configuration.
• Trigger: data-twt-sticky-header
• Note: Runs without jQuery. The previous jQuery version (twtStickyMainNavigationJquery, without the improvements and without the event) can be enabled temporarily under tab "Others" => block "Compatibility (HC-Architecture®)" => section "Header" => "Header scripts (sticky navigation, Shopping Experiences Header)", jQuery is loaded automatically for it.

ThemeWare® "Sticky top navigation", jQuery version (twtStickyMainNavigationJquery)

• Deprecated version of the plugin "Sticky top navigation", requires jQuery.
• Trigger: data-twt-sticky-header and data-twt-header-scripts="jquery"

ThemeWare® "Dropdown navigation" (twtTopNavigationDropdown)

• This plugin extends the Bootstrap dropdown of the top navigation with opening on hover and full keyboard navigation.
• If a menu item is too close to the edge of the browser window, it re-aligns the submenus.
• The plugin is only registered if the "Dropdown" layout is active, globally or via the category's custom field.
• Trigger: data-top-navigation-dropdown

ThemeWare® "Flyout navigation" (twtTopNavigationFlyout)

• This plugin opens the matching flyout of the top navigation on hover, touch or click.
• It provides full keyboard navigation and limits the height of the flyout to the visible area.
• The plugin is only registered if the layout "ThemeWare® Flyout" or "ThemeWare® Cards" is active, globally or via the category's custom field.
• Trigger: data-top-navigation-flyout

ThemeWare® "Flyout with sidebar" (twtTopNavigationSidebar)

• This plugin controls the flyout with sidebar: the subcategories on the left, the content of the active subcategory on the right.
• With the keyboard, arrow up and down (as well as Home and End) switch the subcategory, arrow right jumps into the content, arrow left back.
• On touch devices, the first tap on a subcategory with further subcategories only opens its content, the second tap leads to the category. With mouse and keyboard, a click leads directly to the category.
• The plugin is only registered if the "Flyout with sidebar" navigation is active, globally or via the category's custom field.
• Trigger: data-top-navigation-sidebar