wCart Tutorial part 10 Create the Checkout Page

[ben]

For this part of the wCart Tutorial, we will create a page that will look like

1. Load the _template.html page (1), click the Menu button (2) and select Save As (3)

   

2. In the pop-up, give the new file a name (1), we have called it cart.html, and click Save (2)

   

3. Double click the Title (1) and change the text

   

4. Because Bootstrap is structured mobile first, we will now go to the mobile view (1), click the Insert After button (2) and Row (3)

   

5. Right click the Insert Child button (1) and click on Column (2)

   

6. Right click the Insert Child button (1), choose Content (2) and click on Title (3)

   

7. With the Title (1) selected, change the Type (2) to Heading 5 and the Text Colour (3) to Danger

   

8. Double click the Title (1) and change the wording.

   

9. Select the Row (1) containing the Title and click on Dynamic Attributes (2)

   

10. In the pop-up, select Display (1) and click on Hide (2)

    

11. With the Row (1) still selected, click the When button (2)

    

12. In the pop-up, select Array:arrCart (1) and click Select (2)

    

13. Click the Add After button (1) and click on Row (2)

    

14. With the new Row (1) selected, click on Dynamic Attributes (2)

    

15. In the Pop-up choose Disp[lay(1) and clcik on Show (2)

    

16. Withe the Row (1) still selected, click on the When button (2)

    

17. In the pop-up, click on Array: arrCart (1) and Select (2)

    

18. So that we can see the hidden content, click the Toggle button (1) and click the Insert Child button (2)

    

19. Click Column (1)

    

20. Click the Insert Child button (1), choose Content (2) and click Title (3)

    

21. With Title (1) selected, change the heading Type (2) to Heading 5, double click the Title (3) and change the wording

    

22. Click the Add After button (1), choose Content (2) and click on Responsive Table (3)

    

23. Select the Table Head (1) and click the Delete button (2)

    

24. Select the Header (1) of the first Row and change the Text (2) to Subtotal

    

25. Select the Header (1) for the second Row and change the Text to Postage & Handling

    

26. Select the Header (1) for the third Row and change the Text (2) to Total

    

27. Select the first unwanted Cell (1) and Delete (2)

    

28. Repeat for the other unwanted Cells so that we finish up with

    

29. Select the first Cell (1) and Align Right (2)

    

30. Reapeat for the other 2 Cells so that we finish up with

    

31. Select the first Cell (1) in the first Row and click Dynamic Attributes (2)

    

32. In the pop-up, select Display (1) and click on Inner Text (2)

    

33. With the Cell (1) still selected, click the Value button (2)

    

34. In the pop-up, select Array: arrSubtotal items (1) and click the Format button (2)

    

35. Right click arrSubtotal.items (1), choose Array (2) and click on Sum (3)

    

36. Right click Sum (1) choose Numeric (2) and click on Format Currency (3)

    

37. Format the Currency and click Select (1)

    

38. Click Select (1)

    

39. Select the Cell (1) in the second Row and click on Dynamic Attributes (2)

    

40. In the pop-up, select Display (1) and click on Inner Text (2)

    

41. With the Cell (1) still selected, click the Value button (2)

    

42. In the pop-up, enter 15 (1) - our static value for this project - and click the Format button (2)

    

43. Right click 15 (1), choose Numeric (2) and click on Format Currency (3)

    

44. Format the Currency and click Select (1)

    

45. Click Select (1)

    

46. Select the Cell (1) in the last Row and click Dynamic Attributes (2)

    

47. In the pop-up, select Display (1) and click on Inner Text (2)

    

48. With the Cell (1) still selected, click the Value button (2)

    

49. In the pop-up, select Array: arrSubtotal items (1) and click the Format button (2)

    

50. Right click arrSubtotal.items (1), choose Array (2) and click on Sum (3)

    

51. Right click Sum (1) and click Operation (2)

    

52. Select the Arrow (1) and enter a Value of 15 (2) for our static value.

    

53. Right click 15 (1), Numeric (2) and Format Currency (3)

    

54. Format the currency and click Select (1)

    

55. Click Select (1)

    

    Because I still do not know how to use complicated formating, we need to adjust the code in Code view from
    <td dmx-text="arrSubtotal.items.sum() + (15.formatCurrency(&quot;$&quot;, &quot;.&quot;, &quot;,&quot;, &quot;2&quot;))">
    to
    <td dmx-text="(arrSubtotal.items.sum() + 15).formatCurrency(&quot;$&quot;, &quot;.&quot;, &quot;,&quot;, &quot;2&quot;)">

56. Select the Column with the Order Summary (1), give it a Size of 12 (2) and click the Insert After button (3)

    

57. Click on Column (1)

    

58. With the new Column (1) still selected, give it a Size (2) of 12

    

59. Select the Tablet mode (1) and with the second Column (2) still selected, grab the handle (3) and drag it to the centre

    

60. Do the same with the first Column so that the result is

    

61. Change the Order of the first Column to 2 (1)

    

    There are a number of ways to grab the details of the addressee, either by having them register and log-in or by having a form. For our exercise, we’ll grab the details from our only user in the database.

62. Right click App (1), choose Data (2) and click Server Connect (3)

    

63. Select Server Connect (1), give it an ID (2), choose the No Auto Load (3) and click Select Server Action (4)

    

64. Under Users (1) choose list (2) and click Select (3)

    

65. Click the Add After button (1) of the Responsive Table

    

66. Select Content (1) and click on Title (2)

    

67. Change the Type to Heading 5 (1) and double click the Title to change the wording (2)

    

68. Click the Insert After button (1)

    

69. Select Content (1) and click Responsive Table (2).

    

70. Select The Table Head (1) and click the Delete button (2)

    

71. We need just one Cell per Row so we’ll delete the others. Select a Cell (1) and click the Delete button (2)

    

72. Do the same for the other Cells so that this is what we finish with

    

73. Select the last Row (1) and click the Duplicate button (2)

    

74. Select Table (1) and check Borderless (2) and Small (3)

    

75. Select the Cell (1) of the First Row and click Dynamic Attributes (2)

    

76. In the pop-up, select Display (1) and Inner Text (2)

    

77. With the Cell (1) still selected, click the Value button (2)

    

78. In the pop-up, select Expression (1), click on UserFirstName (2), add + ’ ’ + (3) and click UserLastName (4). Click Select (5)

    

79. Select the Cell (1) in the second Row and click Dynamic Attributes (2)

    

80. In the pop-up, select Display (1) and Inner Text (2)

    

81. With the Cell (1) still selected, click the Value button (2)

    

82. In the pop-up, click UserAddress (1) and Select (2)

    

83. Select the Cell (1) in the third Row and click Dynamic Attributes (2)

    

84. In the pop-up, select Display (1) and Inner Text (2)

    

85. With the Cell (1) still selected, click the Value button (2)

    

86. In the pop-up change the field to Expression (1), click UserZip (2), add +’ '+ (3), click UserCity (4) and Select (5)

    

87. Select the Cell (1) in the last Row and click Dynamic Attributes (2)

    

88. In the pop-up, select Display (1) and Inner Text (2)

    

89. With the Cell (1) still selected, click the Value button (2)

    

90. In the pop-up, click UserCountry (1) and Select (2)

    

91. Choose the Shipping Details Title (1) and click the Dynamic Attributes button (2)

    

92. In the pop-up, choose Display (1) and click on Show (2)

    

93. With the Title (1) still selected, click the When button (2)

    

94. In the pop-up, click qtyUsers (1) and Select (2)

    

95. Click the first Cell in Shipping Details (1) and remove the Text (2)

    

    Note: In version 2.3.2 of Wappler, I had to double click the Cell again to completely remove the text.

96. Repeat the process for the other 3 Cells to finish up with

    

97. Choose the Insert Child button of the first Column (1)

    

98. Click Button (1)

    

99. Double click the button (1) and change its text. Change the Style (2) and turn it into Block Level (2)

    

100. With the Button (1) still selected, click the Dynamic Events button (2)

     

101. In the pop-up, select Mouse (1) and click on Click (2)

     

102. With the Button (1) still selected, click the Action button (2)

     

103. In the pop-up, select Server Connect Load (1), click the Add button (2), select scUsers.load (3), ensure the Reload (4) is not active and click Select (5)

     

104. With the Button (1) still selected, click the Dynamic Attributes button (2)

     

105. In the pop-up, choose Display(1) and click on Hide (2)

     

106. With the Button (1) still selected, click the When button (2)

     

107. Click qryUsers (1) and Select (2)

     

108. Click the Insert After button (1)

     

109. Click Form (1)

     

110. With the Form (1) selected, give it an ID (2), change the Method (3) to post and click the Dynamic Attributes button (4)

     

111. In the pop-up, select Display (1) and Show (2)

     

112. With the Form (1) still selected, lick the When button (2)

     

113. Click qryUsers (1) and Select (2)

     

114. Click the Insert Child button (1)

     

115. Click Button (1)

     

116. Double click the new Button and change the text to Pay (1). Make sure there is a space after and click the Dynamic Attributes button (2)

     

117. Under arrSubtotal (1), choose items (2) and click the Format button (3)

     

118. Right click arrSubtotal.items (1), choose Array (2) and click on Sum (3)

     

119. Right click Sum (1) and click Operation (2)

     

120. Select the Arrow (1) and enter a Value of 15 (2) for our static value.

     

121. Right click 15 (1), Numeric (2) and Format Currency (3)

     

122. Format the currency and click Select (1)

     

123. Click Select (1)

     

     Because I still do not know how to use complicated formating, we need to adjust the code from
     Pay {{arrSubtotal.items.sum() + (15.formatCurrency("$", ".", ",", "2"))}}
     to
     Pay {{(arrSubtotal.items.sum() + 15).formatCurrency("$", ".", ",", "2")}}

124. With the Button (1) selected, give the Button a Style (2), change the Type(3) to submit and make it a Block Level (4)

     

     Don’t forget to save your work. In part 11, we’ll apply the Pay button functionality and insert into the database.

Next Part