JavaScript-Plugins

ThemeWare® erweitert die Shopware Storefront um ein paar JavaScript-Plugins. Diese Plugins sind für verschiedene Funktionen nötig und werden nur geladen, sofern diese Funktionen konfiguriert bzw. genutzt werden.

ThemeWare® "Ankündigungsbanner" (twtAnnouncementBannerPlugin)

• Dieses Plugin speichert einen Zeitstempel im "localStorage" (Browser des Besuchers), wenn der ThemeWare® "Ankündigungsbanner" vom Besucher geschlossen wird.
• Der "Ankündigungsbanner" ist dann 12 Stunden lang nicht mehr sichtbar.
• Der Button zum Schließen erscheint nur, wenn der Besucher den Cookies zugestimmt hat.
• Beim Schließen sendet es das Event twtAnnouncementBanner/closed auf document. Die Header-Plugins berechnen ihre Positionen daraufhin neu.
• Das Plugin wird nur registriert, wenn der Standard-Cookie-Hinweis von Shopware verwendet wird und das "Ankündigungsbanner" mit "Lässt sich schließen" konfiguriert ist.
• Trigger: data-twt-announcement-banner="closable"

"CookiePermission" (twtCookiePermission)

• Dieses Plugin überschreibt die Funktion "_setBodyPadding" vom JS-Plugin "CookiePermission" von Shopware um das Body-Padding an den konfigurierbaren Cookie-Hinweis anzupassen.
• In den Modal-Darstellungen setzt es beim Öffnen den Tastaturfokus in den Cookie-Hinweis. Von dort erreicht der erste Tabdruck den Link und die Buttons. Auf der Datenschutzseite bleibt der Fokus auf der Seite, damit sie gelesen werden kann.
• Das Plugin wird nur registriert, wenn der Standard-Cookie-Hinweis von Shopware verwendet wird und eine andere Darstellungsart als "Banner: unten (Standard)" gewählt ist. Mit "Banner: unten (Standard)" läuft das Original-Plugin von Shopware unverändert.
• Trigger: data-cookie-permission

ThemeWare® "Konfigurator-Tooltip" (twtConfiguratorTooltip)

• Dieses Plugin zeigt den Namen einer Varianten-Option im Konfigurator der Produktseite als Tooltip.
• Mit der Maus erscheint der Tooltip nur auf Geräten mit echtem Hover, auf Touch-Geräten erscheint keiner. Per Tastatur erscheint er beim Fokus auf die Option.
• Das Plugin wird nur registriert, wenn im Konfigurator eine ThemeWare®-Darstellungsart aktiv ist.
• Trigger: data-twt-configurator-tooltip

ThemeWare® "Countdown-Banner" (twtCountdownBannerPlugin)

• Dieses Plugin ist für den Countdown der ThemeWare® CMS "Countdown-Banner" zuständig.
• Das Plugin wird nur registriert, wenn ein "Countdown-Banner" in einer Erlebniswelt genutzt wird.
• Trigger: data-twt-countdown-banner

ThemeWare® "Floating-Widget" (twtFloatingWidget)

• Dieses Plugin ist für das ThemeWare® "Floating-Widget" zuständig.
• Es steuert die Funktion des Öffnen und Schließens und die Darstellung des Overlays.
• Zudem verhindert es, dass das Widget aus dem sichtbaren Bereich herausrutscht, wenn die Größe des Browserfensters geändert wird.
• Das Plugin wird nur registriert, wenn der "Floating-Widget" in der Theme-Konfiguration aktiviert wurde.
• Trigger: id="twt-floating-widget"

ThemeWare® "Vollbild-Suche" (twtFullscreenSearch)

• Dieses Plugin schließt die Vollbild-Suche, wenn der Tastaturfokus das Overlay verlässt.
• Beim Schließen setzt es den Fokus zurück auf den Such-Button im Header.
• Das Plugin wird nur registriert, wenn die Darstellungsart "Vollbild-Suche" in der Theme-Konfiguration aktiviert wurde.
• Trigger: data-twt-fullscreen-search

ThemeWare® "Full-Width Sticky-Header" (twtFullWidthStickyHeader)

• Dieses Plugin ist für den ThemeWare® "Full-Width Sticky-Header" zuständig.
• Es berechnet und positioniert diverse Header-Elemente, auch neu, nachdem der "Ankündigungsbanner" geschlossen wurde.
• Das Plugin wird nur registriert, wenn der "Full-Width Sticky-Header" in der Theme-Konfiguration aktiviert wurde.
• Trigger: data-twt-full-width-sticky-header

ThemeWare® "Hero-Slider" (twtHeroSliderPlugin)

• Dieses Plugin ist für die ThemeWare® CMS-Blöcke "Hero-Slider" zuständig.
• Es macht den Slider per Tastatur bedienbar und steuert bei aktiver automatischer Wiedergabe die Buttons "Pause" und "Abspielen".
• Das Plugin wird nur registriert, wenn ein "Hero-Slider" in einer Erlebniswelt genutzt wird.
• Trigger: data-twt-hero-slider

ThemeWare® "Bild-Parallax" (twtImageParallaxPlugin)

• Dieses Plugin bewegt das Bild eines Slides oder Präsentations-Teasers dezent entgegen der Mausbewegung.
• Auf Touch-Geräten und bei aktivierter Systemeinstellung "Bewegung reduzieren" wird es nicht ausgeführt.
• Das Plugin wird nur registriert, wenn ein Hero-Slide oder Präsentations-Teaser die Bild-Animation "Parallax" nutzt.
• Trigger: data-twt-image-parallax

ThemeWare® "Mobiler Sticky-Header" (twtMobileStickyHeader)

• Dieses Plugin positioniert die Flyout-Suche im fixierten mobilen Header.
• Das Plugin wird nur registriert, wenn der mobile Header in der Theme-Konfiguration fixiert wurde.
• Trigger: data-twt-mobile-sticky-header="2"
• Hinweis: Läuft ohne jQuery. Die bisherige jQuery-Version (twtMobileStickyHeaderJquery) lässt sich übergangsweise über Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Header-Skripte (Sticky-Navigation, Erlebniswelt-Header)" aktivieren, jQuery wird dafür automatisch geladen.

ThemeWare® "Mobiler Sticky-Header", jQuery-Version (twtMobileStickyHeaderJquery)

• Veraltete Version des Plugins "Mobiler Sticky-Header", benötigt jQuery.
• Trigger: data-twt-mobile-sticky-header="2" und data-twt-header-scripts="jquery"

ThemeWare® "Parallax-Banner" (twtParallaxBannerPlugin)

• Diese Plugin ist für den "Parallax-Effekt" in CMS-Bannern von ThemeWare® zuständig.
• Der Effekt kann in der Konfiguration der entsprechenden CMS-Elemente aktiviert werden.
• Das Plugin wird nur registriert, wenn ein CMS-Element die Klasse twt-parallax-banner hat.
• Trigger: class*="twt-parallax-banner"

ThemeWare® "Hover-Bild auf Touch-Geräten" (twtProductImageToggle)

• Dieses Plugin wechselt auf Touch-Geräten zwischen Cover-Bild und Hover-Bild einer Produkt-Box, wenn die Zeile mit den zwei Punkten unter dem Bild angetippt wird.
• Es setzt nur eine Klasse am Bild-Wrapper, die Animation selbst übernimmt das CSS. Ein Tipp auf das Bild öffnet weiterhin die Produktseite.
• Die Zeile mit den Punkten ist kein Tab-Stopp und wird von Screenreadern nicht vorgelesen, weil das Hover-Bild keine zusätzliche Information gegenüber dem Cover-Bild trägt.
• Das Plugin wird nur registriert, wenn der Hover-Effekt "Hover-Bild (Zusatzfeld)" und "Hover-Bild auf Touch-Geräten" aktiv sind und das Produkt ein Hover-Bild hat. Es wird erst geladen, wenn eine solche Produkt-Box auf der Seite ist.
• Trigger: data-twt-product-image-toggle

ThemeWare® "CSS-Scroll-Animationen" (twtScrollAnimation)

• Diese Plugin kümmert sich um die "CSS-Scroll-Animationen" für CMS-Blöcke.
• Die CSS-Scroll-Animationen können in der Theme-Konfiguration aktiviert werden.
• Das Plugin wird nur registriert, wenn ein CMS-Block die Klasse twt-cms-animation hat.
• Trigger: class*="twt-cms-animation"

ThemeWare® "Erlebniswelt-Header" (twtShoppingExperiencesHeader)

• Dieses Plugin ist für den ThemeWare® "Erlebniswelt-Header" zuständig.
• Es berechnet und positioniert diverse Header-Elemente damit diese die Erlebniswelt überlagern.
• Das Plugin wird nur registriert, wenn der "Erlebniswelt-Header" und der "Header 1.x" oder "Header 2.x" in der Theme-Konfiguration aktiviert wurden.
• Trigger: data-twt-shopping-experiences-header="true"
• Hinweis: Läuft ohne jQuery. Die bisherige jQuery-Version (twtShoppingExperiencesHeaderJquery) lässt sich übergangsweise über Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Header-Skripte (Sticky-Navigation, Erlebniswelt-Header)" aktivieren, jQuery wird dafür automatisch geladen.

ThemeWare® "Erlebniswelt-Header", jQuery-Version (twtShoppingExperiencesHeaderJquery)

• Veraltete Version des Plugins "Erlebniswelt-Header", benötigt jQuery.
• Trigger: data-twt-shopping-experiences-header="true" und data-twt-header-scripts="jquery"

ThemeWare® "Slideout-Communities" (twtSlideoutCommunities)

• Dieses Plugin ist für die ThemeWare® "Slideout-Communities" zuständig.
• Es verhindert, dass die Logos aus dem sichtbaren Bereich herausrutschen, wenn die Größe des Browserfensters geändert wird.
• Das Plugin wird nur registriert, wenn die "Slideout-Communities" in der Theme-Konfiguration aktiviert wurden.
• Trigger: id="twt-slideout-communities"

ThemeWare® "Sticky Top-Navigation" (twtStickyMainNavigation)

• Dieses Plugin ist für die ThemeWare® "Sticky Top-Navigation" zuständig.
• Es fixiert die Top-Navigation am oberen Browserrand, je nach Einstellung "Fixiert" beim Runter- oder beim Hochscrollen.
• Die Navigation gleitet herein und bei "fixieren beim hoch scrollen" auch wieder heraus. Solange sie mit Maus oder Tastatur benutzt wird, bleibt sie sichtbar. Fokussierte Elemente verschwinden nicht unter der fixierten Navigation. Bei aktivierter Systemeinstellung "Bewegung reduzieren" entfällt die Animation.
• Ändert sich der fixierte Zustand, sendet es das Event twtStickyNavMain/changed auf document, event.detail.sticky ist dann true oder false.
• Das Plugin wird nur registriert, wenn die "Sticky Top-Navigation" und der "Header 1.x" oder "Header 2.x" in der Theme-Konfiguration aktiviert wurden.
• Trigger: data-twt-sticky-header
• Hinweis: Läuft ohne jQuery. Die bisherige jQuery-Version (twtStickyMainNavigationJquery, ohne die Verbesserungen und ohne das Event) lässt sich übergangsweise über Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Header-Skripte (Sticky-Navigation, Erlebniswelt-Header)" aktivieren, jQuery wird dafür automatisch geladen.

ThemeWare® "Sticky Top-Navigation", jQuery-Version (twtStickyMainNavigationJquery)

• Veraltete Version des Plugins "Sticky Top-Navigation", benötigt jQuery.
• Trigger: data-twt-sticky-header und data-twt-header-scripts="jquery"

ThemeWare® "Dropdown-Navigation" (twtTopNavigationDropdown)

• Dieses Plugin erweitert das Bootstrap-Dropdown der Top-Navigation um das Öffnen per Hover und eine vollständige Tastaturbedienung.
• Liegt ein Menüpunkt zu nah am Rand des Browserfensters, richtet es die Untermenüs neu aus.
• Das Plugin wird nur registriert, wenn die Darstellung "Dropdown" aktiv ist, global oder per Zusatzfeld der Kategorie.
• Trigger: data-top-navigation-dropdown

ThemeWare® "Flyout-Navigation" (twtTopNavigationFlyout)

• Dieses Plugin öffnet das passende Flyout der Top-Navigation per Hover, Touch oder Klick.
• Es sorgt für eine vollständige Tastaturbedienung und begrenzt die Höhe des Flyouts auf den sichtbaren Bereich.
• Das Plugin wird nur registriert, wenn die Darstellung "ThemeWare® Flyout" oder "ThemeWare® Cards" aktiv ist, global oder per Zusatzfeld der Kategorie.
• Trigger: data-top-navigation-flyout

ThemeWare® "Flyout mit Sidebar" (twtTopNavigationSidebar)

• Dieses Plugin steuert das Flyout mit Sidebar: links die Unterkategorien, rechts der Inhalt der jeweils aktiven Unterkategorie.
• Per Tastatur wechseln Pfeil hoch und runter (sowie Pos1 und Ende) die Unterkategorie, Pfeil rechts springt in den Inhalt, Pfeil links zurück.
• Auf Touch-Geräten öffnet der erste Tap auf eine Unterkategorie mit weiteren Unterkategorien nur deren Inhalt, der zweite Tap führt zur Kategorie. Mit Maus und Tastatur führt ein Klick direkt zur Kategorie.
• Das Plugin wird nur registriert, wenn die "Flyout mit Sidebar"-Navigation aktiv ist, global oder per Zusatzfeld der Kategorie.
• Trigger: data-top-navigation-sidebar