Series: Building a Shopping Cart

Shopping Cart Part 4-Sold Out

Published on Sep 09, 2016

In the final part of our Shopping Cart series, we demonstrate a way to make our user interface better, then take a peek at several ways to accomplish a more advanced feature.

Code

$ ember install ember-composable-helpers
//templates/monsters/monster/index.hbs
{{#if (contains model.id cart.monsterIds.content)}}
  <button class="btn">
    Sold Out
  </button>
{{else}}
  <button class="btn" {{action 'buyItem'}}>
    Buy Plushy
  </button>
{{/if}}

Transcript

Welcome to Part 4 of creating a shopping cart. So our shopping cart is now fully functional, but we want to add some features to make it nicer. So for example, right now if you’ve already bought something you can still click ‘Buy’, but it doesn’t change the number of items in the shopping cart and it doesn’t add another plushy. So this is a big limitation on what you can do with a shopping cart. So what we’re going to do to start out is to notify the user that they’ve bought a plushy. So we’re going to replace that button with one that says ‘Sold Out’ once they’ve already bought it.

To make our job easier, we’re going to be using the ember-composable-helpers addon, specifically the contains function. So here we’ll install the addon, then we’ll use it in our template. So the contains will take first an item and then an array. So the item will be the model id, so our monstersId, and then the array will be the array of ids. We have to call .content because of localStorage, and then it’ll return true if that id is contained in that array. And so if it’s true we’ll do something, we haven’t created that yet, but if it’s false then we’ll have the ‘Buy Plushy’ button available. So here in the true path, we’ll go ahead and put a button there, but it will not have the buyItem action and it’ll say something else. It’ll say ‘Sold Out’.

Now let’s go ahead and take a look, and we can see that this is indeed sold out, and this one that hasn’t been bought yet, you can say ‘Buy Plushy’. We click it, and it changes to ‘Sold Out’ and adds an item to the shopping cart. Of course this isn’t the only way to deal with this.

A much more common way to deal with this is to allow you to buy multiple of one item. We’re not going to cover that in this video, but I can point you in the right direction. So the first option for you is to use the ember-cart addon. This takes a bunch of primitives and it allows you to add them to your cart, store it all on localStorage, and importantly, it allows increments. It does this by interacting with localStorage in a way that’s different than how we’ve been doing it. So they’ve got their data structure, and anytime anything changes on it, then they take it, they stringify it, and they dump that string to localStorage. And then when the app is initializing, then they extract all of that from localStorage.

An important thing to note here is that when they’re interacting with the data, they’re not interacting with the part that’s in localStorage, they’re interacting with something that’s within ember, and so they can have observers and computed properties on it. These are things that are difficult to do with localStorage for anything but the simplest data structures, like say a plain array.

Alright, so that’s our series on shopping carts. Good luck with your e-commerce strings and I will see you next week.

Building a Shopping Cart

Subscribe to our mailing list