Magento 2: Синхронизация Backend и Frontend State / Cache

Есть ли в Magento 2 какие-либо системы или абстракции для управления состоянием между внутренним сервером и локальным хранилищем на внешнем интерфейсе?

Я работаю над портированием функции восстановления заброшенной корзины пользователя через URL перенаправления. В упрощенном виде, URL-адрес, как

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

загрузит цитату в корзину текущего пользователя на основе закодированного quote_id в идентификаторе.

В Magento 1 это было относительно просто - вам просто нужно было обновить информацию о сеансе Checkout пользователя, указав правильный идентификатор котировки. Тем не менее, Magento 2 добавляет в складку локального хранилища .

Javascript-приложение Magento 2, кажется, кэширует информацию в локальных базах данных браузера. Это включает в себя информацию для создания мини-тележки. Это означает, что даже если конечному пользователю-программисту (мне) удастся изменить идентификатор сеанса сеанса в бэкэнде, мини-корзина все равно будет отображать старые данные корзины.

Это только один пример проблемы, которая связана с незнанием (или наличием?) Единого API для управления состоянием приложения через бэкэнд и внешний интерфейс. Для моей конкретной проблемы у меня была конечная точка, отображающая HTML-страницу, которая включает в себя некоторый JavaScript, который вручную очищает локальное хранилище, а затем перенаправляет пользователя на другую страницу - но это похоже на грубый хак.

Есть ли в Magento 2 API для управления данными между внешним и внутренним интерфейсом?

Существует ли стандартный способ оповещения всей системы о том, что во время серверной обработки вы сделали что-то, что делает необходимым аннулировать кэш локального хранилища внешнего интерфейса?

Есть ли метод для внедрения нового модуля RequireJS на страницу, которая запускается автоматически и может манипулировать локальным хранилищем до того, как остальные приложения javascript получат к нему доступ?

У меня была похожая проблема: я хотел, чтобы компонент mini-cart обновлялся после отправки Ajax-запроса на добавление товара в корзину.

Это на самом деле работает довольно хорошо, если вы просто помните некоторые моменты:

• Объявите, какие разделы страницы необходимо обновить после вызова Ajax, в etc / frontend / section.xml вашего модуля.
• Используйте jQuery.post () для отправки вашего Ajax-запроса. Это может быть запрос POST или PUT, но не GET.
• И это должно быть через jQuery, а не через Prototype или vanilla JS, потому что именно событие jQuery 'ajaxComplete' играет существенную роль.
• добавьте Ajax url к базовому URL (не просто начните с /)

Вот мой section.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>

и это код JS, который отправляет запрос Ajax:

function requestComplete (responseData) {}

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

Что происходит в процессе?

Каждый раз, когда ваш скрипт отправляет запрос Ajax POST (или PUT) на сервер через jQuery и возвращает, jQuery отправляет событие «ajaxComplete». Это событие обрабатывается обработчиком в модуле customer / view / frontend / web / js / customer-data.js. Этот обработчик проверяет, какие разделы страницы зависят от вызова Ajax (из вашего section.xml), и делает их недействительными. Они будут обновлены.

Источники:

• Как вызвать обновление мини-карты после добавления в корзину
• Magento 2: как работают клиентские секции / section.xml?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 использует JS API Customer Data для представления данных сеанса пользователя в браузере. Все виджеты JS должны получать данные о клиентах из API данных клиента. Данные клиента разбиты на разделы (корзина, список пожеланий, ...). Каждый сегмент является видимым, поэтому, когда он изменяется, виджет, который его использует, перерисовывается для отображения изменения.

Платформа Magento отвечает за синхронизацию PHP-сессии и JS локального хранилища данных клиента.

Каждый раз, когда посетитель с cookie-файлом с идентификатором сеанса и пустым локальным хранилищем посещает страницу Magento, выполняется HTTP-запрос к серверу для получения данных клиента (все разделы).

Каждый раз, когда посетитель выполняет какую-либо операцию по изменению состояния (добавить в корзину, добавить в список желаний), соответствующий раздел данных клиента становится недействительным в локальном хранилище, и делается другой HTTP-запрос для получения обновленных разделов.

Вы можете использовать файл section.xml, чтобы связать действия POST с разделами локального хранилища, которые будут аннулированы при каждом вызове этих действий. См., Например, https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml .

Основываясь на этих других ответах, если вы обновляете корзину с помощью вызовов API в обычных require.jsфайлах Magento , но вы не можете полагаться на ajaxCompleteметод jQuery для обновления мини-карты (используя другую инфраструктуру запросов 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.