# JavaScript plugins

{% hint style="info" %}
**Note**: This article is work in progress.
{% endhint %}

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 Zeitstempelt 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.
* 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.
* Das Plugin wird nur registriert, wenn der Standard-Cookie-Hinweis von Shopware verwendet wird.
* Trigger: `data-cookie-permission`

#### 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® "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.
* 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® "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® "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**: Diese Plugin benötigt derzeit noch 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, wenn die Shopseite nach unten gescrollt wird.
* 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**: Diese Plugin benötigt derzeit noch jQuery.