window.aftersell.cart.events 아래에 있어요.
구독은 설정용 호출이므로 스크립트 맨 위에서 해도 안전하며, ready()를 기다릴 필요가 없어요.
사용 가능한 이벤트
구독하기
events.on(event, handler)는 핸들러를 등록하고 구독을 해제하는 함수를 반환해요:
events.once(event, handler): 한 번 실행된 후 스스로 구독을 해제해요.events.off(event, handler): 특정 핸들러를 제거해요.
두 가지 규칙
가드 없이 cart_updated에서 장바구니를 변경하지 마세요
cart_updated 핸들러 안에서 장바구니를 변경하면 cart_updated가 다시 발생해요. 그 핸들러가 장바구니를 또 변경하면 무한 루프가 생겨요. 페이지가 Shopify를 두들기는 동안 쇼핑객은 장바구니가 요동치는 것을 보게 돼요.
페이로드는 읽기 전용으로 다루세요
registerLineTransform을 사용하세요.
cart_loaded
cart_loaded는 늦은 구독자에게 재생돼요. 장바구니가 이미 로드된 후 구독하면 핸들러가 현재 장바구니와 함께 즉시 호출돼요. 구독 순서는 전혀 중요하지 않으므로, 스크립트가 장바구니보다 먼저 실행됐는지 걱정할 필요가 없어요.
cart_updated
item_added
{ item }이며, item은 장바구니 라인이에요.
cart_loaded를 통해 도착해요. 서로 다른 상품 여러 개를 한 번에 추가하면 라인당 한 번씩 이벤트가 발생해요.
item_removed
{ item }으로, 사라지기 직전의 라인이므로 key, variantId, title을 여전히 읽을 수 있어요.
item_added와 같은 주의 사항이 있어요: 0에 도달하지 않는 수량 감소는 제거가 아니에요.
cart_opened와 cart_closed
checkout
SDK 외부에서 수신하기
window에서 DOM CustomEvent로도 디스패치되므로, window.aftersell.cart를 건드리지 않고도 수신할 수 있어요. 테마 파일, 서드파티 앱, 장바구니와 독립적으로 로드되는 스크립트에서 유용해요.
이름에 주의하세요: 버스는
snake_case를, DOM 이벤트는 aftersell:cart: 접두사 뒤에 kebab-case를 사용해요.
event.detail에 담기며 cart 객체와 일치해요. 이벤트는 window에서 디스패치되므로 페이지 어디에 있는 리스너든 받을 수 있어요. 장바구니는 shadow root에서 렌더링되지만, shadow 경계는 이벤트 경로에 절대 포함되지 않아요. 디스패치마다 페이로드가 복제되므로, event.detail을 변경하는 리스너가 다른 리스너에 영향을 줄 수 없고, 예외를 던지는 리스너도 SDK를 방해할 수 없어요.
Shopify 표준 장바구니 이벤트
document에서 Shopify의 표준 장바구니 이벤트를 발행하므로, 테마 코드와 다른 앱이 테마의 변경에 반응하는 것과 같은 방식으로 Aftersell의 변경에 반응할 수 있어요:
각 이벤트에는 기반 쓰기 작업이 완료될 때 Aftersell이 settle하는
promise도 담겨 있어요. Shopify 표준과 일치해요 — await하고, 직접 resolve하지 마세요. 이 이벤트들은 document에서 디스패치되고 버블링되므로 window 리스너도 받을 수 있어요.