wCart Tutorial part 11. Checkout Functionality

[ben]

For this part of the Tutorial, we need to be able to post the following variables to our database.

• For the Orders table we need
  ** OrderUserID
  ** OrderAmount
  ** OrderShipping
• For the OrderDetails table we need
  ** DetailName
  ** DetailPrice
  ** DetailQuantity
• For the Email we need
  ** UserName
  ** UserEmail

To do this, we’ll create a hidden text input for each value. These values are obtained from the information that we have already gained within the document. We need to remember that OrderDetails are kept in an array meaning that we will need to have a repeat region.

1. Right click the Form (1), choose Forms (2) and click on Text Input (3)

   

2. Select the Text Input (1), change the ID (2), remove the Class (3) and change the Type (4) to hidden

   

3. With the Text Input (1) still selected, Duplicate (2) it 4

   

   so that there are 5 Text inputs all up

   

4. Select the first Text Input (1), change the ID (2) and Name (3) to reflect userid and click the Dynamic Attributes button (4)

   

5. In the pop-up, click Value (1)

   

6. With the Text Input (1) still selected, click the Value button (2)

   

7. Click UserID (1) and Select (2)

   

8. Select the next Text Input (1), change the ID (2) and Name (3) to reflect username and click the Dynamic Attributes button (4)

   

9. In the pop-up, click Value (1)

   

10. With the Text Input (1) still selected, click the Value button (2)

    

11. In the pop-up, change the filed to an Expression (1), click UserFirstName (2), add + ’ ’ + (3), click on UserLastName (4) and Select (5)

    

12. Select the next Text Input (1), change the ID (2) and Name (3) to reflect useremail and click the Dynamic Attributes button (4)

    

13. In the pop-up, click Value (1)

    

14. With the Text Input (1) still selected, click the Value button (2)

    

15. Click UserEmail (1) and Select (2)

    

16. Select the next Text Input (1), change the ID (2) and Name (3) to reflect subtotal and click the Dynamic Attributes button (4)

    

17. In the pop-up, click Value (1)

    

18. With the Text Input (1) still selected, click the Value button (2)

    

19. In the pop-up click arrSubtotal.items (1) and the Format button (2)

    

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

    

21. Click Select (1)

    

22. Click Select (1)

    

23. Select the last Text Input (1), change the ID (2) and Name (3) to reflect postage and enter our Static Value of 15 (4)

    

24. Right click the last Text Input (1), select to Add After (2), Data (3) and click Repeat Children (4)

    

25. Select Div Repeat (1), give it an ID of record (2) and click the Expression button (2)

    

26. Click Cart (1) and Select (2)

    

27. Right click Div Repeat (1), select Form (2) and click Text Input (3)

    

28. Select the new Text Input (1), remove the Class (2), change the Type to hidden (3) and duplicate 2 more times (4)

    

    giving us 3 Text Inputs

29. Select the First Text Input (1), change the ID (2) and Name (3) to reflect productname and click the Dynamic Attributes button (4)

    

30. Click Value (1)

    

31. With the Text Input (1) still selected, click the Value button (2)

    

32. In the pop-up, select under Form: frrmPay (1), product (2). Remove items. (3) and click Select (4)

    

33. With the Text Input (1) still selected, click the Dynamic Attributes button (2) once again.

    

34. In the pop-up click Name (1)

    

35. With the Text Input (1) still selected, click the Name Value button (2)

    

36. In the pop-up, change the Field to a Template (1), enter record[ (2) and under Form: frmPay (3) select $index (4). Add ][productname] (5) and click Select (6)

    

37. Select the second Text Input (1), change the ID (2) and Name (3) to reflect price and click the Dynamic Attributes button (4)

    

38. Click Value (1)

    

39. With the Text Input (1) still selected, click the Value button (2)

    

40. In the pop-up, select under Form: frrmPay (1), price (2). Remove items. (3) and click Select (4)

    

41. With the Text Input (1) still selected, click the Dynamic Attributes button (2) once again.

    

42. In the pop-up click Name (1)

    

43. With the Text Input (1) still selected, click the Name Value button (2)

    

44. In the pop-up, change the Field to a Template (1), enter record[ (2) and under Form: frmPay (3) select $index (4). Add ][price] (5) and click Select (6)

    

45. Select the last Text Input (1), change the ID (2) and Name (3) to reflect quantity and click the Dynamic Attributes button (4)

    

46. Click Value (1)

    

47. With the Text Input (1) still selected, click the Value button (2)

    

48. In the pop-up, select under Form: frrmPay (1), qty (2). Remove items. (3) and click Select (4)

    

49. With the Text Input (1) still selected, click the Dynamic Attributes button (2) once again.

    

50. In the pop-up click Name (1)

    

51. With the Text Input (1) still selected, click the Name Value button (2)

    

52. In the pop-up, change the Field to a Template (1), enter record[ (2) and under Form: frmPay (3) select $index (4). Add][quantity] (5) and click Select (6)

    

53. Now for some Server Actions. Under Orders, add a new action called checkout (1)

    

54. Keep checkout (1) selected, select Globals (2) and click the Linked Page folder (3)

    

55. Select our checkout page (1) and click Open (2)

    

56. With checkout (1) and Globals (2) still selected, click the Form button (3) and choose our frmPay (4) from the list. Click Import From Form (5)

    

57. With checkout (1) still selected, right click Steps (2), choose Database Actions (3) and click on Database Connection (4)

    

58. Click the connection folder (1) and click the database connection (2).

    

59. Right click Database Connection (1), choose Database Actions (2) and click on Database Insert (3)

    

60. Assign a Name (1) and click Insert Options (2)

    

61. Select the orders table (1), remove all of the unwanted columns so that we are left with these (2) and click on the Value thunderbolt for OrderUserID (3)

    

62. Choose userid (1) and click Select (2)

    

63. Repeat for OrderAmount

    

64. For OrderShipping

    

65. Click OK (1)

    

66. Right click Database Insert (1), choose Core Actions (2) and click Repeat (3)

    

67. Give the Repeat a Name (1), click the Expression thunderbolt (2) click record (3) and Select (4). Make sure that Output (5) is not selected.

    

68. Right click Steps (1), choose Database Actions (2) and click Database Insert (3)

    

69. Give the Action Step a Name (1) and click Insert Options (2)

    

70. Choose the orderdetails table (1), make sure that we show only those fields that are required (2), click the DetailOrderID thunderbolt (3),
    identity (4) and Select (5)

    

71. Click the thunderbolt for DetailName (1), choose productname (2) and click Select (3)

    

72. Repeat for DetailPrice

    

73. And for DetailQuantity

    

74. Click OK (1)

    

75. For orientation, this is what the Globals $_POST section looks like

    

    and this is what the Action Steps look like

    

    Don’t forget to Save (1) our actions

76. Back to checkout.html. select the Form (1) and click Make Server Connect Form (2)

    

77. With the Form (1) still selected, click Select Server Action (2)

    

78. Select checkout (1) and click Select (2)

    

79. With the Form (1) still selected, click Dynamic Events (2)

    

80. Choose Server Connect and click Success (2)

    

81. With the Form (1) still selected, click the Action button (2)

    

82. We will now empty our arrays, we have emptied the cart and logged the details in our database. Choose each of the 3 Arrays (1), choose Empty (2) and click the Add To button (3)

    

83. We will also direct our user to the invoice page. Under Browser (1), choose Go To (2), click the Add To button (3) select browser1.goto (4), enter the URL as ‘checkout-invoice.html’ (5) not forgetting the single quotes and click Select (6)

    

Next Part

[raymantle]

@ben , Thanks for all your hard work put into this project.

I know these guides will be the corner stone to many Wappler sites going forward.

Ray.

[baub]

So there are two tables for orders? One for the orders, and then one for the details of the orders? Is that right, I guess?

[edit] ok, I see the table layouts at the top. Sorry for asking dumb question… Keep up the good work!