Magento 2: Synchronizacja zaplecza i stanu / pamięci podręcznej frontendu

Czy Magento 2 ma jakieś systemy lub abstrakty do zarządzania stanem między backendem a lokalną pamięcią masową na frontendie?

Pracuję nad przeniesieniem funkcji przywracania porzuconego koszyka użytkownika za pomocą przekierowania. W uproszczonej formie, taki jak adres URL

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

załaduje wycenę do koszyka bieżącego użytkownika na podstawie zakodowanego identyfikatora quote_id w identyfikatorze.

W Magento 1 było to stosunkowo proste - wystarczyło zaktualizować informacje o sesji Checkout użytkownika z poprawnym identyfikatorem oferty. Jednak Magento 2 dodaje zmarszczek lokalnej pamięci .

Wygląda na to, że aplikacja javascript w interfejsie Magento 2 buforuje informacje w lokalnych bazach danych przeglądarki. Obejmuje to informacje dotyczące budowy mini-wózka. Oznacza to, że nawet jeśli programistowi-użytkownikowi końcowemu (mnie) uda się zmienić identyfikator sesji sesji w backendie, mini-koszyk nadal będzie wyświetlał dane starego koszyka.

To tylko jeden przykład problemu, który wynika z braku znajomości (lub posiadania?) Pojedynczego interfejsu API do zarządzania stanem aplikacji w backendie i frontendzie. W przypadku mojego konkretnego problemu miałem punkt końcowy renderujący stronę HTML, która zawiera część javascript, ręcznie czyści lokalną pamięć, a następnie przekierowuje użytkownika na inną stronę - ale to wydaje się rażącym włamaniem.

Czy w Magento 2 jest interfejs API do zarządzania danymi między frontendem a backendem?

Czy istnieje standardowy sposób sygnalizowania całemu systemowi, że podczas przetwarzania zaplecza zrobiłeś coś, co powoduje, że konieczne jest unieważnienie lokalnej pamięci podręcznej frontendu?

Czy istnieje technika wstrzykiwania nowego modułu RequireJS na stronę, która działa automatycznie i może manipulować pamięcią lokalną, zanim pozostałe aplikacje javascript uzyskają do niej dostęp?

Miałem podobny problem: chciałem odświeżyć komponent mini-koszyka po wysłaniu prośby Ajax o dodanie przedmiotu do koszyka.

To naprawdę działa całkiem dobrze, jeśli pamiętasz tylko kilka punktów:

• Zadeklaruj, które sekcje strony wymagają aktualizacji po wywołaniu Ajax, w pliku etc / frontend / section.xml modułu.
• Użyj jQuery.post (), aby wysłać żądanie Ajax. Może to być żądanie POST lub PUT, ale nie GET.
• I musi to być jQuery, a nie Prototyp lub waniliowy JS, ponieważ to wydarzenie jQuery „ajaxComplete” odgrywa istotną rolę.
• dodaj URL Ajax do podstawowego adresu URL (nie zaczynaj tylko od /)

Oto moje sekcje.xml (xyz to nazwa naszego klienta):

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

Tutaj „xyz-ajax / cart / add” ma format „[frontName] / [ActionPath] / [ActionName]”. Plik xml informuje Magento, aby zaktualizował „koszyk” po zakończeniu wywołania ajax „xyz-ajax / cart / add”.

To jest mój kod szablonu (.phtml):

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

a to jest kod JS, który wysyła żądanie Ajax:

funkcja requestComplete (responseData) {}

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

Co dzieje się w tym procesie?

Za każdym razem, gdy skrypt wysyła żądanie POST (lub PUT) Ajax do serwera za pośrednictwem jQuery, a ono zwraca, jQuery wysyła zdarzenie „ajaxComplete”. To zdarzenie jest obsługiwane przez moduł obsługi w module-customer / view / frontend / web / js / customer-data.js. Ten moduł obsługi sprawdza, które sekcje strony zależą od wywołania Ajax (z twojego section.xml) i unieważnia je. Zostaną one zaktualizowane.

Źródła:

• Jak uruchomić aktualizację minicart po dodaniu do koszyka
• Magento 2: jak działają sekcje / sekcje klienta.xml?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 używa interfejsu Customer Data JS API do reprezentowania danych sesji użytkownika w przeglądarce. Wszystkie widżety JS mają pobierać dane klientów z interfejsu API danych klienta JS. Dane klienta są podzielone na sekcje (koszyk, lista życzeń, ...). Każdy segment jest obserwowalny, więc przy każdej modyfikacji widżet, który go używa, jest ponownie renderowany w celu wyświetlenia zmiany.

Środowisko Magento jest odpowiedzialne za synchronizację sesji PHP i danych klienta lokalnego magazynu JS.

Za każdym razem, gdy odwiedzający z plikiem cookie identyfikatora sesji i pustą pamięcią lokalną odwiedza stronę Magento, wysyłane jest żądanie HTTP do serwera w celu pobrania danych klienta (wszystkie sekcje).

Za każdym razem, gdy odwiedzający wykonuje operację modyfikującą stan (dodaj do koszyka, dodaj do życzeń), odpowiednia sekcja danych klienta jest unieważniana w lokalnej pamięci i wysyłane jest kolejne żądanie HTTP w celu pobrania zaktualizowanych sekcji.

Możesz użyć pliku „section.xml”, aby połączyć akcje POST z lokalnymi sekcjami pamięci, które zostaną unieważnione przy każdym wywołaniu tych akcji. Zobacz na przykład https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml .

Opierając się na tych innych odpowiedziach, jeśli aktualizujesz koszyk za pomocą wywołań API w normalnych require.jsplikach Magento , ale nie możesz polegać na ajaxCompletemetodzie jQuery w celu odświeżenia minicart (przy użyciu innej struktury żądań AJAX?), Możesz wymagać Magento_Customer/js/customer-dataobiektu i zapytać minikart do odświeżania również w ten sposób:

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

Źródło: https://github.com/magento/magento2/issues/5621