fisheye / module-modal
A Magento 2 module that adds a reusable modal component that can be configured using layout XML arguments.
Installs: 2 748
Dependents: 0
Suggesters: 0
Security: 0
Stars: 10
Watchers: 2
Forks: 4
Open Issues: 1
Type:magento2-module
Requires
- magento/module-ui: ^101.0
This package is auto-updated.
Last update: 2023-11-10 12:01:07 UTC
README
Overview
A Magento 2 module that adds a reusable modal component that can be configured using layout XML arguments.
Note: this module was created as an example to support the talk 'Level up your layout' presented at Mage Titans MCR 2018, but is based on a real world implementation.
Features
- Utilises Magento's Modal jQuery widget
- Facilitates creation of modal components via layout XML which can be configured by passing arguments
- Configuration options include: link text, modal title, modal type and more. Click here a full list of arguments
- Content for modals must be passed in as one or more child blocks using layout XML
Usage
To create a modal component you need to create a block using Fisheye\Modal\Block\Modal
as the class and Fisheye_Modal::modal.phtml
as the template. Pass in the required and optional arguments from arguments.csv and a child block that contains your content.
An example below shows adding a a block to the product page (note: this would need to be in a layout file with the handle catalog_product_view.xml
) under the add to wishlist and compare links etc.
The required linkText
value as well as a modalTitle
for the modal to display once opened are passed in via arguments and a CMS block is added as a child block for the modal's content.
<referenceContainer name="product.info.main">
<block class="Fisheye\Modal\Block\Modal"
name="my.modal"
template="Fisheye_Modal::modal.phtml"
after="product.info.extrahint">
<arguments>
<argument name="linkText" translate="true" xsi:type="string">My link text to trigger modal</argument>
<argument name="modalTitle" translate="true" xsi:type="string">My modal title</argument>
</arguments>
<block class="Magento\Cms\Block\Block"
name="my.modal.content">
<arguments>
<argument name="block_id" xsi:type="string">my_cms_block_id</argument>
</arguments>
</block>
</block>
</referenceContainer>
Compatibility
- Magento Open Source / Commerce Edition 2.2.x
- Supports Magento 2 Full Page Cache (including Varnish)
Installation
composer require fisheye/module-modal
php bin/magento module:enable Fisheye_Modal
php bin/magento setup:upgrade
Contributing
Issues, forks and pull requests welcomed :)