Client Side Shopping Cart
Posted on by Josh Kasuboski · 2min read
I have my beer can working as a buy button, but what if you want to add products to a cart first.
But Why
If you’re trying to sell things easily (and cheaply) you can connect Stripe directly to a product page. You can see an example of this from the stripe beer money article.
The main downside is that a customer would have to buy one thing at a time. We can add a cart, but still don’t want to require a server.
Creating a Cart
For a cart, we just need to keep track of items added and how many of each. We can store this information in localstorage. This means if a user comes back to the page, their cart will still be there.
I tested this out with a sample store page. You can see the code at kasuboski/client-side-cart-example.
It’s basically a single index.html
with javascript
. It looks for products by finding buttons
with data
attributes. These attributes specify the product id, description and price.
When a user clicks the button, the item is added to the cart. This just loads the cart from localstorage
updates the item quantity and saves it back.
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();
}
The populateCart
function sets up the cart area every time. There isn’t anything fancy here… it just deletes all of the cart elements and recreates based on what’s in localstorage
.
Next Steps 🦶
This works as a generic cart… but you can’t buy anything. I’m going to make an example store to show buying items using Stripe.
Each item will need a Stripe Price and then when you Checkout it will call the Stripe redirect. Eventually, I want to make it easier to integrate as well. Maybe making this an actual library.