https://github.com/edmondscommerce/magento2-disable-unavailable-elements
Disable elements while they're not ready to be interacted with
https://github.com/edmondscommerce/magento2-disable-unavailable-elements
Last synced: 23 days ago
JSON representation
Disable elements while they're not ready to be interacted with
- Host: GitHub
- URL: https://github.com/edmondscommerce/magento2-disable-unavailable-elements
- Owner: edmondscommerce
- Created: 2018-10-19T10:14:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-19T10:16:15.000Z (over 7 years ago)
- Last Synced: 2025-02-28T13:07:41.534Z (over 1 year ago)
- Language: CSS
- Size: 1.95 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Magento 2 Disable Unavailable Elements
## By [Edmonds Commerce](https://www.edmondscommerce.co.uk)
Prevents a user from clicking on page elements before they're fully loaded
### Default targets
The following elements are targeted by the module:
- Hamburger menu
- Header search icon
- Shop by button
- Category sorter
- Product add to cart form
- Cart discount block
- Cart proceed button
- Header language switcher
The overlay is applied as long as the `body` element does not have `aria-busy="false"`.
See `view/frontend/web/css/source/_module.less` for more details.
### Adding your own elements
Use these mixins in your theme to add elements to the list of items to be disabled during page load.
You can either use them as Less mixins, or add and remove these classes using Javascript.
- `.loading-disabled;` - This provides an indication that the item is loading
- `.loading-click-block;` - This adds a transparent overlay to prevent clicks