Skip to content

Add bootstrap JS-plugin initialization utility to storefront JS

You are viewing the next version (v6.7) of the documentation.
Click here to switch to the stable version (v6.6), or use the version switcher on the left to navigate between versions.

Add bootstrap JS-plugin initialization utility to storefront JS

INFO

This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository. You can find the original version here

Context

  • Some Bootstrap JavaScript plugins have to be initialized manually to the desired DOM elements, see: https://getbootstrap.com/docs/4.3/components/tooltips/#example-enable-tooltips-everywhere
  • This is not needed for all Bootstrap plugins. Modals for example work out of the box without extra initialization.
  • Currently, we only initialize Tooltips using src/utility/tooltip/tooltip.util.js
  • On dynamic content changes (listing pagination, ajax OffCanvas cart, etc.) Bootstrap plugins like Tooltip are no longer working.
  • For example: It is not possible to show Tooltips in the OffCanvas cart without extra/manual work in JavaScript.

Decision

  • Add a new module src/utility/bootstrap/bootstrap.util in favor of TooltipUtil to consider more Bootstrap plugins in the future.
  • Currently, it initializes Tooltip and Popover because those are the only Bootstrap plugins which have a documented manual initialization.
  • We use the "selector" option in order to initialize Bootstrap plugins on selectors, which are added dynamically to the HTML. See: https://getbootstrap.com/docs/4.3/components/tooltips/#options

Consequences

  • In the main.js, BootstrapUtil.initBootstrapPlugins() is used instead of new TooltipUtil() to initialize Popovers as well.
  • TooltipUtil is deprecated.
  • Since we use event delegation ("selector" option) inside BootstrapUtil we don't need to manually re-initialize the Bootstrap plugins after dynamic content changes, so it works automatically for all [data-toogle="tooltip"] and [data-toogle="popover"] selectors.