Shopify 장바구니 업데이트 수량 듣기

Aug 17 2020

Shopify 앱을 작성 중이며 shopify 카트 업데이트 이벤트를 듣고 싶습니다. 사용자가 항목 수량을 제거하거나 늘리기를 클릭하면 알고 있습니다. Shopify는 카드를 업데이트하기 위해 백엔드에 POST 요청을 보냅니다. 내 앱은 shopify 장바구니 항목 수량을 기준으로 배송비를 계산합니다. 스크립트 태그를 통해 shopify에 내 앱 스크립트를 추가합니다.

수량 입력을 들으려고했지만이 이벤트는 하나만 발생합니다. 나는 shopify가 모든 카트 업데이트 후 입력 DOM을 업데이트하여 내 리스너를 제거 할 수 있다고 생각합니다.

 $('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});

카트 업데이트 이벤트를 어떻게들을 수 있습니까? 간단한 질문 인 것 같지만 Shopify에 대한 답을 찾을 수 없습니다!

답변

6 BilalAkbar Aug 20 2020 at 13:00

따라서 Shopify 카트를 업데이트하는 방법에는 두 가지가 있습니다. 양식 제출 또는 Ajax API를 사용합니다. 페이지로드시 배송 계산 함수를 호출하여 양식 제출 사례를 이미 해결했다고 가정합니다. Ajax 기반 장바구니 업데이트의 경우 표준 이벤트가 없습니다. 일부 테마는 장바구니 업데이트시 이벤트를 발생시킬 수 있지만, 일반 앱의 경우 정의 된 표준 동작이 없기 때문에 의존 할 수 없습니다.

따라서 할 수있는 일은 AJAX 호출을 듣고 조건과 일치하는 경우 함수를 호출하는 것입니다. Shopify Docs for Ajax API 에는 카트를 업데이트 할 수있는 4 가지 유형의 POST 요청이 나열되어 있습니다. 따라서 XMLHttpRequest 의 열기 함수를 패치 하여 요청이 성공적으로 완료 될 때 발생 하는 로드에 대한 이벤트 리스너를 추가합니다 . 이벤트 콜백에서 URL이 장바구니 업데이트에 사용 된 URL인지 확인한 다음 업데이트 배송 기능을 호출합니다.

const open = window.XMLHttpRequest.prototype.open;

function openReplacement() {
  this.addEventListener("load", function () {
    if (
      [
        "/cart/add.js",
        "/cart/update.js",
        "/cart/change.js",
        "/cart/clear.js",
      ].includes(this._url)
    ) {
      calculateShipping(this.response);
    }
  });
  return open.apply(this, arguments);
}

window.XMLHttpRequest.prototype.open = openReplacement;

function calculateShipping(cartJson) {
  console.log("calculate new shipping");
  console.log(JSON.parse(cartJson));
}

Nicolas의 답변으로 얻은 아이디어

ajaxComplete 는 jQuery를 사용하여 만든 요청 만 수신하기 때문에 사용되지 않았습니다.

Shipping 함수에 응답을 전달하면 추가 Get Cart Ajax 호출이 저장됩니다.

최신 정보

위의 코드가 작동하지 않거나 모든 호출을 포착하지 못하는 경우 카트를 업데이트하는 데 사용되는 경우 모든 Fetch API 호출을 수신하는 다른 답변을 참조하십시오.

Fetch API를 사용하여 장바구니 변경 사항 듣기

Yashchitroda Aug 20 2020 at 13:03

섹션 테마에서 장바구니의 품목 수량 필드를 업데이트하려면

1 단계 : Shopify 관리자에 액세스하고 온라인 스토어를 클릭 한 다음 테마로 이동합니다.

2 단계 : 편집 할 테마를 찾은 다음 작업을 누른 다음 코드 편집을 누릅니다.

3 단계 : 섹션을보고 cart-template.liquid를 클릭합니다. 주소가없는 테마를 사용하지 않는 경우 Template 디렉토리에 접속하여 cart.liquid를 클릭하시면됩니다.