Magento 2: सिंकिंग बैकेंड और फ्रंटेंड स्टेट / कैश

14

क्या Magento 2 में बैकएंड और फ्रंटेंड पर स्थानीय भंडारण के बीच राज्य के प्रबंधन के लिए कोई सिस्टम या सार है?

मैं एक उपयोगकर्ता की परित्यक्त कार्ट को पुनर्निर्देशित URL के माध्यम से पुनर्स्थापित करने के लिए एक सुविधा को पोर्ट करने पर काम कर रहा हूं। सरलीकृत रूप में, एक यूआरएल की तरह

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

पहचानकर्ता में एन्कोडेड quot_id के आधार पर वर्तमान उपयोगकर्ता की गाड़ी में एक उद्धरण लोड करेगा।

Magento 1 में, यह अपेक्षाकृत सरल था - आपको बस उपयोगकर्ता के चेकआउट सत्र की जानकारी को सही उद्धरण आईडी के साथ अपडेट करने की आवश्यकता थी। हालांकि, Magento 2 स्थानीय भंडारण की शिकन में जोड़ता है ।

Magento 2 फ्रंटएंड जावास्क्रिप्ट एप्लिकेशन (s?) ब्राउज़र के स्थानीय भंडारण डेटाबेस में जानकारी को कैश करने के लिए लगता है। इसमें मिनी-कार्ट के निर्माण की जानकारी शामिल है। इसका क्या मतलब है, भले ही एक अंत-उपयोगकर्ता-प्रोग्रामर (मुझे) सत्र सत्र आईडी को बैकएंड में बदलने का प्रबंधन करता है, मिनी-कार्ट अभी भी पुराने कार्ट डेटा प्रदर्शित करेगा ।

किसी समस्या का सिर्फ एक उदाहरण है जो बैकएंड और फ्रंटएंड पर एप्लिकेशन स्टेट को प्रबंधित करने के लिए एक एपीआई नहीं (या होने?) नहीं जानता है। मेरी विशिष्ट समस्या के लिए मैंने अपना एंडपॉइंट एक HTML पृष्ठ प्रदान किया है जिसमें कुछ जावास्क्रिप्ट शामिल हैं जो मैन्युअल रूप से स्थानीय संग्रहण को साफ़ करता है और फिर उपयोगकर्ता को दूसरे पृष्ठ पर पुनर्निर्देशित करता है - लेकिन यह एक सकल हैक की तरह लगता है।

वहाँ दृश्यपटल और बैकएंड के बीच डेटा के प्रबंधन के लिए Magento 2 में एक एपीआई है?

पूरे सिस्टम को सिग्नल करने का एक मानक तरीका है, जो बैकएंड प्रोसेसिंग के दौरान, आपने कुछ ऐसा किया है जिससे यह आवश्यक है कि यह फ्रंटेंड लोकल स्टोरेज कैश को अमान्य कर दे?

क्या पेज में एक नया आवश्यकताएँ मॉड्यूल को इंजेक्ट करने के लिए एक तकनीक है जो स्वचालित रूप से चलती है और इसे जावास्क्रिप्ट एप्लिकेशन के बाकी हिस्सों से पहले स्थानीय भंडारण में हेरफेर कर सकता है?

— एलन तूफान
स्रोत

अरे। प्रिय एलन स्टोर, क्या आपको जवाब मिला?

— अमित बेरा

@AmitBera अभी तक नहीं।

— एलन स्टॉर्म

6

मुझे भी इसी तरह की समस्या थी: मैं चाहता था कि मिनी-कार्ट कंपोनेंट को रिफ्रेश करने के बाद मैं कार्ट में आइटम जोड़ने के लिए अजाक्स अनुरोध भेजूं।

यह वास्तव में काफी अच्छी तरह से काम करता है अगर आपको बस कुछ बिंदु याद हैं:

घोषणा करें कि आपके मॉड्यूल के आगे / फ्रंटएंड / सेक्शन .xml में अजाक्स कॉल के बाद किस पेज सेक्शन को अपडेट किया जाना है।
अपने Ajax अनुरोध भेजने के लिए jQuery.post () का उपयोग करें। यह एक POST या PUT अनुरोध हो सकता है, सिर्फ GET नहीं।
और यह jQuery के माध्यम से होना चाहिए, न कि प्रोटोटाइप या वेनिला JS के लिए, क्योंकि यह jQuery का 'ajaxComplete' इवेंट है जो एक आवश्यक भूमिका निभाता है।
बेस-url के साथ अजाक्स url को प्रिपेंड करें (केवल साथ शुरू न करें /)

यहाँ मेरा अनुभाग है। 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] के अनुसार है। "Xyz-ajax / कार्ट / ऐड" पूरा होने के बाद xml मैजेंटो को 'कार्ट' अपडेट करने के लिए कहता है।

यह मेरा टेम्पलेट (.phtml) कोड है:

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

और यह JS कोड है जो Ajax अनुरोध भेजता है:

फ़ंक्शन का अनुरोध पूरा करें (responseData) {}

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

इस प्रक्रिया में क्या होता है?

हर बार जब आपकी स्क्रिप्ट jQuery के माध्यम से सर्वर पर एक अजाक्स पोस्ट (या PUT) अनुरोध भेजती है, और यह वापस लौटता है, jQuery एक 'ajaxComplete' घटना भेजता है। इस घटना को मॉड्यूल-ग्राहक / दृश्य / दृश्य / वेब / js / ग्राहक-data.js में एक हैंडलर द्वारा नियंत्रित किया जाता है। यह हैंडलर यह जाँचता है कि पेज-सेक्शन अजाक्स कॉल (आपके सेक्शन.एक्सएमएल से) पर निर्भर करता है और उन्हें अमान्य करता है। इन्हें अपडेट किया जाएगा।

सूत्रों का कहना है:

— पैट्रिक वैन बर्गन
स्रोत

14

Magento 2 ब्राउज़र में उपयोगकर्ता सत्र डेटा का प्रतिनिधित्व करने के लिए ग्राहक डेटा JS API का उपयोग करता है। सभी JS विगेट्स ग्राहक डेटा JS API से ग्राहक डेटा प्राप्त करने वाले हैं। ग्राहक डेटा वर्गों (गाड़ी, इच्छा सूची, ...) से विभाजित है। प्रत्येक खंड अवलोकनीय है, इसलिए जब भी इसे संशोधित किया जाता है, तो इसका उपयोग करने वाला विजेट परिवर्तन को प्रदर्शित करने के लिए फिर से प्रदान किया जाता है।

Magento के ढांचे PHP सत्र और जेएस स्थानीय भंडारण ग्राहक डेटा के सिंक्रनाइज़ेशन के लिए जिम्मेदार है।

हर बार सत्र आईडी कुकी और खाली स्थानीय संग्रहण वाले आगंतुक Magento पेज पर जाते हैं, सर्वर से एक HTTP अनुरोध ग्राहक डेटा (सभी अनुभाग) को पुनः प्राप्त करने के लिए किया जाता है।

जब भी आगंतुक कुछ राज्य-संशोधित ऑपरेशन (कार्ट में जोड़ें, इच्छा-सूची में जोड़ें) करता है, तो ग्राहक डेटा के संबंधित अनुभाग को स्थानीय भंडारण में अमान्य कर दिया जाता है और अपडेट किए गए अनुभागों को पुनः प्राप्त करने के लिए एक अन्य HTTP अनुरोध किया जाता है।

आप POST क्रियाओं को स्थानीय संग्रहण अनुभागों से लिंक करने के लिए 'section.xml' का उपयोग कर सकते हैं जो कि जब भी उस क्रिया को कहा जाता है तो अमान्य हो जाएगा। उदाहरण के लिए https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml देखें ।

— एंटोन क्रिल
स्रोत

2

इन अन्य उत्तरों का निर्माण, यदि आप सामान्य मैगनेटो require.jsफ़ाइलों में एपीआई कॉल के माध्यम से गाड़ी को अपडेट कर रहे हैं , लेकिन आप ajaxCompleteमिनीकार्ट को रीफ्रेश करने के लिए jQuery विधि पर भरोसा नहीं कर सकते हैं (एक अन्य 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

— thaddeusmt
स्रोत