README

Magento已经支持ESI块，这将添加一种简单的方法来替换页面重量大或速度慢的块，并且可以异步加载而无需太多麻烦。

安装

composer require elgentos/magento2-clientside-cache
bin/magento setup:upgrade

使用方法

最简单的方法是在原始块周围添加<block class="Elgentos\ClientsideCache\Block\Async" />，并使用正确的别名as=""，这样原始块就知道要获取哪个getChildHtml。

layout/LAYOUT_HANDLE.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

        <!-- Just add the wrapper around the original block -->
        <block class="Elgentos\ClientsideCache\Block\Async" as="moved-the-alias-name-to-here">
            <block name="heavy-block-name" template="Magento_HeavySlowThingy::path/to/file.phtml"/>
        </block>

        <!-- Or if you have something existing which you don't want to touch or can the original XML -->

        <!-- Create a wrapper block -->
        <block name="topmenu_mobile-replacement" class="Elgentos\ClientsideCache\Block\Async"/>
        <!-- Move the replacement into the orignal location, use before original block name when working with containers or as when working with blocks -->
        <move element="topmenu_mobile-replacement" destination="topmenu_generic" before="topmenu_mobile"
              as="topmenu.mobile"/>
        <!-- Move the heavy block into into the wrapper -->
        <move element="topmenu_mobile" destination="topmenu_mobile-replacement"/>
    </body>
</page>

限制处理程序

您可以在Async包装器内限制处理程序。这增加了重新使用请求的可能性。一个例子是每个页面上都相同的菜单。

layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- This will only use the default handle -->
        <block class="Elgentos\ClientsideCache\Block\Async" as="moved-the-alias-name-to-here">
            <argument name="handles" xsi:type="array">
                <item name="default" xsi:type="string">default</item>
            </argument>
        </block>
    </body>
</page>

功能

异步获取内容
将类似处理程序的请求分组为单个请求
评估JavaScript

JavaScript

如果您想确保您的全局函数或对象可用，您需要确保将它们分配给全局范围。以下是一些示例；

<script>
const someFunction = () => {};
// add
window.someFunction = someFunction;

// and for functions
function helloWorld() {}
// add
window.helloWorld = helloWorld;
</script>

自定义集成

还可以进行自定义集成。

使用clientsideCacheAsync，它将返回一个Promise，并提供一个包含您请求的所有块的object。

clientsideCacheAsync(['block_name', 'other_block'], ['default', 'catalog_category_view']).then(results => console.log(results))
// {block_name: "", "other_block": ""}
clientsideCacheAsync(['another_block'], ['default', 'catalog_category_view']).then(results => console.log(results))
// {another_block: ""}

特别感谢

该模块是在科隆Mage Unconference之前举办的Hackathon期间创建的。Mage Unconference in Cologne。感谢组织者举办了一场精彩的会议和Hackathon。

作者

Jeroen Boersma

elgentos / magento2-clientside-cache

维护者

详情