Magento 2如何使用Observer实现缓存后动态修改产品数据

Magento 2 开启全页缓存（FPC）后，产品页面首次渲染生成的完整HTML会被存储到缓存中，后续请求直接返回缓存内容，不会触发产品加载、控制器渲染相关的核心流程，因此catalog_product_load_after、catalog_controller_product_view这类仅在页面生成阶段触发的事件只会在首次未缓存时执行，缓存生效后不会被调用。

方案1：前端Ajax动态拉取数据（推荐，实现成本最低） #

不需要改动缓存逻辑，直接在前端加载后异步请求接口拉取API数据，替换页面上对应的属性展示内容，步骤如下：

• 在产品页的前端模板中添加自定义JS，监听页面加载完成事件
• 自定义一个无缓存的控制器接口，接收产品ID参数，调用第三方API获取需要的属性值后返回
• JS拿到返回值后直接覆盖页面中对应属性的DOM节点内容

优势：无需修改Magento缓存规则，不会降低全页缓存的性能收益，API请求失败也不会影响主页面正常加载

方案2：使用缓存穿孔（Hole Punch）保留动态区块 #

如果需要属性内容在页面首次返回时就渲染完成，不需要前端异步替换，可以通过Magento的缓存穿孔机制，给需要动态渲染的属性区块单独设置不缓存，步骤如下：

1. 先创建一个自定义Block，用于渲染你需要动态修改的产品属性内容，在Block的_construct方法中设置缓存生命周期为0，同时传入唯一的缓存标识参数（比如产品ID）：

protected function _construct()
{
    parent::_construct();
    $this->addData([
        'cache_lifetime' => 0,
        'cache_tags' => ['YOUR_CUSTOM_TAG_' . $this->getProduct()->getId()],
    ]);
}

2. 在etc/frontend/di.xml中为该Block配置缓存穿孔：

<type name="Magento\Framework\App\Cache\Type\Block">
    <arguments>
        <argument name="allowed_tags" xsi:type="array">
            <item name="your_custom_tag" xsi:type="string">YOUR_CUSTOM_TAG_*</item>
        </argument>
    </arguments>
</type>
<type name="Magento\PageCache\Model\Layout\LayoutPlugin">
    <arguments>
        <argument name="ignoredBlocks" xsi:type="array">
            <item name="your.custom.block.name" xsi:type="string">Your\Module\Block\Product\DynamicAttribute</item>
        </argument>
    </arguments>
</type>

3. 在Block的_toHtml方法中实现调用API、覆盖产品属性的逻辑，再输出渲染后的内容
4. 把原产品页模板中对应属性的渲染部分替换为你自定义的Block调用

注意：该方案会让对应区块每次请求都重新渲染，不要用在逻辑过重的场景，避免影响页面加载性能

内容的提问来源于stack exchange，提问作者Henry Johnson