README

概述

Magento 2 模块，可添加可重复使用的模态组件，可使用布局 XML 参数进行配置。

注意：此模块被创建为一个示例，以支持在 Mage Titans MCR 2018 上提出的演讲《提升你的布局》的演讲，但基于实际应用实现。

功能

• 利用 Magento 的 模态 jQuery 小部件
• 通过布局 XML 促进模态组件的创建，可通过传递参数进行配置
• 配置选项包括：链接文本、模态标题、模态类型等。 点击此处 查看参数的完整列表
• 模态内容必须作为一个或多个子块通过布局 XML 传递

用法

要创建模态组件，您需要创建一个使用 Fisheye\Modal\Block\Modal 作为类和 Fisheye_Modal::modal.phtml 作为模板的块。从 arguments.csv 传递所需和可选参数以及包含您内容的子块。

以下示例展示了如何将块添加到产品页面（注意：这需要在具有 catalog_product_view.xml 处理的布局文件中）下的“添加到愿望单”和“比较”链接等。

通过参数传递所需的 linkText 值以及模态打开后显示的 modalTitle，并将 CMS 块添加为子块以作为模态内容。

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

兼容性

• Magento 开源 / 商业版 2.2.x
• 支持 Magento 2 全页缓存（包括 Varnish）

安装

composer require fisheye/module-modal
php bin/magento module:enable Fisheye_Modal
php bin/magento setup:upgrade

贡献

欢迎问题、分支和拉取请求 :)