마 젠토 2 : 백엔드 및 프론트 엔드 상태 / 캐시 동기화

Magento 2에 백엔드와 프런트 엔드의 로컬 스토리지 간 상태를 관리하기위한 시스템이나 추상화가 있습니까?

리디렉션 URL을 통해 사용자의 버려진 장바구니를 복원하기위한 기능을 포팅하는 중입니다. 단순화 된 형태로

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

식별자의 인코딩 된 quote_id를 기반으로 현재 사용자의 장바구니에 견적을로드합니다.

Magento 1에서는 비교적 간단했습니다. 사용자의 Checkout 세션 정보를 올바른 인용 ID로 업데이트하기 만하면됩니다. 그러나 Magento 2는 로컬 스토리지 의 주름을 추가합니다 .

Magento 2 프론트 엔드 자바 스크립트 응용 프로그램은 브라우저의 로컬 저장소 데이터베이스에 정보를 캐시하는 것 같습니다. 여기에는 미니 카트 작성에 대한 정보가 포함됩니다. 이것이 의미하는 바는 최종 사용자 프로그래머 (me)가 백엔드에서 세션 세션 ID를 변경하도록 관리하더라도 미니 카트에는 여전히 이전 카트 데이터가 표시됩니다 .

백엔드와 프론트 엔드에서 애플리케이션 상태를 관리하기위한 단일 API를 모르거나 가지고 있지 않은 문제의 예일뿐입니다. 내 특정 문제에 대해 내 엔드 포인트에서 일부 자바 스크립트가 포함 된 HTML 페이지를 렌더링하여 로컬 저장소를 수동으로 지우고 사용자를 다른 페이지로 리디렉션합니다. 그러나 이것은 해킹처럼 느껴집니다.

Magento 2에 프론트 엔드와 백엔드 간의 데이터 관리를위한 API가 있습니까?

백엔드 처리 중에 프론트 엔드 로컬 스토리지 캐시를 무효화하는 데 필요한 것을 수행 한 전체 시스템을 신호하는 표준 방법이 있습니까?

자바 스크립트 애플리케이션의 나머지 부분이 액세스하기 전에 자동으로 실행되고 로컬 스토리지를 조작 할 수있는 페이지에 새 RequireJS 모듈을 삽입하는 기술이 있습니까?

비슷한 문제가있었습니다. 장바구니에 상품을 추가하라는 Ajax 요청을 보낸 후 미니 카트 구성 요소를 새로 고치려고했습니다.

실제로 몇 가지 요점을 기억하면 실제로 잘 작동합니다.

• 모듈의 etc / frontend / sections.xml에서 Ajax 호출 후 업데이트해야하는 페이지 섹션을 선언하십시오.
• jQuery.post ()를 사용하여 Ajax 요청을 보내십시오. GET이 아닌 POST 또는 PUT 요청 일 수 있습니다.
• jQuery의 'ajaxComplete'이벤트가 필수 역할을하기 때문에 프로토 타입이나 바닐라 JS가 아닌 jQuery를 거쳐야합니다.
• 기본 URL 앞에 Ajax URL을 추가하십시오 (/로 시작하지 마십시오)

다음은 profiles.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은 아약스 호출 "xyz-ajax / cart / add"가 완료된 후 Magento에 'cart'를 업데이트하도록 지시합니다.

이것은 내 템플릿 (.phtml) 코드입니다.

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

그리고 이것은 Ajax 요청을 보내는 JS 코드입니다.

함수 requestComplete (responseData) {}

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

이 과정에서 어떤 일이 발생합니까?

스크립트가 jQuery를 통해 Ajax POST (또는 PUT) 요청을 서버에 보낼 때마다 jQuery는 'ajaxComplete'이벤트를 보냅니다. 이 이벤트는 module-customer / view / frontend / web / js / customer-data.js의 핸들러에 의해 처리됩니다. 이 핸들러는 (section.xml에서) Ajax 호출에 의존하는 페이지 섹션을 확인하고 무효화합니다. 이것들이 업데이트됩니다.

출처 :

• 장바구니에 담은 후 미니 카트 업데이트를 시작하는 방법
• 마 젠토 2 : 고객 섹션 /sections.xml은 어떻게 작동합니까?
• https://alankent.me/2014/12/09/magento-2-caching-overview/

Magento 2는 Customer Data JS API를 사용하여 브라우저에서 사용자 세션 데이터를 나타냅니다. 모든 JS 위젯은 Customer Data JS API에서 고객 데이터를 검색해야합니다. 고객 데이터는 섹션 (카트, 위시리스트 등)으로 분할됩니다. 모든 세그먼트는 관찰 가능하므로 수정 될 때마다 해당 세그먼트를 사용하는 위젯이 다시 렌더링되어 변경 사항을 표시합니다.

Magento 프레임 워크는 PHP 세션과 JS 로컬 스토리지 고객 데이터의 동기화를 담당합니다.

세션 ID 쿠키가 있고 빈 로컬 스토리지가있는 방문자가 Magento 페이지를 방문 할 때마다 서버에 대한 HTTP 요청이 고객 데이터 (모든 섹션)를 검색합니다.

방문자가 상태 수정 작업 (카트에 추가, Wishlit에 추가)을 수행 할 때마다 고객 데이터의 해당 섹션이 로컬 스토리지에서 무효화되고 업데이트 된 섹션을 검색하기위한 다른 HTTP 요청이 작성됩니다.

'sections.xml'을 사용하여 POST 조치를 해당 조치가 호출 될 때마다 무효화되는 로컬 스토리지 섹션에 링크 할 수 있습니다. 예를 들어 https://github.com/magento/magento2/blob/develop/app/code/Magento/Checkout/etc/frontend/sections.xml 을 참조 하십시오 .

이러한 다른 답변을 기반으로 일반 Magento require.js파일 에서 API 호출을 통해 장바구니를 업데이트 하지만 jQuery ajaxComplete메소드를 사용하여 미니 카트를 새로 고치려면 (다른 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