Storefront plugins and helper
This is a list of available javascript plugins and helpers that can be used and extended.
Plugins
| Plugin | Description | Notes |
|---|---|---|
AccountGuestAbortButtonPlugin | Used on the logout button to fire a guest-logout event after logging out from a guest session. | --- |
AddToCartPlugin | Submits the form that adds a product to the cart and opens the OffCanvasCart. E.g., used on product buy buttons. | --- |
AddToWishlistPlugin | Adds or removes a product from the wishlist and toggles the indicator (heart icon) that displays if the current product is on the wishlist. Also updates the wishlist counter in the main header. | --- |
AddressEditorPlugin | Opens a modal to edit the billing or shipping address. | --- |
AjaxModalPlugin | This class extends the Bootstrap modal functionality by adding an event listener to modal triggers that contain a special "data-url" attribute which is needed to load the modal content by AJAX. | --- |
BaseSliderPlugin | Provides basic slider functionality to a container with sliding elements. Uses the "tiny-slider" framework in the background. | --- |
BaseWishlistStoragePlugin | Provides basic storage logic to add, remove and get products from the wishlist. Used by the local storage wishlist (if user is guest) and the persisted wishlist (if used is logged in). | --- |
BasicCaptchaPlugin | Provides the JS functionality for the basic captcha that can be activated in storefront sales channel. Only works with a corresponding form. | --- |
BuyBoxPlugin | Refreshes the buy box area on the product detail page after switching to a different product variant. Re-initializes the tax info modal. | --- |
CartWidgetPlugin | Controls the cart widget in the main header that displays the total cart amount. Updates automatically if a product is added to the cart. | --- |
ClearInputPlugin | Adds clear functionality to input fields. | --- |
CmsGdprVideoElement | Shows a consent overlay before rendering an external CMS video element, e.g. from YouTube. Only when the user provides consent, the actual video will be loaded. | --- |
CollapseCheckoutConfirmMethodsPlugin | Displays a "show more" button when too many shipping or payment methods are shown. Used on the checkout page. | --- |
CollapseFooterColumnsPlugin | Enables collapsing containers (accordion) on mobile viewports for the columns in the page footer. | --- |
CookieConfiguration | Controls the detailed cookie configuration (displayed in an OffCanvas). Displays the available cookies with checkboxes and saves the selected user preference. | --- |
CookiePermissionPlugin | Controls the cookie banner at the bottom of the page when no cookie preference is set. Can either save a preference directly via button or open the cookie configuration OffCanvas. | --- |
CountryStateSelectPlugin | Renders an additional select box with country states (e.g. "North-Rhine-Westphalia") if a country was selected. E.g., used in the registration form. | --- |
CrossSellingPlugin | Used to re-initialize the product sliders when toggling between different cross-selling tabs that contain product sliders. | --- |
DateFormat | This plugin formats a date and converts it to the local timezone if the data attribute date-format is set. | --- |
DatePickerPlugin | Controls the date picker component. Shows a datepicker UI when applied to an input field. | --- |
EllipsisPlugin | Used to expand or shrink a text. | Deprecated and removed in v6.6.0 |
FadingPlugin | Collapses or expands a Bootstrap collapse container with additional "more" or "less" links. | Deprecated and removed in v6.6.0 |
FilterBasePlugin | Provides basic functionality for a product listing filter. Communicates with the ListingPlugin. Other filters like "multi select" extend from this plugin class. | --- |
FlyoutMenuPlugin | This Plugin handles the subcategory display of the main navigation. | --- |
FormAddHistoryPlugin | Provides an API to push items into the browser history after a form was submitted. Only works on a <form> element. | --- |
FormAjaxSubmitPlugin | This plugin submits a form with ajax without reloading the page, instead of performing a regular form submit. | --- |
FormAutoSubmitPlugin | This plugin automatically submits a form, when the element or the form itself has changed. | --- |
FormCmsHandler | Sends forms from the CMS (e.g. contact form) via ajax and renders additional error/success messages. | --- |
FormFieldTogglePlugin | Provides functionality to display or hide additional form fields without reloading the page. E.g., used in the registration form when shipping and billing addresses are different. | --- |
FormPreserverPlugin | This plugin preserves a form, if the element or the form itself has changed. After a reload of the page the form is filled up with the stored values. | --- |
FormScrollToInvalidFieldPlugin | This plugin scrolls to invalid form fields when the form is submitted. | --- |
FormSubmitLoaderPlugin | This plugin shows a loading indicator on the form submit button when the form is submitted. | --- |
FormValidation | This plugin validates fields of a form. Also styles the field elements with the bootstrap style if enabled. | --- |
GoogleAnalyticsPlugin | Adds all events for Google Analytics and configures the gtag. Only used when "Analytics" is activated in the sales channel. | --- |
GoogleReCaptchaBasePlugin | Provides basic functionality to apply a Google reCAPTCHA to a <form> element. The JS-plugins for reCAPTCHA v2 and v3 extend this plugin. | --- |
GuestWishlistPagePlugin | Used on the /wishlist page/route to display the products currently on the wishlist. Displays wishlist items from local storage if the user is a guest. | --- |
ImageZoomPlugin | Enables functionality to zoom into an image, e.g. using the mouse wheel. Used inside the image zoom modal on the product detail page. Works together with ZoomModalPlugin. | --- |
ListingPlugin | Provides the filter functionality of the product listing. Gets the current values of each filter, current sorting and pagination. Generates the requests and displays the new results. | --- |
MagnifierPlugin | Handles the magnifier lens functionality on the detail page. | --- |
OffCanvasAccountMenu | Opens the account dropdown menu ("user avatar" icon in header) inside an OffCanvas on mobile viewports. | --- |
OffCanvasCartPlugin | Opens the shopping cart in an OffCanvas. Used on the shopping cart display in the main header. | --- |
OffCanvasFilter | Opens the listing filters inside an OffCanvas when the mobile "Filter" button is clicked. Only used on mobile viewports. | --- |
OffCanvasTabs | Used on mobile viewports to open or show contents in an OffCanvas that are shown in Bootstrap tabs on larger desktop viewports. E.g., used on the product detail page to open the reviews on mobile. | --- |
OffcanvasMenuPlugin | Displays the main category navigation inside an OffCanvas on mobile viewports. Triggered by the mobile "hamburger" menu icon. | --- |
QuantitySelectorPlugin | Enables functionality to select a product's quantity. Controls the increase (+) or decrease (-) buttons. E.g., used on the product detail page or in the checkout. | --- |
RatingSystemPlugin | Controls the rating stars when the user is writing a product review and lets the user select a star rating between 1 and 5. | --- |
RemoteClickPlugin | This plugin is used to remotely click on another element. | --- |
ScrollUpPlugin | Displays a small button with an "arrow up" icon to scroll back to the top of the page. Used on all pages and only displayed when the user has scrolled down the page. | --- |
SearchWidgetPlugin | Renders a dropdown with search result suggestions underneath the main headers search input field, as soon as the user starts to type a search term. | --- |
SetBrowserClassPlugin | Adds CSS classes to the <body> element depending on the current device, e.g. is-ipad. These classes can be used to add styling for a specific device category. | --- |
SpeculationRulesPlugin | If this javascript plugin is activated via Admin > Settings > System > Storefront, it adds speculation rules for the main navigation, the product listing and the header logo. | --- |
VariantSwitchPlugin | This plugin submits the variant form with the correct data option. Used on the product detail page to switch between product variants. | --- |
WishlistWidgetPlugin | Shows how many items are currently on the wishlist. Used by the wishlist "heart" icon inside the main header. | --- |
ZoomModalPlugin | Opens a full-screen modal window with an image gallery. Can contain multiple images that the user can zoom into. Used on the product detail page. | --- |
Helpers
| Helper | Description | Notes |
|---|---|---|
ArrowNavigationHelper | Helper to navigate between different items using the arrow keys. Used by SearchWidgetPlugin | --- |
CookieStorageHelper | Provides a nicer API to add or remove cookies. | --- |
DateFormatHelper | Wrapper helper to format a date string or object using Intl.DateTimeFormat | --- |
Debouncer | Wait for a defined amount of time. Basically a wrapper around setTimeout. | --- |
DeviceDetection | Returns information about the current device, e.g. if it is a touch device. | --- |
DomAccess | Helper function to access DOM elements in a unified way and improved error handling. | --- |
ElementReplaceHelper | Helper to replace a desired DOM element with another DOM element. | --- |
FeatureSingleton | Offers an API to check if specific feature flags are currently activated. | --- |
Iterator | Helper function to iterate over different data types in a unified way (array, objects etc.) | --- |
MemoryStorage | This class is mainly a fallback if the session, local or cookie storage fails. | --- |
NativeEventEmitter | Event Emitter which works with the provided DOM element. The class isn't meant to be extended. | --- |
StorageSingleton | Wrapper API that can use local, session or cookie storage in the background. | --- |
StringHelper | Provides different string formatters, e.g. converting into "UpperCamelCase" | --- |
ViewportDetection | Returns the currently active Bootstrap viewport, e.g. LG or XL | --- |
