클라이언트측 쇼핑 카트

내 맥주 캔은 구매 버튼으로 작동하지만 먼저 장바구니에 제품을 추가하려면 어떻게 해야 합니까?

하지만 왜

물건을 쉽고 저렴하게 판매하려는 경우 Stripe를 제품 페이지에 직접 연결할 수 있습니다. stripe beer money 기사에서 이에 대한 예를 볼 수 있습니다.

주요 단점은 고객이 한 번에 한 가지만 구매해야 한다는 것입니다. 카트를 추가할 수 있지만 여전히 서버를 요구하고 싶지는 않습니다.

카트 만들기

카트의 경우 추가된 항목과 각 항목의 수를 추적하기만 하면 됩니다. 이 정보를 localstorage에 저장할 수 있습니다. 즉, 사용자가 페이지로 돌아오면 장바구니가 그대로 유지됩니다.

샘플 상점 페이지로 이것을 테스트했습니다. kasuboski/client-side-cart-example에서 코드를 볼 수 있습니다.



기본적으로 index.html 가 있는 단일 javascript 입니다. buttons 속성이 있는 data를 찾아 제품을 찾습니다. 이러한 속성은 제품 ID, 설명 및 가격을 지정합니다.

사용자가 버튼을 클릭하면 항목이 장바구니에 추가됩니다. 이렇게 하면 localstorage에서 카트를 로드하여 항목 수량을 업데이트하고 다시 저장합니다.

  function addToCart(data) {
    var cart = getCart()
    var prevQuantity = cart[data.id] ? cart[data.id].quantity : 0;
    cart[data.id] = {
      quantity: prevQuantity + 1,
      data,
    }

    localStorage.setItem('cart', JSON.stringify(cart));

    populateCart();
  }

populateCart 함수는 카트 영역을 매번 설정합니다. 여기에 멋진 것은 없습니다... 모든 장바구니 요소를 삭제하고 localstorage에 있는 항목을 기반으로 다시 만듭니다.

다음 단계 🦶

이것은 일반 카트로 작동하지만… 아무것도 살 수 없습니다. Stripe를 사용하여 물건을 사는 것을 보여주는 예제 상점을 만들 것입니다.

각 항목에는 Stripe Price가 필요하며 체크아웃할 때 Stripe 리디렉션을 호출합니다. 결국에는 통합도 더 쉽게 만들고 싶습니다. 아마도 이것을 실제 라이브러리로 만들 수 있습니다.