alimac83 alimac83 - 6 months ago 43
Javascript Question

How do I store a simple cart using localStorage?

I'm trying to create a javascript cart for a prototype project I'm working on. I realise that in this situation an MVC framework like Angular/Knockout etc would be absolute perfect but I'm still learning how to use those so I can't use them for this particular project. I also realise I could maintain the cart server-side but that's not an option in this scenario.

At the moment I have a list of html products like so:

<ul id="products">
<li data-id="1" data-name="Product 1" data-price="10.00">
<input type="text" /><br />
<button>Add to cart</button>
</li>
<li data-id="2" data-name="Product 2" data-price="15.00">
<input type="text" /><br />
<button>Add to cart</button>
</li>
<li data-id="3" data-name="Product 3" data-price="20.00">
<input type="text" /><br />
<button>Add to cart</button>
</li>
</ul>


On page load I create an empty 'cart' object in localStorage like so:

var cart = {};
cart.products = [];

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


I've then bound to the click event of the button element as so:

$('button').on('click', function(e) {
var product = $(this).parent();

var quantity = $(product).find('input[type=text]').val();

// Ensure a valid quantity has been entered
if (!isValidInteger(quantity) === true) {
alert('Please enter a valid quantity');
return;
}

product.id = $(product).attr('data-id');
product.name = $(product).attr('data-name');
product.price = $(product).attr('data-price');
product.quantity = quantity;

addToCart(product);
});


I've then written an addToCart() function that should take this product and try to push it into the 'products' array that's a property of 'cart':

function addToCart(product) {
// Retrieve the cart object from local storage
if (localStorage && localStorage.getItem('cart')) {
var cart = JSON.parse(localStorage.getItem('cart'));

cart.products.push(product);

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


This isn't working and I'm getting an error:

Uncaught TypeError: Converting circular structure to JSON


I don't understand where I'm going wrong, is anyone able to help?

Also once this is resolved, I'm a little confused as to how I'm to maintain the state of the cart. I was hoping I could store all the data in the 'cart' object in localStorage by storing the product ids, names, prices and quantities and then reflecting this in a 'cart' div within the html. If items are added/removed, I'll update the 'cart' object in local storage and then reflect the changes within the html.

Is there a simpler way to do this? I could really use some pointing in the right direction.

Once again I realise that using Angular or even maintaining the state server-side would be an optimal solution but for this project I'm only able to use jquery/javascript so I need to work within my boundaries.

Thanks!

Answer

You should declare a separate object for your product item.

$('button').on('click', function(e) {
    var li = $(this).parent();

    var quantity = $(li).find('input[type=text]').val();

    // Ensure a valid quantity has been entered
    if (!isValidInteger(quantity) === true) {
        alert('Please enter a valid quantity');
        return;
    }

    var product = {};
    product.id = $(li).attr('data-id');
    product.name = $(li).attr('data-name');
    product.price = $(li).attr('data-price');
    product.quantity = quantity;

    addToCart(product);
});