Alpine JS로 Shopify 장바구니에 추가하는 방법
가장 쉬운? 아니요. 그러나 가장 유연하고 확장 가능한 기능을 제공합니다.
더 많은 JavaScript를 사용하기 위해 Shopify 스토어의 프런트엔드.
JavaScript 접근 방식을 읽을 수도 있습니다.
How to Add to the Shopify Cart with Vanilla JS
코드를 작성해 봅시다. Alpine JS가 설치되어 있다고 가정합니다.
Alpine.store('cart', {
data: [],
add() {
let variant = Alpine.store('variant').selected
let quantity = Alpine.store('quantity').count
if (! variant) return
let cartData = {
id: variant.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) => {
// 🫠
})
}
}
Alpine.store('variant', {
selected: null,
set (variant) {
this.selected = variant
}
})
Alpine.store('quantity', {
count: 1,
set (quantity) {
this.count = quantity
}
})
당신은 생각하고 있을지도 모릅니다 ...
What?
그리고 예, 우리가 하고 있는 일에 비해 상당히 많은 일이지만 이 접근 방식을 기억하십시오.
유연성을 제공합니다.
그것을 분해합시다.
카트 스토어
이것은 본점이며 두 가지 중요한 부분이 있습니다.
이는 HTML에서
$store.cart.data로 액세스할 수 있으며JavaScript에서 Alpine.store('cart').data`.
이 예제에서 빠진 한 가지가 있습니다.
장바구니 데이터를 Shopify하여 Alpine JS 스토어에 저장합니다. 그것은 다음과 같이 보일 것입니다
이것.
js
get() {
fetch('/cart.js')
.then((response) => response.json())
.then((data) => (this.data = data))
.catch((error) => console.error(error))
}
Therefore, when the add() 함수가 호출됩니다.Alpine.store('cart').get() 스토어 Shopify 장바구니 데이터를 업데이트합니다.
배리언트 스토어
이것은 현재 선택된 변형을 추적합니다.
그런 다음 상점을 사용하여 변형에 대한 정보를 얻을 수 있습니다.
변형이 선택되었을 때 이미지 변경과 같은 기능에 사용됩니다.
제품 페이지.
수량 저장소
무시할 수 있는 매장입니다. 그러나 더 쉬운 방법을 제공합니다.
제품 양식에서 선택한 수량을 가져옵니다.
다음은 사용 방법을 보여주는 HTML입니다.
`html
Quantity
Add to Cart
`
If the add() 함수가 호출되지 않으면 다음을 추가할 수 있습니다.
`html
function addToCart() {
Alpine.store('cart').add()
}
`
And then call addToCart 에서 x-on:submit .
이제 Alpine JS로 구동되는 Shopify가 추가로 장바구니에 추가됩니다.
상점의 프런트엔드에 확장된 유연성을 제공하는 기능.
Reference
이 문제에 관하여(Alpine JS로 Shopify 장바구니에 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/markmead/how-to-add-to-the-shopify-cart-with-alpine-js-333c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
