Magento 2: Backend und Frontend Status / Cache synchronisieren

Verfügt Magento 2 über Systeme oder Abstraktionen zum Verwalten des Zustands zwischen dem Backend und dem lokalen Speicher auf dem Frontend?

Ich arbeite an der Portierung einer Funktion zum Wiederherstellen des verlassenen Warenkorbs eines Benutzers über eine Weiterleitungs-URL. In vereinfachter Form eine URL wie

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

Lädt ein Angebot in den Warenkorb des aktuellen Benutzers, basierend auf einer verschlüsselten quote_id im Bezeichner.

In Magento 1 war dies relativ einfach - Sie mussten lediglich die Checkout-Sitzungsinformationen eines Benutzers mit der richtigen Angebots-ID aktualisieren. Magento 2 fügt jedoch die Fältchen des lokalen Speichers hinzu .

Die Magento 2-Frontend-Javascript-Anwendung (en) scheint Informationen in den lokalen Speicherdatenbanken des Browsers zwischenzuspeichern. Dies beinhaltet Informationen zum Aufbau des Mini-Carts. Dies bedeutet, dass selbst wenn ein Endbenutzer-Programmierer (ich) es schafft, die Sitzung Sitzungs-ID im Backend zu ändern, der Mini-Cart weiterhin die alten Cart-Daten anzeigt .

Dies ist nur ein Beispiel für ein Problem, bei dem keine einzige API für die Verwaltung des Anwendungsstatus im Backend und Frontend bekannt ist (oder vorhanden ist?). Für mein spezielles Problem hat mein Endpunkt eine HTML-Seite gerendert, die etwas Javascript enthält. Dadurch wird der lokale Speicher manuell gelöscht und der Benutzer dann auf eine andere Seite umgeleitet.

Gibt es in Magento 2 eine API zum Verwalten von Daten zwischen Frontend und Backend?

Gibt es eine Standardmethode, um dem gesamten System zu signalisieren, dass Sie während der Back-End-Verarbeitung etwas getan haben, das es erforderlich macht, den lokalen Front-End-Speichercache ungültig zu machen?

Gibt es eine Technik zum Einfügen eines neuen RequireJS-Moduls in die Seite, die automatisch ausgeführt wird und den lokalen Speicher manipulieren kann, bevor der Rest der Javascript-Anwendung (en) darauf zugreift?

Ich hatte ein ähnliches Problem: Ich wollte, dass die Mini-Cart-Komponente aktualisiert wird, nachdem ich eine Ajax-Anfrage zum Hinzufügen eines Artikels zum Warenkorb gesendet habe.

Es funktioniert eigentlich ganz gut, wenn Sie sich nur an einige Punkte erinnern:

• Deklarieren Sie, welche Seitenbereiche nach einem Ajax-Aufruf in etc / frontend / areas.xml Ihres Moduls aktualisiert werden müssen.
• Verwenden Sie jQuery.post (), um Ihre Ajax-Anfrage zu senden. Es kann sich um eine POST- oder PUT-Anforderung handeln, aber nicht um GET.
• Und es muss über jQuery erfolgen, nicht über Prototype oder Vanilla JS, da jQueries "ajaxComplete" -Ereignis eine wesentliche Rolle spielt.
• der Ajax-URL eine Basis-URL voranstellen (nicht nur mit / beginnen)

Hier ist meine section.xml (xyz ist der Name unseres Kunden):

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

Hier entspricht 'xyz-ajax / cart / add' dem Format '[Frontname] / [Aktionspfad] / [Aktionsname]'. Die XML-Datei weist Magento an, 'cart' zu aktualisieren, nachdem der Ajax-Aufruf "xyz-ajax / cart / add" abgeschlossen wurde.

Dies ist mein Vorlagencode (.phtml):

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

und dies ist der JS-Code, der die Ajax-Anfrage sendet:

Funktion requestComplete (responseData) {}

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

Was passiert dabei?

Jedes Mal, wenn Ihr Skript eine Ajax-POST- (oder PUT-) Anforderung über jQuery an den Server sendet und diese zurückgibt, sendet jQuery ein 'ajaxComplete'-Ereignis. Dieses Ereignis wird von einem Handler in module-customer / view / frontend / web / js / customer-data.js behandelt. Dieser Handler überprüft, welche Seitenabschnitte vom Ajax-Aufruf abhängen (aus Ihrer section.xml) und macht sie ungültig. Diese werden aktualisiert.

Quellen:

• So lösen Sie ein Minicart-Update nach dem Hinzufügen zum Warenkorb aus
• Magento 2: Wie funktionieren Kunden-Rubriken / Rubriken.xml?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 verwendet die Customer Data JS API, um die Sitzungsdaten der Benutzer im Browser darzustellen. Alle JS-Widgets sollen Kundendaten von der JS-API für Kundendaten abrufen. Kundendaten werden in Abschnitte (Warenkorb, Wunschliste, ...) aufgeteilt. Jedes Segment ist beobachtbar. Wenn es geändert wird, wird das Widget, das es verwendet, erneut gerendert, um die Änderung anzuzeigen.

Das Magento-Framework ist für die Synchronisation der Kundendaten von PHP-Sitzungen und JS Local Storage verantwortlich.

Jedes Mal, wenn ein Besucher mit Sitzungs-ID-Cookie und leerem lokalen Speicher die Magento-Seite besucht, wird eine HTTP-Anfrage an den Server gesendet, um Kundendaten (alle Abschnitte) abzurufen.

Jedes Mal, wenn der Besucher einen Statusänderungsvorgang ausführt (in den Warenkorb legen, in die Wunschliste setzen), wird der entsprechende Abschnitt der Kundendaten im lokalen Speicher ungültig und eine weitere HTTP-Anforderung zum Abrufen aktualisierter Abschnitte gesendet.

Sie können 'section.xml' verwenden, um POST-Aktionen mit lokalen Speicherabschnitten zu verknüpfen, die bei jedem Aufruf dieser Aktionen ungültig werden. Siehe zum Beispiel https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml .

Aufbauend auf diesen anderen Antworten können Sie das Objekt anfordern und fragen , wenn Sie den Warenkorb über API-Aufrufe in normalen Magento- require.jsDateien aktualisieren , sich jedoch nicht auf die jQuery- ajaxCompleteMethode verlassen können, um den Minicart zu aktualisieren (unter Verwendung eines anderen AJAX-Anforderungs-Frameworks?) Magento_Customer/js/customer-dataDer Minicart, um sich auf diese Weise zu erfrischen:

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

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