This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chris Camargo
Posted Mar 14 - Read on Facebook

I'm working on a prototype with shopping cart functionality. To keep track of what's in the cart, I use an array. As the user adds products to the cart, I simply add an object to the array that contains the name and price of the item, which will feed the cart's display and price calculations.

When the user adds more than one of the same product type to the cart, I just add another object with name and price. So, in practice, it's possible that multiple objects appear in the cart array that are identical.

My question is – how would I go about removing an item from the cart array, without knowing its index, and with the possibility that multiple items in the array may have the same value?

And overall – is this how you would go about constructing a simple cart in JavaScript? Anything else I should consider?

7 Comments

George Kedenburg III

id probably mix objects and arrays here... store an object in the array that has an item ID and a quantity. when you add an item to the cart, first loop through the existing cart and see if it exists. if it does, increment the quantity. to remove, loop through the cart and remove the item with the matching ID.

Kevyn Arnott

For speed's sake, you may just want to keep a big array with all possible objects where you track quantity. In this approach, you'd just increment or decrement an object's quantity, and then only show it in the UI if the quantity is not 0. This would prevent a good bit of code required to manage a separate array of items in cart.

JL Flores Mena

arrays & loops, the arcane magic behind hifi prototypes.

Chris Camargo

I love all of these suggestions. But I left out one wrinkle... What if each product is uniquely customizable?

Let's use sunglasses as an example... I can add a standard pair of aviators, as they come with gold frames and gray lenses, for the price listed. But I can also add one that has polarized lenses, or a custom frame color, each of which may or may not come with a price increase.

How would you modify your approach to the data schema?

And yes, I'm well aware this may be too deep for your average prototype. But let's be honest, when has that ever stopped us? :)

Gregory J. Orton

This is how I would do it in JavaScript (if not constructing an object of all possible items)

function Cart () {
this.onCart = {};
that = this;
function addItem (itemName) {
if (that.onCart.hasOwnProperty(itemName) {
that.onCart[itemName]++;}
else
{
that.onCart[itemName] = 1;
}
}
// code for deleting items and other class functions
}

var myCart = new Cart();

Basically creat an object instead of an array and you can use itemname as the reference instead of an ID / array index (which may be unknown)

Rich Zarick

Super late to this party, but using firebase has lent a couple of interesting observations to data permanence especially when it comes to asynchronous behaviors like object editing/updating. They generate an id for any new data object pushed to the service, named after the UTC time it was added. One of the reasons why is to ensure the proper ordering of data objects in case they were pushed asynchronously.

There's a great readup on structuring data appropriately in their docs too: https://firebase.google.com/docs/database/web/structure-data

Read the entire post on Facebook