New sample: Dynamic Shopping Cart

Emory Fierlinger
emory@atomic.io
@emoryzanef

When I joined Atomic recently, I was excited to learn I’d have the opportunity to be hands-on, making sample prototypes and sharing them with the Atomic community. Some will be ideal for everyday prototyping use-cases, others will be more for fun, to illustrate what Atomic is capable of, like the sample I’ll show you in this article.

Making a dynamic shopping cart prototype using components, data and JavaScript.

This sample shows key steps in an online clothing purchase. You can browse through (really expensive!) shirts & pants before adding items to a shopping cart by clicking on them. You can select any items you like and the prototype does the math to calculate the amount to pay.

This shopping cart prototype demonstrates 2 powerful things:

  1. Components connected to a data-source, so the content can be easily updated
  2. Reviewers select any garments they like and (using JavaScript) the cart reflects the real, dynamic pricing

If you want to jump right in, open this sample and make a copy into your own account, then have a look at how it’s made.

Get the sample

The power of data + components

Making the component.gif

Historically a layout like the one in this prototype would be static; the garment images, labels and prices would all be specified during the design phase, and then baked into the final prototype. The first part of this sample I want to highlight is how it uses Atomic’s components and data sources capability, to build a modular, data-driven layout.

Each ‘clothing item’ is a copy of the same layout component. The component defines the style and layout of the item.

Applying data fancy.gif

Next, the components are connected to a data source, in this case, a spreadsheet which holds all of the content, including pricing, product details and URLs to the source images.

The awesome part is that the designer (me) didn’t have to go in and manually add each photo, item name, price, and brand to each one of these components. Instead I simply connected the spreadsheet to Atomic, and the data from the spreadsheet such as the name of the clothing item, price, photo & brand are automatically imported into each component. It also meant that if I wanted to see what other items looked like, or I changed my mind on which ones to include, I could easily swap them out.

Adding another item.gif

And get this: to add another item of clothing to the prototype, all I have to do is copy & paste a component.

The power of simple JavaScript

Cart action.gif

The second part of this sample I want to highlight, is how the prototype responds dynamically to user-choices.

This prototype doesn’t care which garment a user selects. Every garment is available, and clicking any of them will cause the cart on the right to update. This is achieved by fetching the garment’s value (from the data source connected to the prototype) and passing it to some simple JavaScript. The script handles the logic and even calculates the total payable process. Even the discount code feature really works.

Javascript.png

This type of realistic experience can be crucial to your user testing. Instead of distracting your testers with rigid instructions about where to click, and being unable to see how testers respond to things like the final price based on their preferred choices.

Whether you’re using Atomic’s pre-built logic controllers, or writing Javascript directly in Atomic, it’s really quite simple to add logic like this to your prototypes, to make them more dynamic and realistic.


If you haven’t already, check out the live sample prototype. If you are interested in seeing how it’s made, from the preview page click the Copy & Edit button and copy it to your account. Got ideas for more samples you’d like to see? Hit us up over in our Facebook Group or on Twitter.

If you are completely new to Atomic, know that it’s free to use for as long as you need, so go ahead and register for your free Atomic account and get started with advanced prototyping.

Get started with Atomic

Posted 9 April 2018

Advanced interactive design & prototyping.