fisheye/module-modal

This package is abandoned and no longer maintained. No replacement package was suggested.

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

1.0.2 2018-11-10 00:03 UTC

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 :)