March 30, 2020
Axure Speedrun #3: Ecommerce Basket

Axure Speedrun #3: Ecommerce Basket


20 minutes, a blank canvas, and a few styles… Here we go! Create a few components for our basket. Now to create the first of our two repeaters. This will be a full width repeater to contain the basket items. Adding a quantity dropdown for each item. And delete functionality to remove items from the basket. Add a placeholder for the product name and price. Now to add the product data. Import the product images for each item. Now to bind the data to the placeholders. Im using rich text to concatenate and data and style the text. Copy the repeater so I can build the recommended product list. Removing data as I want a single item in the basket as the default state. Now to change the layout of the recommended product list. I’m going for a horizontally orientated list this time with 2.5 products per page width. Adding some product ratings. They won’t be data-driven in this prototype. Maybe next time. Adding price as a separate item. Now to change the layout so the repeater runs horizontally. And wrap the repeater in a dynamic panel so I can swipe it. Let’s add some up-sell text with a little bit of persuasive design. And a footer. OK. So now the hard stuff. Let’s start with functionality to change the number of items of a product type within the basket. The approach I’m using is to store total item price (unit quantity x unit price) in the repeater… … so if a user changes the quantity of an item, this information is stored against the item. I zero the total basket price and total quantity values and update the row which forces the repeater to refresh… Refreshing means the repeater reloads all its data… … so I can just keep adding total item price of each row to a running total. I’m now firing an event on the subtotal label. This is going to check the total number of items in the basket and play this back in the UI. Im using string functions, maths functions, and global variables to determine what needs to be presented. If there is only 1 item, I need to use the word ‘item’, but for all other instances use the word ‘items’. Im also changing the up-sell text if all items have been removed from the basket. … and hiding the checkout CTA if the basket is empty. Forgot I need to tell Axure to use 2 decimal places when calculating the total price! Now this is tricky… I need to create a toggle switch in the code so that certain things don’t run when the repeater is refreshing. I temporarily disable the OnSelectionChange event on the quantity dropdown list… … so that it doesn’t fire when the repeater dynamically changes its selection to the value stored in the repeater. Now to make the delete functionality. I again force the basket repeater to rebuild, but only once I’ve reset basket totals… … added the product’s data to the recommended repeater… … and deleted this row from the basket repeater so it doesn’t get included in the running total. Copy and paste this code to the ‘add to basket’ functionality as it works in the same way. Finally, I need to move some widgets as the basket changes in size when items are added or removed. I’m moving a widget relative to the widget immediately above it. I need to do this for 3 widgets. 60 seconds to go! Done! Note the interactivity… see how the subtotal works.

Leave a Reply

Your email address will not be published. Required fields are marked *