Magento 2: Menyinkronkan Backend dan Frontend State / Cache

Apakah Magento 2 memiliki sistem atau abstraksi untuk mengatur keadaan antara backend dan penyimpanan lokal di frontend?

Saya sedang mengerjakan porting fitur untuk mengembalikan keranjang yang ditinggalkan pengguna melalui redirect URL. Dalam bentuk yang disederhanakan, sebuah URL suka

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

akan memuat penawaran ke troli pengguna saat ini berdasarkan pada quote_id yang disandikan di pengidentifikasi.

Di Magento 1, ini relatif sederhana - Anda hanya perlu memperbarui informasi sesi Checkout pengguna dengan ID penawaran yang benar. Namun, Magento 2 menambah kerutan penyimpanan lokal .

Aplikasi javascript frontend Magento 2 tampaknya menyimpan informasi dalam basis data penyimpanan lokal browser. Ini termasuk informasi untuk membangun kereta mini. Apa artinya ini adalah bahkan jika pengguna akhir-programmer (saya) berhasil mengubah sesi ID sesi di backend, mini-cart masih akan menampilkan data kereta lama .

Ini hanyalah salah satu contoh masalah yang bermula dari tidak mengetahui (atau memiliki?) Satu API untuk mengelola status aplikasi di backend dan frontend. Untuk masalah khusus saya, saya memiliki titik akhir saya membuat halaman HTML yang mencakup beberapa javascript yang secara manual membersihkan penyimpanan lokal dan kemudian mengarahkan pengguna ke halaman lain - tetapi ini terasa seperti peretasan kotor.

Apakah ada API di Magento 2 untuk mengelola data antara frontend dan backend?

Adakah cara standar menandakan seluruh sistem yang, selama pemrosesan backend, Anda telah melakukan sesuatu yang membuatnya perlu membatalkan cache penyimpanan lokal frontend?

Apakah ada teknik untuk menyuntikkan modul RequireJS baru ke halaman yang berjalan secara otomatis dan dapat memanipulasi penyimpanan lokal sebelum aplikasi javascript lainnya mengaksesnya?

Saya memiliki masalah yang sama: Saya ingin komponen mini-cart diperbarui setelah saya mengirim permintaan Ajax untuk menambahkan item keranjang.

Ini benar-benar berfungsi dengan baik jika Anda hanya mengingat beberapa poin:

• Nyatakan bagian halaman mana yang perlu diperbarui setelah panggilan Ajax, di etc / frontend / bagian.xml modul Anda.
• Gunakan jQuery.post () untuk mengirim permintaan Ajax Anda. Mungkin permintaan POST atau PUT, hanya saja TIDAK MENDAPATKAN.
• Dan itu harus melalui jQuery, bukan Prototype atau vanilla JS, karena itu adalah acara 'ajaxComplete' jQuery yang memainkan peran penting.
• letakkan dulu ajax url dengan basis-url (jangan hanya mulai dengan /)

Inilah bagian saya.xml (xyz adalah nama pelanggan kami):

<?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>

Di sini, 'xyz-ajax / cart / add' sesuai dengan format '[frontName] / [ActionPath] / [ActionName]'. Xml memberitahu Magento untuk memperbarui 'kereta' setelah panggilan ajax "xyz-ajax / kereta / tambahkan" telah selesai.

Ini adalah kode templat (.phtml) saya:

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

dan ini adalah kode JS yang mengirim permintaan Ajax:

function requestComplete (responseData) {}

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

Apa yang terjadi dalam proses?

Setiap kali skrip Anda mengirim permintaan Ajax POST (atau PUT) ke server melalui jQuery, dan itu kembali, jQuery mengirimkan acara 'ajaxComplete'. Acara ini ditangani oleh seorang pawang di modul-customer / view / frontend / web / js / customer-data.js. Pawang ini memeriksa bagian halaman mana yang bergantung pada panggilan Ajax (dari bagian Anda.xml) dan membatalkannya. Ini akan diperbarui.

Sumber:

• Cara memicu pembaruan minicart setelah menambahkan ke troli
• Magento 2: bagaimana cara kerja bagian / bagian.xml pelanggan?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 menggunakan Data JS API Pelanggan untuk mewakili data sesi pengguna di browser. Semua widget JS seharusnya untuk mengambil data pelanggan dari API JS Data Pelanggan. Data Pelanggan dibagi menjadi beberapa bagian (keranjang, daftar harapan, ...). Setiap segmen dapat diamati, jadi setiap kali diubah, widget yang menggunakannya akan ditampilkan kembali untuk menampilkan perubahan.

Kerangka kerja Magento bertanggung jawab untuk sinkronisasi sesi PHP dan Data Pelanggan penyimpanan lokal JS.

Setiap kali pengunjung dengan cookie ID sesi dan penyimpanan kosong mengunjungi halaman Magento, permintaan HTTP ke server dilakukan untuk mengambil data pelanggan (semua bagian).

Setiap kali pengunjung melakukan operasi modifikasi negara (tambahkan ke troli, tambahkan ke wishlit), bagian data pelanggan yang sesuai tidak valid dalam penyimpanan lokal dan permintaan HTTP lain dibuat untuk mengambil bagian yang diperbarui.

Anda dapat menggunakan 'bagian.xml' untuk menautkan tindakan POST ke bagian penyimpanan lokal yang akan dibatalkan kapan pun tindakan itu dipanggil. Lihat https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml misalnya.

Membangun jawaban lain ini, jika Anda memperbarui keranjang melalui panggilan API dalam require.jsfile Magento normal , tetapi Anda tidak dapat mengandalkan ajaxCompletemetode jQuery untuk menyegarkan minicart (menggunakan kerangka kerja permintaan AJAX lain?), Anda dapat meminta Magento_Customer/js/customer-dataobjek dan bertanya minicart untuk menyegarkan dengan cara ini, juga:

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

Sumber: https://github.com/magento/magento2/issues/5621