Vanilla JS로 Shopify 카트에 추가하는 방법

따라서 Shopify 스토어가 있고 빠르고 판매가 빠르지만 고객이 묻습니다...

Can we allow customers to add to cart from the collection page?

공황. 하지만 하지 마세요. 바닐라 JavaScript로 할 수 있는 간단한 추가 작업입니다.

다음은 우리가 사용할 수 있는 기능입니다.

function addToCart(id, quantity = 1) {
  let cartData = {
    id: id,
    quantity: quantity,
  }

  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(cartData),
  })
    .then((response) => {
      if (response.ok) {
        // 🚀
      } else {
        // 🫠
      }
    })
    .catch((error) => {
      // 🫠
    })
}

이게 뭐하는거야? 하지 많은...

데이터 가져오기

데이터를 JavaScript 객체로 변환합니다

.

해당 데이터를 Shopify API 엔드포인트로 전송

응답 및 오류 처리

매우 간단한 JavaScript 함수이며 복잡성은 다음을 기반으로 수행할 작업입니다.
그러나 그것은 당신과 프로젝트의 요구에 달려 있습니다.

How do I call that function?

좋은 질문입니다. 여기에 HTML이 있습니다. 그것은 당신이 할 수있는 스타일의 형태입니다
Shopify 스토어에서 찾으십시오.

<form id="ProductForm">
  <div>
    <label for="ProductQty"> Quantity </label>

    <input type="number" id="ProductQty" />
  </div>

  <div>
    <label for="ProductId"> Quantity </label>

    <input
      type="hidden"
      id="ProductId"
      value="{{ product.selected_or_first_available_variant.id }}"
    />
  </div>

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

그런 다음 다음 JavaScript를 작성하여 양식에서 데이터를 가져오고
이전에 만든 함수로 보냅니다.

let formEl = document.getElementById('ProductForm')
let formQty = document.getElementyById('ProductQty').value
let formVariant = document
  .getElementById('ProductId')
  .getAttribute('data-variant-id')

submitButton.addEventListener('click', (event) => {
  event.preventDefault()

  addToCart(formVariant, formQty)
})

이제 모두 연결되었습니다. 양식을 제출하면 제품이
JavaScript를 통한 장바구니 🚀

비동기 대기 사용

async await 를 사용할 수도 있습니다. 다음은 그 모습입니다.

async function addToCart(id, quantity = 1) {
  let cartData = {
    id: id,
    quantity: 1,
  }

  let { response } = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(cartData),
  })

  if (response.ok) {
    // 🚀
  } else {
    // 🫠
  }
}