Mini Cart
Hi Support, thank you for your hard work.
https://www.youtube.com/watch?v=IxJTxROr9fQ
I saw this youtube tutorial and im really interested to simulate what i saw on 00:19. Unfortunately this video doesnt show how to do that. I really like that mini panel on top where it list all of the added items in the temporary shopping cart before check out with the indication how many items "Shopping Cart (2)", i assume this number keep on adding as we continue adding.
Is there any tutorial i can study how to simulate this ?
Thanks
Rivai
Any ideas?
Any ideas?
Sure! It's a bit complex, but we've attached an example:
1. Create two Data Masters - Products and Cart. Also create two Variables - SelectedRow and Total and leave their default values blank.
In the Products data master, create 2 fields - "name" and "price". Add some sample data in the 'View and Edit records' tab. Note that all the Product names must be different.
In the Cart data master, create 3 fields - "product", "price per item", and "quantity". Remove all the sample data from this data master so it's empty.
2. Add a Data Grid to the screen with the Products data master. This will be the list of products that you can add to your cart. To match the example, change it to have two columns.
3. Drag a Button into Grid_Cell_1 in the Products data grid and label it "View".
4. Drag a shopping cart icon to the Canvas next. Next to it, drag a Text element and make its value blank.
5. Drag a Dynamic Panel to the Canvas and place it in the upper right corner under the shopping cart icon. Mark the dynamic panel itself hidden in the Properties palette. Select the shopping cart icon and create an On Toggle + Show event, showing the dynamic panel.
6. Create another Data Grid, this time using the Cart data master. Only include the "Product" and "Quantity" fields in the data grid. Place the data grid in the dynamic panel and change it to only have one column. Only one cell should show, since the data master it's using is empty.
7. Below the data grid in the dynamic panel, place four Text elements - label one "Total: $", one "Items", and leave two others empty (their values should be blank). Place one next to "Total: $" and one next to "Items". This is where you'll display the total item numbers and the $ total.
8. Select the "View" button in the Products data grid. Create an On Click + Set Value event, selecting the SelectedRow variable as the target of the action. For the value, select 'Calculated', and then click 'add expression'. For the expression, drag Grid_Cell_1 into the open space. This transfers the value of whichever cell you click on to the variable.
9. Duplicate Screen 1, so you'll have 2 screens.
10. Create another action on the "View" button on Screen 1 - On Click + Link To and link to Screen 2.
11. Go to the Screen 2 and delete the Products data grid. Now, drag four Text elements, an Input Text Field, and a Button to the Canvas. Label one text element "Product name", another "$", one "Price", and one "Please enter a number". Label the button "Add to cart". This is where you'll display the product information that you will select on Screen 1, and you'll be able to add that product to your cart here.
12. Select the "Please enter a number" text element and mark it as hidden in the Properties palette.
13. Select the base screen (Screen 2) in the Outline palette. Create an On Page Load + Set Value event, and set the value to the "Product name" text. For the value, click 'Calculated' and then 'Add expression'. Build this expression:
The "Name" attribute is from the Products data master. This event will give the "Product name" text the name of the product you selected on Screen 1.
14. Add another On Page Load + Set Value action, setting the value to the "Price" text. Build the same expression as above, but just change the attribute to "Price" from the Products data master.
15. Select the "Add to cart" button in Grid_Cell_1 and create an On Click + Data Master Action - New for the Cart data master. Build this expression:
This will create a new record in the Cart with the values of the product that's on the Screen.
16. Add another action to the event you just created - On Click + Set Value, and have it set the value to the Cart data grid. For the value, select the 'From current Data Master' radio button.
This updates the data grid to show the new value you just added.
17. Add another action - On Click + Set Value and set the value to the blank text element next to "Total: $". For the value, click 'Calculated' and then 'Add expression'. Build this expression:
The first open space is Grid_cell_2 from the Cart data grid. The "Price per item" attribute is from the Cart data master. This sums the total number of items in the cart.
18. Add another action - On Click + Hide and select the "Please enter a number" error message text to be hidden.
19. Above all the events you created, click the "Add condition" text. Build this expression:
This expression does a few things - it first checks to make sure that the value you entered in the "Quantity" input text field is a number and that the number is greater than 0. Then, it checks to see if any of the products in the Cart data master are already within the Cart. This is important, because if you're adding a product that's already in the cart, you want this to increase that product's quantity in the cart instead of just adding the product again.
20. Click the 'Else' text in the events palette below the actions you created. Create an On Click + Data Master Action - Modify for the Cart data master.
This works by first filtering down the Cart data master to the product that matches what's displayed on the Screen. It then selects the quantity of that product in the cart where that name matches and then adds the value of what's entered in the "Quantity" input text field to that value.
21. Add another action - On Click + Set Value - and set the value to the blank text element next to "Total: $". For the value, create the same expression as in step 17.
22. Add another action - On Click + Hide and select the "Please enter a number" error message text to be hidden.
23. Click the 'Else add condition' text above the actions you just created. Create this condition:
This condition checks to see if the value you entered in the "Quantity" input text field is a number and greater than 0. Then, it checks to see if any of the products in the Cart data master match the product name that's currently on the screen. Since the events you created earlier modify the Cart's quantity instead of creating a new record, you want this result to be greater than 0.
24. Click on the 'Else' text in the Events palette. Create an On Click + Show event, selecting "Please enter a number" error message text to be shown.
25. Select Grid_Cell_2 in the Cart data grid. Create an On Data Change + Set Value event, selecting the blank text elements next to the shopping cart icon and "Items:" as the targets. For the value, click 'Calculated' and then 'Add expression'. Build this expression:
This sums the amount of items in the cart.
26. Select the blank text element next to the shopping cart icon. Create an On Page Load + Set Value event, selecting the blank text elements next to the shopping cart icon and"Items:" as the targets. For the value, click 'Calculated' and then 'Add expression'. Build the same expression as in the last step.
27. Add another action - On Page Load + Set Value, selecting the blank text element next to "Total: $" as the target. For the value, build the same expression as in step 17.
Those last two steps make sure that the cart's values are correct when the page first loads.
28. Click 'add condition' above the actions you just created. Build this expression:
This just checks to see if the cart isn't empty before triggering the events above. If it is empty, it won't trigger the events.
29. Drag a 'Back' icon to the Canvas. Create an On Click + Set Value event, selecting the Total variable as the target of the action. For the value, drag the blank text element next to "Total: $" into the expression. This transfers the cart total to the variable.
30. Go back to Screen 1. Select the blank text element next to the shopping cart icon. Create an On Page Load + Set Value event. Create the same expression in step 25.
31. Click 'Add condition' above that action and build the same expression in step 28.
32. Select the blank text element next to "Total: $". Create an On Page Load + Set Value event, selecting that blank text element as the target. For the value, click 'Calculated' and then 'Add expression'. For the value, drag the Total variable into the open space. This transfers the variable's value to the text element.
33. Click 'Add condition' above that action and build the same expression in step 28.
And that should be it! This is pretty complicated, so let me know if you have any questions. You can download the example file and see all of the events.
Sure! It's a bit complex, but we've attached an example:
1. Create two Data Masters - Products and Cart. Also create two Variables - SelectedRow and Total and leave their default values blank.
In the Products data master, create 2 fields - "name" and "price". Add some sample data in the 'View and Edit records' tab. Note that all the Product names must be different.
In the Cart data master, create 3 fields - "product", "price per item", and "quantity". Remove all the sample data from this data master so it's empty.
2. Add a Data Grid to the screen with the Products data master. This will be the list of products that you can add to your cart. To match the example, change it to have two columns.
3. Drag a Button into Grid_Cell_1 in the Products data grid and label it "View".
4. Drag a shopping cart icon to the Canvas next. Next to it, drag a Text element and make its value blank.
5. Drag a Dynamic Panel to the Canvas and place it in the upper right corner under the shopping cart icon. Mark the dynamic panel itself hidden in the Properties palette. Select the shopping cart icon and create an On Toggle + Show event, showing the dynamic panel.
6. Create another Data Grid, this time using the Cart data master. Only include the "Product" and "Quantity" fields in the data grid. Place the data grid in the dynamic panel and change it to only have one column. Only one cell should show, since the data master it's using is empty.
7. Below the data grid in the dynamic panel, place four Text elements - label one "Total: $", one "Items", and leave two others empty (their values should be blank). Place one next to "Total: $" and one next to "Items". This is where you'll display the total item numbers and the $ total.
8. Select the "View" button in the Products data grid. Create an On Click + Set Value event, selecting the SelectedRow variable as the target of the action. For the value, select 'Calculated', and then click 'add expression'. For the expression, drag Grid_Cell_1 into the open space. This transfers the value of whichever cell you click on to the variable.
9. Duplicate Screen 1, so you'll have 2 screens.
10. Create another action on the "View" button on Screen 1 - On Click + Link To and link to Screen 2.
11. Go to the Screen 2 and delete the Products data grid. Now, drag four Text elements, an Input Text Field, and a Button to the Canvas. Label one text element "Product name", another "$", one "Price", and one "Please enter a number". Label the button "Add to cart". This is where you'll display the product information that you will select on Screen 1, and you'll be able to add that product to your cart here.
12. Select the "Please enter a number" text element and mark it as hidden in the Properties palette.
13. Select the base screen (Screen 2) in the Outline palette. Create an On Page Load + Set Value event, and set the value to the "Product name" text. For the value, click 'Calculated' and then 'Add expression'. Build this expression:
The "Name" attribute is from the Products data master. This event will give the "Product name" text the name of the product you selected on Screen 1.
14. Add another On Page Load + Set Value action, setting the value to the "Price" text. Build the same expression as above, but just change the attribute to "Price" from the Products data master.
15. Select the "Add to cart" button in Grid_Cell_1 and create an On Click + Data Master Action - New for the Cart data master. Build this expression:
This will create a new record in the Cart with the values of the product that's on the Screen.
16. Add another action to the event you just created - On Click + Set Value, and have it set the value to the Cart data grid. For the value, select the 'From current Data Master' radio button.
This updates the data grid to show the new value you just added.
17. Add another action - On Click + Set Value and set the value to the blank text element next to "Total: $". For the value, click 'Calculated' and then 'Add expression'. Build this expression:
The first open space is Grid_cell_2 from the Cart data grid. The "Price per item" attribute is from the Cart data master. This sums the total number of items in the cart.
18. Add another action - On Click + Hide and select the "Please enter a number" error message text to be hidden.
19. Above all the events you created, click the "Add condition" text. Build this expression:
This expression does a few things - it first checks to make sure that the value you entered in the "Quantity" input text field is a number and that the number is greater than 0. Then, it checks to see if any of the products in the Cart data master are already within the Cart. This is important, because if you're adding a product that's already in the cart, you want this to increase that product's quantity in the cart instead of just adding the product again.
20. Click the 'Else' text in the events palette below the actions you created. Create an On Click + Data Master Action - Modify for the Cart data master.
This works by first filtering down the Cart data master to the product that matches what's displayed on the Screen. It then selects the quantity of that product in the cart where that name matches and then adds the value of what's entered in the "Quantity" input text field to that value.
21. Add another action - On Click + Set Value - and set the value to the blank text element next to "Total: $". For the value, create the same expression as in step 17.
22. Add another action - On Click + Hide and select the "Please enter a number" error message text to be hidden.
23. Click the 'Else add condition' text above the actions you just created. Create this condition:
This condition checks to see if the value you entered in the "Quantity" input text field is a number and greater than 0. Then, it checks to see if any of the products in the Cart data master match the product name that's currently on the screen. Since the events you created earlier modify the Cart's quantity instead of creating a new record, you want this result to be greater than 0.
24. Click on the 'Else' text in the Events palette. Create an On Click + Show event, selecting "Please enter a number" error message text to be shown.
25. Select Grid_Cell_2 in the Cart data grid. Create an On Data Change + Set Value event, selecting the blank text elements next to the shopping cart icon and "Items:" as the targets. For the value, click 'Calculated' and then 'Add expression'. Build this expression:
This sums the amount of items in the cart.
26. Select the blank text element next to the shopping cart icon. Create an On Page Load + Set Value event, selecting the blank text elements next to the shopping cart icon and"Items:" as the targets. For the value, click 'Calculated' and then 'Add expression'. Build the same expression as in the last step.
27. Add another action - On Page Load + Set Value, selecting the blank text element next to "Total: $" as the target. For the value, build the same expression as in step 17.
Those last two steps make sure that the cart's values are correct when the page first loads.
28. Click 'add condition' above the actions you just created. Build this expression:
This just checks to see if the cart isn't empty before triggering the events above. If it is empty, it won't trigger the events.
29. Drag a 'Back' icon to the Canvas. Create an On Click + Set Value event, selecting the Total variable as the target of the action. For the value, drag the blank text element next to "Total: $" into the expression. This transfers the cart total to the variable.
30. Go back to Screen 1. Select the blank text element next to the shopping cart icon. Create an On Page Load + Set Value event. Create the same expression in step 25.
31. Click 'Add condition' above that action and build the same expression in step 28.
32. Select the blank text element next to "Total: $". Create an On Page Load + Set Value event, selecting that blank text element as the target. For the value, click 'Calculated' and then 'Add expression'. For the value, drag the Total variable into the open space. This transfers the variable's value to the text element.
33. Click 'Add condition' above that action and build the same expression in step 28.
And that should be it! This is pretty complicated, so let me know if you have any questions. You can download the example file and see all of the events.
Dear Danielle
This turns out more complicated than i thought it would be. I have a slight different flow on how it appears, I will try to adapt it. Meanwhile, thank you so much for taking the effort to put a very detail guide. It is not easy to do it. Really appreciate it. Hope this will help others as well.
Regards
Rivai
Dear Danielle
This turns out more complicated than i thought it would be. I have a slight different flow on how it appears, I will try to adapt it. Meanwhile, thank you so much for taking the effort to put a very detail guide. It is not easy to do it. Really appreciate it. Hope this will help others as well.
Regards
Rivai
Yes it is a bit complicated, but we're glad we were able to be helpful!
Yes it is a bit complicated, but we're glad we were able to be helpful!
Im happy to report that i got most of it working. I have to adapt it to my existing prototype as it has a different flow as compare to what has been shown here. But i manage to do it. Very happy. Thanks a lot for your through guide.
I have further question. Im trying as much as possible to simulate real world usage. Let's say after input the quantity and so on. It appears that it is a mistake, therefore the user need to moody what has been type or even delete per items. Os there any way to modify the input before check out? I was thinking that the quantity can remained as input field in the mini cart. This is just my imagination. Is that possible? If not, what alternatives can i do?
I know there is a delete items tutorial, i think i can uae that to adapt it here.
Rivai
Im happy to report that i got most of it working. I have to adapt it to my existing prototype as it has a different flow as compare to what has been shown here. But i manage to do it. Very happy. Thanks a lot for your through guide.
I have further question. Im trying as much as possible to simulate real world usage. Let's say after input the quantity and so on. It appears that it is a mistake, therefore the user need to moody what has been type or even delete per items. Os there any way to modify the input before check out? I was thinking that the quantity can remained as input field in the mini cart. This is just my imagination. Is that possible? If not, what alternatives can i do?
I know there is a delete items tutorial, i think i can uae that to adapt it here.
Rivai
Glad to hear that!
Yes, you can do what you're looking for. Here's how:
1. Select the field that in each cart that displays the quantity. Look to the Properties palette and tick the 'Editable' option. Add a border and some padding to the field so it looks like an input field.
2. Copy and paste the "Please enter a number" error message into the data grid. You'll show this error message if you enter a value that's not a number.
3. Create an On Focus Out + Data Master Action - Modify event for the Cart Data Master. For the values to modify, drag Grid_cell_2 into the first open space on the left. Then, drag the Quantity input field in the data grid into the 'Quantity' section.
4. Add another action to this event - On Focus Out + Set Value and set the value to the blank text next to "Total: $". For the value, build this expression:
5. Add another action - On Focus Out + Hide and hide the "Please enter a number" error message in the data grid.
6. Click the 'Add condition' text above the actions you just created and build this condition:
7. Click the 'Else' text and create an On Focus Out + Show event and select the "Please enter a number" error message to be shown.
8. Click the 'Else add condition' text above the event you just created and build this expression:
This will show the error message whenever you enter something in the input field isn't a number.
9. Click the 'Else' text to create another event and create an On Focus Out + Data Master Action - Delete for the Cart Data Master. Drag Grid_Cell_2 into the open space in the expression.
10. Add another action - On Focus Out + Set Value event, setting the value to the empty text next to "Total: $". For the value, build the same expression in step 4.
11. Add another action - On Focus Out + Set Value event, setting the value to the empty text field next to the shopping cart icon and the empty text field next to "Items:" in the data grid. For the value, build. this expression:
12. Add another action - On Focus Out + Hide and hide the "Please enter a number" test.
13. Click the 'Else add condition' text. For the expression, drag the Cart input text field into the open space, followed by ≤. Then, type "0" in the open space that appears.
This will delete the cart item you're editing the quantity for if the quantity is less than or equal to zero.
Repeat those steps for the cart on the other screen.
We've attached an edited version of the prototype with this included.
Glad to hear that!
Yes, you can do what you're looking for. Here's how:
1. Select the field that in each cart that displays the quantity. Look to the Properties palette and tick the 'Editable' option. Add a border and some padding to the field so it looks like an input field.
2. Copy and paste the "Please enter a number" error message into the data grid. You'll show this error message if you enter a value that's not a number.
3. Create an On Focus Out + Data Master Action - Modify event for the Cart Data Master. For the values to modify, drag Grid_cell_2 into the first open space on the left. Then, drag the Quantity input field in the data grid into the 'Quantity' section.
4. Add another action to this event - On Focus Out + Set Value and set the value to the blank text next to "Total: $". For the value, build this expression:
5. Add another action - On Focus Out + Hide and hide the "Please enter a number" error message in the data grid.
6. Click the 'Add condition' text above the actions you just created and build this condition:
7. Click the 'Else' text and create an On Focus Out + Show event and select the "Please enter a number" error message to be shown.
8. Click the 'Else add condition' text above the event you just created and build this expression:
This will show the error message whenever you enter something in the input field isn't a number.
9. Click the 'Else' text to create another event and create an On Focus Out + Data Master Action - Delete for the Cart Data Master. Drag Grid_Cell_2 into the open space in the expression.
10. Add another action - On Focus Out + Set Value event, setting the value to the empty text next to "Total: $". For the value, build the same expression in step 4.
11. Add another action - On Focus Out + Set Value event, setting the value to the empty text field next to the shopping cart icon and the empty text field next to "Items:" in the data grid. For the value, build. this expression:
12. Add another action - On Focus Out + Hide and hide the "Please enter a number" test.
13. Click the 'Else add condition' text. For the expression, drag the Cart input text field into the open space, followed by ≤. Then, type "0" in the open space that appears.
This will delete the cart item you're editing the quantity for if the quantity is less than or equal to zero.
Repeat those steps for the cart on the other screen.
We've attached an edited version of the prototype with this included.
Awesomeness. It works! It's a better idea to just type 0 and the item discarded itself, good idea. Less click the better.
Thanks Danielle!
Warm Regards
Rivai
Awesomeness. It works! It's a better idea to just type 0 and the item discarded itself, good idea. Less click the better.
Thanks Danielle!
Warm Regards
Rivai
Hi Danielle
Im further enhance the usability. In regards to "check out" button. I need to carry multiple information ( eg. entire mini cart lists plus extra parameter from the main database like pictures, location, i have this all listed in the main database) to the next screen. Im aware about variable. But im not sure how do i carry these multiple information to the next screen. Should i assign each parameter to each variables? I have created a new database "order confirm" in the new page. Im just not sure how to automatic populate the list.
Regards
Rivai
Hi Danielle
Im further enhance the usability. In regards to "check out" button. I need to carry multiple information ( eg. entire mini cart lists plus extra parameter from the main database like pictures, location, i have this all listed in the main database) to the next screen. Im aware about variable. But im not sure how do i carry these multiple information to the next screen. Should i assign each parameter to each variables? I have created a new database "order confirm" in the new page. Im just not sure how to automatic populate the list.
Regards
Rivai
BTW off topic, i just realize this Q&A forum is for free user. Should i post my question from my customer portal instead?
BTW off topic, i just realize this Q&A forum is for free user. Should i post my question from my customer portal instead?
Replies have been locked on this page!