Magento 2: Arka Uç ve Ön Uç Durumunu / Önbelleğini Senkronize Etme

14

Magento 2'de, arka uç ile ön uçtaki yerel depolama arasındaki durumu yönetmek için herhangi bir sistem veya soyutlama var mı?

Bir kullanıcının terk edilmiş sepetini bir yönlendirme URL'si aracılığıyla geri yüklemek için bir özellik taşıma üzerinde çalışıyorum. Basitleştirilmiş biçimde, URL gibi

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

tanımlayıcıdaki şifreli bir tırnak_kimliği temel alınarak mevcut kullanıcının sepetine bir teklif yükler.

Magento 1'de bu nispeten basitti - bir kullanıcının Checkout oturumu bilgilerini doğru teklif kimliğiyle güncellemeniz gerekiyordu. Bununla birlikte, Magento 2, yerel depolamanın kırışıklıklarına katkıda bulunur .

Magento 2 ön uç javascript uygulama (lar) ı, tarayıcının yerel depolama veritabanlarındaki bilgileri önbelleğe alıyor gibi görünüyor. Bu, mini arabayı oluşturmak için bilgiler içerir. Bunun anlamı, bir son kullanıcı programcısı (ben) arka uçtaki Oturum Oturum Kimliğini değiştirmeyi başarsa bile, mini araba hala eski araba verilerini görüntüler.

Bu, arka uç ve ön uçta uygulama durumunu yönetmek için tek bir API bilmemekten (veya sahip olmamaktan) kaynaklanan bir sorunun sadece bir örneğidir. Benim özel sorunum için ben bazı javascript içeren bir HTML sayfası oluşturma el ile yerel depolama temizler ve daha sonra kullanıcıyı başka bir sayfaya yönlendirir - ama bu büyük bir kesmek gibi geliyor.

Magento 2'de, ön uç ve arka uç arasındaki verileri yönetmek için bir API var mı?

Arka uç işleme sırasında, ön uç yerel depolama önbelleğini geçersiz kılmasını gerekli kılan bir şey yaptığınız için tüm sistemi işaret etmenin standart bir yolu var mı?

Sayfaya otomatik olarak çalışan ve javascript uygulamalarının geri kalanına erişmeden önce yerel depolamayı değiştirebilecek yeni bir RequireJS modülü enjekte etmek için bir teknik var mı?

— Alan Storm
kaynak

Hey. Sevgili Alan Store, cevap aldın mı?

— Amit Bera

@AmitBera Henüz değil.

— Alan Storm

6

Benzer bir sorunum vardı: Sepeti bir öğe eklemek için bir Ajax isteği gönderdikten sonra mini-cart bileşeninin yenilenmesini istedim.

Bazı noktaları hatırlarsanız aslında oldukça iyi çalışır:

Bir Ajax çağrısından sonra modülünüzün etc / frontend / section.xml dosyasında hangi sayfa bölümlerinin güncellenmesi gerektiğini bildirin.
Ajax isteğinizi göndermek için jQuery.post () kullanın. Bu bir POST veya PUT isteği olabilir, GET değil.
Ve Prototip veya vanilya JS değil, jQuery aracılığıyla olmalıdır, çünkü jQuery'nin 'ajaxComplete' olayı önemli bir rol oynar.
Ajax url'sini bir base-url ile başa döndür (sadece /

Benim bölümlerim.xml (xyz müşterimizin adıdır):

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

Burada, 'xyz-ajax / cart / add' '[frontName] / [ActionPath] / [ActionName]' biçimine göredir. Xml, Magento'ya "xyz-ajax / cart / add" ajax çağrısı tamamlandıktan sonra 'cart'ı güncellemesini söyler.

Bu benim şablon (.phtml) kodum:

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

ve bu Ajax isteğini gönderen JS kodudur:

işlev requestComplete (responseData) {}

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

Süreçte ne olur?

Betiğiniz sunucuya jQuery aracılığıyla bir Ajax POST (veya PUT) isteği gönderdiğinde ve geri döndüğünde, jQuery bir 'ajaxComplete' olayı gönderir. Bu olay, customer-customer / view / frontend / web / js / customer-data.js modülündeki bir işleyici tarafından işlenir. Bu işleyici, hangi sayfa bölümlerinin Ajax çağrısına bağlı olduğunu kontrol eder (section.xml dosyasından) ve bunları geçersiz kılar. Bunlar güncellenecek.

Kaynaklar:

— Patrick van Bergen
kaynak

14

Magento 2, kullanıcı oturum verilerini tarayıcıda temsil etmek için Müşteri Verileri JS API'sini kullanır. Tüm JS widget'larının Müşteri Verileri JS API'sından müşteri verilerini alması gerekir. Müşteri Verileri bölümlere ayrılmıştır (alışveriş sepeti, istek listesi, ...). Her bölüm gözlemlenebilir, bu nedenle her değiştirildiğinde, onu kullanan pencere öğesi değişikliği görüntülemek üzere yeniden oluşturulur.

Magento çerçevesi PHP oturumunun ve JS yerel depolama Müşteri Verilerinin senkronizasyonundan sorumludur.

Oturum kimliği çerezi ve boş yerel depolama alanına sahip bir ziyaretçi Magento sayfasını her ziyaret ettiğinde, müşteri verilerini (tüm bölümler) almak için sunucuya bir HTTP isteği yapılır.

Ziyaretçinin her durum değişikliği işlemi (sepete ekle, dilek listesine ekle) yaptığı her seferinde, müşteri verilerinin karşılık gelen bölümü yerel depoda geçersiz kılınır ve güncellenmiş bölümleri almak için başka bir HTTP isteği yapılır.

POST eylemlerini, her eylem çağrıldığında geçersiz kılınacak yerel depolama bölümlerine bağlamak için 'bölümler.xml'yi kullanabilirsiniz. Örneğin, https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml adresine bakın .

— Anton Kril
kaynak

2

Bu diğer yanıtlara dayanarak, sepeti normal Magento require.jsdosyalarında API çağrıları aracılığıyla güncelliyor , ancak ajaxCompletemini parçayı yenilemek için jQuery yöntemine güvenemezseniz (başka bir AJAX istek çerçevesi mi kullanıyorsunuz?), Magento_Customer/js/customer-dataNesneyi isteyebilir ve minikart da bu şekilde yenilenecek:

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

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

— thaddeusmt
kaynak