Join Joseph Lowery for an in-depth discussion in this video Examining what we're going to build, part of HTML5 Projects: Engaging Ecommerce.
- View Offline
Let's take a quick spin through the complete project so you can get a full picture of what's ahead. If you are the type who likes to dive right into the code and you have access to the exercise files, you'll find the completed project in the Chapter 1 01_01 folder. Here we are, in the Roux Academy Store, where I have six paintings for sale. As you can see, they range in price from $400 for the eye to $75 for graffiti.
One of the top considerations for any user in any online store is obviously price, but how to narrow down that price? Well, over here on the right we have a Price slider. When I drag this slider to the left to indicate a lower price, watch what happens. Paintings that are more expensive, out of my price range, are dimmed, like the eye and the rabbit there.
So as you can see, the Price slider is very visual and it's very easy to understand, which are key aspects of an enhanced user experience. Once the shopper has narrowed his or her options, we want to make it easy for them to note their favorites. As this big text indicates here under the Favorites heading, all the user has to do is to drag their favorites to the right. So let me scroll down just a little bit so we see all of our paintings. And let's say I'm kind of interested in orange star here, so I'll place my cursor over it and with the arrows indicating there that I can drag something, click and drag it over. When I move it over into the target area, a plus sign appears, and if I drop it, it's listed under my Favorites.
Let's do that again with Graffiti, just so you can see how the list is built up. You'll notice that when I come into the drop zone I get an indication that I've entered that area by the change of the background color, and I'll drop it, it changes back, and now Graffiti is on my list of favorites. But what if they don't purchase right away? We'll make it painless by automatically saving their favorites so that the next time they visit the site their favorites will be waiting for them. Let me simulate that experience by closing the browser window and then I'm going to open a new window and go to my history, and if I scroll down now, you'll see that the favorites are waiting for me.
Now that you've seen an overview of what we're doing, you're ready to dive a little deeper into how we're doing it, with an explanation of the related technologies in the next lesson.
- Including range form elements
- Modifying the display interactively
- Dragging items to wish lists
- Storing wish list items locally
- Saving and retrieving list items