wCart Tutorial part 9. Shopping Cart Quantity Functionality

[ben]

1. With cart.html open toggle App Connect Mode (1) , select the cell containing the quantity (2) and remove any text (3) inside the cell

   

2. With the Cell (1) still selected, remove the Inner Text (2) that we created previously.

   

3. With the cell still selected, right click the Cell (1), in the pop-up choose Forms (2) and Text Input (3)

   

4 Select the Text Input (1), assign an ID (2), a Name (3) and change the size to Small (4)

5. With the Text Input (1) still selected, click on the Styles tab(2), enter the element.style (3) as width: 4em;. Click on App Structure (4) to return.

   

6. With the Text Input (1) still selected, click on Dynamic Attributes (2)

   

7. In the pop-up, select Value (1)

   

8. With the Text Input (1) still selected, click the Value thunder bolt (2)

   

9. In the pop-up, select qty (1) under Table Body and remove items. (2). Click Select (3) to apply the binding

   

10. Withe the Text Input (1) still selected, click on Dynamic Events (2)

    

11. In the pop-up, choose Keyboard (1) and Key Up (2)

    

12. With the Text Input (1) still selected, click the Action button (2)

    

13. In the pop-up, choose arrCart (1), Replace Item At (2), Add Column (3), click the Action item (4) and Index (5)

    

14. Under Table Body (1) choose $index (2) and Select (3)

    

15. For the New Value (1) enter the following:
    {product:product,price:price,qty:value}

    

16. To replace the Subtotal value, under arrSubtotal (1), choose Replace Item At (2), Add Column (3) click the new action (4) and Index (5)

    

17. Under Table Body (1), select $index (2) and Select (3)

    

18. Select the New Value thunder bolt (1)

    

19. Under Text Input (1), select value (2) and click the format button (3)

    

20. Right click value (1) and choose Operation (2)

    

21. Change the Operation (1) to a multiplication (2)

    

22. Choose the arrow (1) and click the Value thunder bolt (2)

    

23. Under Table Body (1), choose price (2) and remove items. (3). Click Select (4)

    

24. Right click price (1), choose Conversion (2) and To Number (3)

    

25. Choose Select (1)

    

26. Choose Select (1)

    

27. Choose Select (1)

    

28. Choose the last Cell (1) and the Value thunderbolt (2)

    

29. Under Table Body (1) choose the value (2) of the Text Input and click the format button (3)

    

30. Right click inp_quantity (1) and select Operation (2)

    

31. Change the Operation (1) to a multiplication (2)

    

32. Select the arrow (1) and click the Value thunder bolt (2)

    

33. Under Table Body (1), select price (2) and remove items. (3). Click Select (4)

    

34. Right click price (1), select Conversion (2) and To Number (3)

    

35. Right click To Number (1), select Numeric (2) and Format Currency (3)

    

36. Format the Currency to suit and click Select (1)

    

37. Click Select (1)

    

38. Unfortunately, I just cannot get used to the more complicated bindings. We will have to do some manual work in Code view. In this case change
    inp_quantity.value * (price.toNumber().formatCurrency("$", ".", ",", "2"))
    to
    (inp_quantity.value * (price.toNumber())).formatCurrency("$", ".", ",", "2")

39. Don’t forget to save your work.

Next Part

[George]

Indention is here the key Ben. Indented branches are grouped together.

So if step 35 if you just select the main inp_quantity and there you select the Format Currency it will go go well.

So when you need to format a whole group, just select the first item of it and then apply an formatter you need to it