Magento 2: การซิงค์แบ็คเอนด์และส่วนหน้าของรัฐ / แคช

Magento 2 มีระบบหรือ abstractions สำหรับจัดการสถานะระหว่างแบ็กเอนด์และที่เก็บข้อมูลโลคัลบนส่วนหน้าหรือไม่?

ฉันกำลังทำงานในการย้ายคุณลักษณะสำหรับการกู้คืนรถเข็นที่ถูกทอดทิ้งของผู้ใช้ผ่าน URL การเปลี่ยนเส้นทาง ในรูปแบบที่เรียบง่ายเช่น URL

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

จะโหลดเครื่องหมายคำพูดลงในรถเข็นของผู้ใช้ปัจจุบันโดยอ้างอิงจาก quote_id ที่เข้ารหัสในตัวระบุ

ใน Magento 1 สิ่งนี้ค่อนข้างง่าย - คุณเพียงแค่ต้องอัปเดตข้อมูลเซสชัน Checkout ของผู้ใช้ด้วย ID ใบเสนอราคาที่ถูกต้อง อย่างไรก็ตามวีโอไอพี 2 เพิ่มในริ้วรอยของการจัดเก็บข้อมูลในท้องถิ่น

แอปพลิเคชันส่วนหน้าของ Magento 2 ดูเหมือนว่าจะแคชข้อมูลในฐานข้อมูลที่จัดเก็บในท้องถิ่นของเบราว์เซอร์ ซึ่งรวมถึงข้อมูลสำหรับการสร้างมินิรถเข็น สิ่งนี้หมายความว่าถึงแม้ว่าผู้ใช้งานโปรแกรมเมอร์ (ฉัน) จัดการเพื่อเปลี่ยนเซสชัน ID เซสชันในแบ็กเอนด์มินิเกวียนจะยังคงแสดงข้อมูลรถเข็น เก่า

นี่เป็นเพียงตัวอย่างหนึ่งของปัญหาที่เกิดจากการไม่รู้ (หรือมี) API เดียวสำหรับการจัดการสถานะแอปพลิเคชันในส่วนแบ็คเอนด์และส่วนหน้า สำหรับปัญหาเฉพาะของฉันฉันมีปลายทางของฉันแสดงหน้า HTML ที่มีจาวาสคริปต์บางส่วนล้างข้อมูลด้วยตนเองที่จัดเก็บในท้องถิ่นแล้วเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่น - แต่มันรู้สึกเหมือนแฮ็คขั้นต้น

Magento 2 มี API สำหรับจัดการข้อมูลระหว่างส่วนหน้าและส่วนหลังหรือไม่?

มีวิธีมาตรฐานในการส่งสัญญาณระบบทั้งหมดซึ่งในระหว่างการประมวลผลส่วนหลังคุณได้ทำอะไรบางอย่างที่ทำให้มันจำเป็นต้องทำให้แคชหน่วยเก็บข้อมูลส่วนหน้าใช้ไม่ได้หรือไม่

มีเทคนิคในการฉีดโมดูล RequireJS ใหม่ลงในหน้าเว็บที่ทำงานโดยอัตโนมัติและสามารถจัดการกับหน่วยความจำภายในก่อนที่จะเข้าถึงแอพพลิเคชั่น javascript ที่เหลือได้หรือไม่?

ฉันมีปัญหาที่คล้ายกัน: ฉันต้องการให้ส่วนประกอบรถเข็นขนาดเล็กเพื่อรีเฟรชหลังจากที่ฉันส่งคำขอ Ajax เพื่อเพิ่มรายการในรถเข็น

มันใช้งานได้ดีจริง ๆ ถ้าคุณจำบางจุด:

• ประกาศส่วนของหน้าที่ต้องได้รับการปรับปรุงหลังจากการเรียก Ajax ใน / etc / frontend / section.xml ของโมดูลของคุณ
• ใช้ jQuery.post () เพื่อส่งคำขอ Ajax ของคุณ อาจเป็นคำขอ POST หรือ PUT ไม่ใช่ GET
• และจะต้องผ่าน jQuery ไม่ใช่ Prototype หรือ vanilla JS เพราะเป็นเหตุการณ์ 'ajaxComplete' ของ jQuery ที่มีบทบาทสำคัญ
• เติม Ajax url ด้วย base-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]' xml บอก Magento ให้อัปเดต 'รถเข็น' หลังจากโทร ajax "xyz-ajax / ตะกร้า / เพิ่ม" เสร็จสมบูรณ์

นี่คือรหัสเทมเพลตของฉัน (.phtml):

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

และนี่คือรหัส JS ที่ส่งคำขอ Ajax:

ฟังก์ชัน requestComplete (responseData) {}

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

เกิดอะไรขึ้นในกระบวนการ?

ทุกครั้งที่สคริปต์ของคุณส่งคำขอ Ajax POST (หรือ PUT) ไปยังเซิร์ฟเวอร์ผ่าน jQuery และส่งคืน jQuery ส่งกิจกรรม 'ajaxComplete' เหตุการณ์นี้จัดการโดยตัวจัดการใน module-customer / view / frontend / web / js / customer-data.js ตัวจัดการนี้จะตรวจสอบว่าส่วนของหน้าใดขึ้นอยู่กับการเรียกใช้ Ajax (จากส่วนของคุณ. xml) และทำให้การใช้งานไม่ถูกต้อง สิ่งเหล่านี้จะได้รับการอัพเดต

แหล่งที่มา:

• วิธีการทริกเกอร์การอัปเดต minicart หลังจากเพิ่มลงในรถเข็น
• Magento 2: ส่วนของลูกค้า / section.xml ทำงานอย่างไร
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 ใช้ Customer Data JS API เพื่อแสดงข้อมูลเซสชันผู้ใช้ในเบราว์เซอร์ วิดเจ็ต JS ทั้งหมดควรดึงข้อมูลลูกค้าจากข้อมูลลูกค้า JS API ข้อมูลลูกค้าถูกแบ่งออกเป็นส่วน ๆ (รถเข็นสิ่งที่ปรารถนา ... ) ทุกเซ็กเมนต์สามารถสังเกตได้ดังนั้นเมื่อใดก็ตามที่มีการแก้ไขวิดเจ็ตที่ใช้จะถูกแสดงผลซ้ำเพื่อแสดงการเปลี่ยนแปลง

กรอบวีโอไอพีมีหน้าที่ในการซิงโครไนซ์เซสชัน PHP และข้อมูลลูกค้า JS ที่เก็บข้อมูลในเครื่อง

ทุกครั้งที่ผู้เยี่ยมชมที่มีคุกกี้ ID เซสชันและหน้าการเยี่ยมชมพื้นที่เก็บข้อมูลในเครื่องว่างเปล่าวีโอไอพีจะมีการร้องขอ HTTP ไปยังเซิร์ฟเวอร์เพื่อดึงข้อมูลลูกค้า (ทุกส่วน)

ทุกครั้งที่ผู้เข้าชมทำการดำเนินการแก้ไขสถานะ (เพิ่มในรถเข็นเพิ่มไปยังสิ่งที่ปรารถนา) ส่วนที่เกี่ยวข้องของข้อมูลลูกค้าจะไม่ถูกต้องในที่จัดเก็บในตัวเครื่องและคำขอ HTTP อื่นเพื่อทำการดึงส่วนที่อัปเดต

คุณสามารถใช้ 'section.xml' เพื่อเชื่อมโยงการกระทำ POST กับส่วนที่จัดเก็บในตัวเครื่องที่จะถูกยกเลิกเมื่อใดก็ตามที่มีการเรียกการกระทำนั้น ดูhttps://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xmlตัวอย่างเช่น

หากคุณกำลังอัปเดตรถเข็นผ่านการโทร API ในrequire.jsไฟล์Magento ปกติแต่คุณไม่สามารถพึ่งพาajaxCompleteวิธีjQuery เพื่อรีเฟรช minicart (โดยใช้เฟรมเวิร์กคำขอ AJAX อื่นได้หรือไม่) คุณสามารถMagento_Customer/js/customer-dataขอวัตถุและถาม minicart เพื่อรีเฟรชด้วยวิธีนี้เช่นกัน:

<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