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 ofTooltipUtil
to consider more Bootstrap plugins in the future. - Currently, it initializes
Tooltip
andPopover
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 ofnew 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.