Stepper

This tutorial shows you how to create a stepper in a shopping cart. There are two stages – can complete only one or both:

1. Creating a click stepper
2. Creating a stepper that accepts input

→ Download a ready .uxp file for this tutorial.

Setting Up the Design

1. Start by creating your design. Add a product image and use separate text elements for the product price, the currency sign, and the total cost itself.
2. Create the stepper using the Input element from Forms in the Quick Tools menu, and two icons on both sides – a plus and a minus.

Click Stepper

Creating States

1. Select the minus icon and click Add State from the Top Bar. The State 1 (Base) will already be created. 
2. Add another one and name it Disabled. 
3. In the Disabled state, change the color to gray.

Creating Variables

1. Click Variables at the bottom of the Quick Tools panel.
2. Create two variables, Counter and Price. Then, set your default value for the price.

Adding On-Click Interactions

You can now add on-click interactions on each icon that add, take away, and display the total amount inside the input.

1. Select the plus icon and click the + icon at the top of the Properties panel to add an interaction.
2. In the Action section choose Set variable.
3. In Variable, choose your Counter.
4. In Set Variable as, choose Expression and type in $Counter +1 so that it adds 1.

The next interaction needs to take away 1 from values greater than 0 inside the input.

1. Select the minus icon and add a new interaction.
2. Create a condition and choose Value of variable in the first dropdown.
3. Choose your counter in the second one.
4. Select is greater in the third one and set the Value to 0. 
5. Click Add condition.

6. Next, in the Action section, choose Set variable.

7. In Variable choose your counter

8. In Set variable as, select Expression and type in $Counter -1.

9. Click Add.

Displaying Amount in the Input

1. Add an interaction on the plus icon.
2. In the Action section, choose More and select Set content.
3. In Element choose the input.
4. In Set content as choose Value of variable and choose your counter as the variable.
5. Add the interaction.
6. Now add the same interaction on the minus icon.

Changing States for Different Values

You can now add interactions to change the state of the minus icon to Disabled when the value inside the input comes down to 0, and turn it back to the Base state when the input value is greater than 0.

1. Select the minus icon and add a new interaction.
2. Create a condition with the first input is set to Value of variable. Choose your counter in the second dropdown, equals in the third and the fourth to Value. Type in 0 in the input.
3. Click Add condition.

4. In the Action section, choose Set state.

5. In Element, choose your icon.

6. In Set state, select Disabled.

7. Click Add.

Now select the plus icon and add the same interaction for a change of state, but choose is greater for the Value 0 in the condition and set the Set state dropdown to State 1- Base.

Summing up Total Cost

To sum up and display the total price based on the number in the input, add the following interaction on either icon.

1. In the Action section, click More and choose Set content.
2. In the Element section, choose the text element for your total price.
3. In Set content as, choose Expression and multiply both variables the Counter and Price by typing in $Counter*$Price.
4. Click Add.
5. Then add the same interaction onto the other icon.

At this point, you have created a counter that adds and deducts the total amount of items in the input by clicking on the icons and sums up the total cost. If you want to allow typing in the input, continue with the following steps.

Stepper that Accepts Input

If you want to sum up the total price based on what you type into the input, you will need to create 5 different interactions with the Value Change trigger.

1. In the 1st one, set the variable Counter as the content of the input element.
2. In the 2nd one, set the content of the Total price text element as the Expression that multiplies both Variables $Counter*$Price.
3. In the third one, set the state of the minus icon to Disabled if the value inside the input is equal 0.
4. In the 4th one, set the state of the minus icon to State 1- Base if the value inside the input is greater than 0.
5. In the 5th one, set the content of the Total Price text element to value 0 if the value inside the input is less than 0.

You can preview your prototype

Change Input Border on Focus

Optionally, you can add an interaction that will change the color of the input’s border on Focus and on Focus Lost.

1. Select the input and add a new interaction.
2. In Trigger, choose Focus.
3. In the Action section choose More and select Color.
4. In Element, choose the input.
5. In the Color section, change the color of the Border.
6. Click Add.
7. Add another interaction and set the Trigger to Focus Lost.
8. In the Action section choose More and select Color.
9. In Element, choose the input and don’t change anything in the Color section.
10. Click Add.

You can now preview your design