Magento 2: Đồng bộ hóa phần cuối và trạng thái Frontend / Cache

Magento 2 có bất kỳ hệ thống hoặc trừu tượng nào để quản lý trạng thái giữa phụ trợ và bộ nhớ cục bộ trên lối vào không?

Tôi đang làm việc để chuyển một tính năng để khôi phục giỏ hàng bị bỏ rơi của người dùng thông qua URL chuyển hướng. Ở dạng đơn giản, một URL như

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

sẽ tải một trích dẫn vào giỏ hàng của người dùng hiện tại dựa trên quote_id được mã hóa trong mã định danh.

Trong Magento 1, điều này tương đối đơn giản - bạn chỉ cần cập nhật thông tin phiên Checkout của người dùng với ID trích dẫn chính xác. Tuy nhiên, Magento 2 thêm vào các nếp nhăn của lưu trữ cục bộ .

Ứng dụng javascript của Magento 2 có vẻ như lưu trữ thông tin trong cơ sở dữ liệu lưu trữ cục bộ của trình duyệt. Điều này bao gồm thông tin để xây dựng các giỏ hàng nhỏ. Điều này có nghĩa là ngay cả khi một lập trình viên người dùng cuối (tôi) quản lý để thay đổi ID phiên phiên trong phần phụ trợ, mini-cart vẫn sẽ hiển thị dữ liệu giỏ hàng cũ .

Đây chỉ là một ví dụ về một vấn đề bắt nguồn từ việc không biết (hoặc có?) Một API duy nhất để quản lý trạng thái ứng dụng trong phần phụ trợ và giao diện. Đối với vấn đề cụ thể của tôi, tôi đã có điểm cuối hiển thị trang HTML bao gồm một số javascript, thủ công sẽ xóa bộ nhớ cục bộ và sau đó chuyển hướng người dùng sang một trang khác - nhưng điều này cảm thấy giống như một vụ hack.

Có API trong Magento 2 để quản lý dữ liệu giữa frontend và backend không?

Có một cách báo hiệu tiêu chuẩn cho toàn bộ hệ thống, trong quá trình xử lý phụ trợ, bạn đã làm gì khiến nó cần thiết để vô hiệu hóa bộ đệm lưu trữ cục bộ phía trước?

Có kỹ thuật tiêm mô-đun RequireJS mới vào trang chạy tự động và có thể thao tác lưu trữ cục bộ trước khi phần còn lại của ứng dụng javascript truy cập không?

Tôi gặp một vấn đề tương tự: Tôi muốn thành phần giỏ hàng nhỏ được làm mới sau khi tôi gửi yêu cầu Ajax để thêm một mục vào giỏ hàng.

Nó thực sự hoạt động khá độc đáo nếu bạn chỉ cần nhớ một số điểm:

• Khai báo những phần trang nào cần được cập nhật sau một lệnh gọi Ajax, trong etc / frontend / part.xml của mô-đun của bạn.
• Sử dụng jQuery.post () để gửi yêu cầu Ajax của bạn. Nó có thể là một yêu cầu POST hoặc PUT, chỉ không NHẬN.
• Và nó phải thông qua jQuery, không phải Prototype hay vanilla JS, vì đó là sự kiện 'ajaxComplete' của jQuery đóng vai trò thiết yếu.
• thêm vào url Ajax bằng url cơ sở (không chỉ bắt đầu bằng /)

Đây là phần của tôi (xyz là tên của khách hàng của chúng tôi):

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

Ở đây, 'xyz-ajax / cart / add' theo định dạng '[frontName] / [ActionPath] / [ActionName]'. Xml báo cho Magento cập nhật 'giỏ hàng' sau khi cuộc gọi ajax "xyz-ajax / giỏ hàng / thêm" đã hoàn tất.

Đây là mã mẫu (.phtml) của tôi:

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

và đây là mã JS gửi yêu cầu Ajax:

hàm requestComplete (answerData) {}

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

Điều gì xảy ra trong quá trình?

Mỗi khi tập lệnh của bạn gửi yêu cầu POST POST (hoặc PUT) tới máy chủ thông qua jQuery và nó trả về, jQuery sẽ gửi một sự kiện 'ajaxComplete'. Sự kiện này được xử lý bởi một trình xử lý trong mô-đun-khách hàng / xem / frontend / web / js / customer-data.js. Trình xử lý này kiểm tra các phần trang nào phụ thuộc vào lệnh gọi Ajax (từ tệp XML của bạn) và vô hiệu hóa chúng. Chúng sẽ được cập nhật.

Nguồn:

• Cách kích hoạt cập nhật minicart sau khi thêm vào giỏ hàng
• Magento 2: làm thế nào để các bộ phận / phần của khách hàng hoạt động?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2 sử dụng API dữ liệu khách hàng để thể hiện dữ liệu phiên của người dùng trong trình duyệt. Tất cả các tiện ích JS được yêu cầu truy xuất dữ liệu khách hàng từ API dữ liệu khách hàng. Dữ liệu khách hàng được chia thành các phần (giỏ hàng, danh sách mong muốn, ...). Mọi phân đoạn đều có thể quan sát được, vì vậy bất cứ khi nào nó được sửa đổi, tiện ích sử dụng nó sẽ được kết xuất lại để hiển thị thay đổi.

Khung Magento chịu trách nhiệm đồng bộ hóa phiên PHP và lưu trữ cục bộ Dữ liệu khách hàng của JS.

Mỗi khi khách truy cập có cookie ID phiên và bộ nhớ cục bộ trống truy cập trang Magento, yêu cầu HTTP đến máy chủ được thực hiện để truy xuất dữ liệu khách hàng (tất cả các phần).

Mỗi khi khách truy cập thực hiện một số thao tác sửa đổi trạng thái (thêm vào giỏ hàng, thêm vào wishlit), phần dữ liệu khách hàng tương ứng sẽ bị vô hiệu trong bộ nhớ cục bộ và một yêu cầu HTTP khác được thực hiện để truy xuất các phần được cập nhật.

Bạn có thể sử dụng 'phần XML' để liên kết các hành động POST với các phần lưu trữ cục bộ sẽ bị vô hiệu hóa bất cứ khi nào hành động đó được gọi. Xem https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml chẳng hạn.

Dựa trên các câu trả lời khác này, nếu bạn đang cập nhật giỏ hàng thông qua các lệnh gọi API trong require.jscác tệp Magento bình thường , nhưng bạn không thể dựa vào ajaxCompletephương thức jQuery để làm mới minicart (sử dụng khung yêu cầu AJAX khác?), Bạn có thể yêu cầuMagento_Customer/js/customer-data đối tượng và hỏi minicart để làm mới theo cách này, cũng:

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

Nguồn: https://github.com/magento/magento2/issues/5621