Magento 2：同步后端和前端状态/缓存

14

Magento 2是否有任何系统或抽象来管理后端和前端上的本地存储之间的状态？

我正在尝试通过重定向URL移植用于恢复用户废弃的购物车的功能。以简化形式，URL类似

http://magento.example.com/restore/the/cart?identifier=sdkfjh48v237g5

会根据标识符中的编码quote_id将报价加载到当前用户的购物车中。

在Magento 1中，这相对简单-您只需要使用正确的报价ID更新用户的Checkout会话信息。但是，Magento 2加剧了本地存储的不足。

Magento 2前端javascript应用程序似乎在浏览器的本地存储数据库中缓存信息。这包括有关建造迷你车的信息。这意味着即使最终用户程序员（me）设法在后端更改会话Session ID，微型购物车仍会显示旧的购物车数据。

这只是一个问题的一个示例，该问题源于不了解（或拥有一个）用于管理后端和前端的应用程序状态的API。对于我的特定问题，我的端点渲染了一个包含一些JavaScript的HTML页面，手动清除了本地存储，然后将用户重定向到另一个页面-但这感觉像是一桩骇人的hack。

Magento 2中是否有API用于管理前端和后端之间的数据？

有一种向整个系统发出信号的标准方法，即在后端处理期间，您做了某些事情使得有必要使前端本地存储缓存无效？

有没有一种技术可以将新的RequireJS模块注入到自动运行的页面中，并且可以在其他JavaScript应用程序访问它之前操纵本地存储？

— 艾伦·斯托姆
source

嘿。亲爱的艾伦商店，您得到答案了吗？

— 阿米特·贝拉

@AmitBera还没有。

— 艾伦·风暴

6

我有一个类似的问题：我发送Ajax请求添加购物车后，希望刷新迷你购物车组件。

如果您仅记住一些要点，它实际上就可以很好地工作：

在模块的etc / frontend / sections.xml中，在Ajax调用之后声明需要更新哪些页面部分。
使用jQuery.post（）发送您的Ajax请求。它可能是POST或PUT请求，但不是GET。
而且必须通过jQuery而不是Prototype或Vanilla JS，因为它是jQuery的“ ajaxComplete”事件起着至关重要的作用。
在Ajax网址前加上基本网址（不要仅以/开头）

这是我的sections.xml（xyz是我们客户的名字）：

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="xyz-ajax/cart/add">
        <section name="cart"/>
    </action>
</config>

在此，“ xyz-ajax / cart / add”根据格式“ [frontName] / [ActionPath] / [ActionName]”。xml告诉Magento在ajax调用“ xyz-ajax / cart / add”完成后更新“购物车”。

这是我的模板（.phtml）代码：

<script type="text/javascript">
    require(['jquery', 'BigBridge_XYZ/option_selector'], function($, optionSelect) {
        optionSelect.create(<?= json_encode($componentData) ?>, $);
    })
</script>

这是发送Ajax请求的JS代码：

函数requestComplete（responseData）{}

$.post(baseUrl + 'xyz-ajax/cart/add/cf/' + configurableProductId + '/simple/' + item.simpleProductId + '/amount/' + item.amount, requestComplete);

在此过程中会发生什么？

每次您的脚本通过jQuery向服务器发送Ajax POST（或PUT）请求并返回时，jQuery都会发送“ ajaxComplete”事件。此事件由module-customer / view / frontend / web / js / customer-data.js中的处理程序处理。该处理程序检查哪些页面节依赖于Ajax调用（来自sections.xml）并使它们无效。这些将被更新。

资料来源：

— 帕特里克·范·伯格根
source

14

Magento 2使用客户数据JS API来表示浏览器中的用户会话数据。所有JS小部件都应该从Customer Data JS API检索客户数据。客户数据分为多个部分（购物车，愿望清单等）。每个段都是可观察到的，因此无论何时修改它，使用它的小部件都会重新呈现以显示更改。

Magento框架负责同步PHP会话和JS本地存储客户数据。

每当具有会话ID Cookie和本地存储空的访问者访问Magento页面时，都会向服务器发出HTTP请求以检索客户数据（所有部分）。

每次访客进行某种状态修改操作（添加到购物车，添加到愿望灯）时，本地数据中相应的客户数据部分都会失效，并且会发出另一个HTTP请求来检索更新的部分。

您可以使用“ sections.xml”将POST操作链接到本地存储部分，只要调用该操作，该存储部分就会失效。例如，请参阅https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml。

— 安东·克里尔
source

2

在这些其他答案的基础上，如果您要通过普通Magento require.js文件中的API调用更新购物车，但不能依靠jQuery ajaxComplete方法刷新迷你购物车（使用其他AJAX请求框架？），则可以要求该Magento_Customer/js/customer-data对象并询问微型货车也可以通过这种方式进行刷新：

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

资料来源：https : //github.com/magento/magento2/issues/5621

— 法典
source