Alpine JS로 Shopify 카트를 지우는 방법

최근에 Shopify 테마를 개발할 때 Alpine JS를 많이 사용하고 있는데 지금까지 매우 잘 작동했습니다.

최신 버전의 Alpine JS(버전 3) 덕분에 이제 기본적으로 Alpine JS 스토어에 액세스할 수 있습니다! 🥳

Alpine JS Stores Documentation

즉, 특정 상태 관리(이 경우에는 Shopify 카트)를 위한 정보 소스를 생성할 수 있습니다.
assets/theme.js 또는 layouts/theme.liquid 에 배치할 "장바구니"라는 새 Alpine JS 상점을 만들어 보겠습니다.
assets/theme.js를 사용하는 경우 Alpine JS를 모듈로 가져와야 합니다.

여기 카트용 Alpine JS 매장이 있습니다.

Alpine.store('cart', {
  data: null,

  clearCart() {
    fetch('/cart/clear.js, { method: 'POST' })
      .then((response) => response.ok && this.getCart())
  },

  getCart() {
    fetch('/cart.js')
      .then((response) => response.json())
      .then((data) => this.data = data)
      .catch((error) => console.error(error))
  }
})

이것이 무엇을 하는지 분석해 봅시다.


ID
유형
설명

data변하기 쉬운getCart에서 설정된 모든 카트 데이터를 유지합니다.
clearCart기능
카트를 비운 다음 완료되면 getCart를 호출합니다.
getCart기능
현재 장바구니를 가져와 data 변수에 저장합니다.


당신이 가질 수 있는 한 가지 질문은 우리가 클리어 후 왜 우리가 getCart에 전화를 하느냐는 것입니다. data 변수를 재설정할 수 있습니다.
response.ok && this.cart = null를 사용하여 이 작업을 수행하는 또 다른 접근 방식이 있지만 접근 방식은 사용자의 선택이며 둘 다 매우 빠릅니다.

마지막 부분은 HTML입니다. 고맙게도 Alpine JS는 저장소를 $store 변수에 노출합니다. 따라서 다음 코드를 사용하여 장바구니를 비우는 버튼을 만들 수 있습니다.

<button x-data type="button" @click="$store.cart.clearCart">Clear Cart</button>

그게 다야. 이제 $store.cart.clearCart를 가져와 Shopify 스토어에서 장바구니를 비워야 하는 곳에 놓을 수 있습니다.

장바구니 지우기 버튼이 form 내에 있는 경우 버튼에 type='button'를 추가하여 양식 제출을 방지해야 합니다.

장바구니 페이지나 장바구니 팝업/서랍 내에서 이것을 사용하는 경우 장바구니가 비었음을 사용자에게 표시하도록 UI를 처리하고 싶을 것입니다.