Alpine JS를 사용하여 Shopify에서 제품 데이터를 얻는 방법

이 게시물에서는 Alpine JS를 사용하여 Shopify API에서 제품 데이터를 가져오는 두 가지 방법을 살펴보겠습니다.

Shopify 2.0을 사용하는 Shopify의 새로운 오픈 소스 테마인 Dawn을 사용하고 있다면 다음 코드를 보았을 것입니다.

<script type="application/json">
  {{ product | json }}
</script>

이렇게 하면 제품 데이터가 JSON으로 렌더링되어 JavaScript를 통해 가져올 수 있습니다.

JSON.parse(document.querySelector('[type="application/json"]').textContent)

이 접근 방식은 훌륭하게 작동하고 나에게 새로운 개념입니다. 감사합니다. Shopify 🙌

이 프로세스의 다음 단계는 Alpine.data()를 사용할 수 있는 Alpine JS로 데이터를 가져오는 것입니다.

<div x-data="product">
  <h1>Product Title</h1>

  <p x-text="variant.title"></p>

  <p x-money="variant.price"></p>

  <form>
    <input type="text" name="id" x-model="variant.id" />

    <button type="submit">Add to Cart</button>
  </form>

  <script type="application/json">
    {{ product | json }}
  </script>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('product', () => ({
      data: '',
      variant: '',

      init() {
        this.data = JSON.parse(
          document.querySelector('[type="application/json"]').textContent
        )

        this.activeVariant()
        this.listenForChange()
      },

      activeVariant() {
        const variantId = this.getVariantParam()

        this.variant = variantId
          ? this.data.variants.find((variant) => variant.id === variantId)
          : this.data.variants[0]
      },

      listenForChange() {
        document.addEventListener('change', () => {
          this.activeVariant()
        })
      },

      getVariantParam() {
        const params = new URLSearchParams(window.location.search)
        const variantId = Number(params.get('variant'))

        return variantId
      },
    }))
  })
</script>

x-money는 | money 필터를 복제하는 사용자 지정 Alpine JS 지시문입니다. 여기에서 확인하세요Alpine JS Money .

먼저 Alpine JS의 init() 함수에서 모든 일이 발생합니다.

init() {
  this.data = JSON.parse(
    document.getElementById('productData').textContent
  )

  this.activeVariant()
  this.listenForChange()
}

먼저 data 변수 값을 Liquid에서 가져올 수 있는 JSON 제품 데이터로 설정합니다.

그런 다음 두 가지 기능이 있습니다. activeVariant() 및 listenForChange() .

여기 그들이 하는 일이 있습니다.
activeVariant()
이 함수는 URL에서 변형 매개변수를 반환하는 다른 함수getVariantParam()를 호출하고 이 값은 variantId의 로컬 변수로 설정됩니다.

그런 다음 data 개체의 변형 배열에서 variantId를 기반으로 일치하는 항목을 확인하고, 일치하는 항목이 없으면 기본적으로 변형 배열의 첫 번째 변형을 사용합니다. 그런 다음 variant 변수를 반환된 변형으로 설정합니다.

변형 배열은 {{ product | json }} 내에 포함됩니다.
listenForChange()
이것은 change를 호출하는 문서에 activeVariant() 이벤트 리스너를 설정하여 variant 변수를 제품 양식의 사용자 변경 사항으로 최신 상태로 유지할 수 있습니다.

Async/Await로 Shopify 제품 데이터 가져오기

이것은 Shopify API를 사용하는 대체 접근 방식이며 많은 변경이 필요하지 않습니다. 다음을 추가한 경우 제거해도 괜찮다는 점은 주목할 가치가 있습니다.

<script type="application/json">
  {{ product | json }}
</script>

Dawn을 사용 중이거나 이미 테마에 포함되어 있는 경우 제거하지 마십시오.

이를 위해 Shopify API를 사용하는 것은 init() 함수에서 JSON 제품 데이터를 가져오는 방식을 업데이트하는 것만큼 간단합니다.

여기에 새로운 기능이 있습니다.

async init() {
  const res = await fetch('/products/{{ product.handle }}.js')
  const data = await res.json()

  this.data = data

  this.activeVariant()
  this.listenForChange()
}

이것은 현재 제품에 대해 Shopify API 끝점을 사용하고 있으며 응답에서 data를 가져옵니다. 그런 다음 data 변수를 반환되는 데이터로 설정합니다.

거기에서 그것은 평소와 같이 사업입니다.

어떤 방법이 더 낫습니까? 그것은 개인적인 선택입니다. 개인적으로 나는 첫 번째 사용 방법{{ product | json }}을 선호합니다. Shopify가 Dawn에서 취한 접근 방식이고 한 번 설명하면 이해하기 더 쉽다고 생각합니다.

새로운 Dawn 테마와 함께 이 게시물의 기본 예제에 포함된 내용을 처리하는 JavaScript와 함께 제공됩니다. 그러나 이를 확장하려면 Shopify가 Dawn과 함께 제공한 기본 JavaScript 편집을 시작해야 합니다.

이것은 큰 문제가 아니며 실제로 Dawn 테마에 대해 자세히 알아볼 수 있는 좋은 방법이지만 쉽게 복잡해질 수 있습니다. 따라서 Dawn JavaScript와 함께 Alpine JS를 실행하고 점진적으로 대체하는 것이 좋습니다.