Magento 2：バックエンドとフロントエンドの状態/キャッシュの同期

Magento 2には、バックエンドとフロントエンドのローカルストレージ間の状態を管理するためのシステムまたは抽象化がありますか？

リダイレクトURLを介してユーザーの放棄されたカートを復元する機能の移植に取り組んでいます。簡易形式では、次のようなURL

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

識別子のエンコードされたquote_idに基づいて、現在のユーザーのカートに見積もりをロードします。

Magento 1では、これは比較的簡単でした。ユーザーのCheckoutセッション情報を正しい見積もりIDで更新する必要がありました。ただし、Magento 2はローカルストレージのしわを追加します。

Magento 2フロントエンドjavascriptアプリケーションは、ブラウザのローカルストレージデータベースに情報をキャッシュするようです。これには、ミニカートを構築するための情報が含まれます。これが意味することは、エンドユーザープログラマー（私）がバックエンドのセッションセッションIDを変更したとしても、ミニカートには古いカートデータが表示されます。

これは、バックエンドとフロントエンド全体でアプリケーションの状態を管理するための単一のAPIを知らない（または持っている？）ことから生じる問題の一例です。特定の問題のために、JavaScriptを含むHTMLページをエンドポイントでレンダリングして、ローカルストレージを手動でクリアし、ユーザーを別のページにリダイレクトしましたが、これはひどいハックのように感じます。

フロントエンドとバックエンドの間でデータを管理するためのMagento 2にAPIはありますか？

バックエンドの処理中に、フロントエンドのローカルストレージキャッシュを無効にする必要があるようなことをしたシステム全体に信号を送る標準的な方法はありますか？

自動的に実行され、残りのjavascriptアプリケーションがアクセスする前にローカルストレージを操作できる新しいRequireJSモジュールをページに挿入する方法はありますか？

同様の問題がありました。アイテムをカートに追加するAjaxリクエストを送信した後、ミニカートコンポーネントを更新したかったのです。

いくつかのポイントを思い出せば、実際に非常にうまく機能します。

• モジュールのetc / frontend / sections.xmlで、Ajax呼び出し後に更新する必要があるページセクションを宣言します。
• jQuery.post（）を使用してAjaxリクエストを送信します。GETではなく、POSTまたはPUTリクエストである可能性があります。
• また、重要な役割を果たすのはjQueryの「ajaxComplete」イベントであるため、PrototypeやバニラJSではなく、jQueryを使用する必要があります。
• AjaxのURLにベースURLを追加します（/で始まらないでください）

ここに私の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は、ajax呼び出し「xyz-ajax / cart / add」が完了した後に「カート」を更新するようにMagentoに指示します。

これは私のテンプレート（.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から）に依存しているかを確認し、それらを無効にします。これらは更新されます。

ソース：

• カートに追加した後にミニカートの更新をトリガーする方法
• Magento 2：顧客セクション/sections.xmlはどのように機能しますか？
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2は、顧客データJS APIを使用して、ブラウザーでユーザーセッションデータを表します。すべてのJSウィジェットは、顧客データ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を参照してください。

これらの他の答えに基づいて、通常の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