This page shows a summery of the order showing the carts contents as well as the customer specific information. Once the user clicks the "Pay Now" button the Order will be saved to the database prior to transferring the customer to your payment merchants payment page.
Begin by opening the cart/summery.aspx page, you will see the following table and buttons.
First thing to do is to insert a Cart control
giving it an ID of "Cart1" as on the previous pages, the following dialog will appear:
Give the cart an ID of "Cart1"
Next navigate to the "Display" section of the dialog and select the "RptCartContents" repeater as the ContainerControl as shown below:
Next navigate to the "UI Elements" section of the dialog and select the "BtnShopForMore" button as the ShopForMoreCmd as shown below:
Next click the "OK" button and the cart tag will be inserted into the page.
The next thing to do is insert an "Insert Database Record" control
that we can use to save the order details to the tblOrders table when the user clicks on the "Pay Now" button. Click the icon on the insert bar and the following dialog will appear:
Set up the properties as shown on the dialog image:
ID = WriteToDB1
ConnectionString = ConStr
DBtable = tblOrders
DataBaseType = OleDb
ManualMode = true (check the box)
Next navigate to the "Parameters" section of the dialog shown below:
Define the Parameters as shown in the dialog image:
CustomerID gets the value: <%# Cart1.CustomerID %>
GrandTotal gets the value: <%# Cart1.GrandTotal %>
SubTotal gets the value: <%# Cart1.SubTotal %>
TaxTotal gets the value: <%# Cart1.TaxTotal %>
Next click the "OK" button on the dialog and the "webxelcart:writetodb" tag will be inserted into the page.
Next insert the Save Order control that will save the products ordered into the OrderItems table after the "Insert Database Record" has inserted the main order information to the tblOrders table.
Do this by clicking the "Save Order To Database" icon
on the insert bar and the following dialog will appear:
define the properties as shown in the dialog image:
ID = SaveOrder1
ConnectionString = ConStr
DBtable = OrderItems
AfterSaveURL = GoMerchant.aspx
DataBaseType = OleDb
OrderIDField = OrderID
Cart = select "Cart1" from the dropdown box
ManualMode = true (check the box)
Next navigate to the "Field Mappings" section of the dialog shown below:
Use the dialog buttons and fields to define the following field mappings:
Cart field "Description" saves to Database field "Description"
Cart field "ID" saves to Database field "PartNo"
Cart field "Quantity" saves to Database field "Quantity"
Cart field "RawCost" saves to Database field "Cost"
Once these field mappings have been defined click the dialogs "OK" button and the "webxelcart:saveorder" tag will be inserted into the page.
You should now have the following 3 icons on your page:
Now we have to define the DataBinding expressions required to show the cart values on the page, this is very simple and is performed in the same manner as displaying a dataset field value, by dragging the appropriate value from the bindings panel to the design surface of the page, when a cart control is inserted into a page it will also populate the bindings panel with common fields and properties that you can use to display the data on the page, it look like the below image:
By selecting one of these items and dragging it to the pages design surface you can display cart data on the page in a simple manner, for instance if you drag the "Description" item onto the page you will see this in the design view:
And this in the code view:
<%# DataBinder.Eval(Container.DataItem, "Description") %>
What we will do now is drag some of these items onto the page to display the data we want, in the table row with the orange background drag the Binding item called "ID" into the orange cell with the caption of "PartNo", then carry on filling this row with the following items:
The orange row should have changed from:
To:
Now if you select the {Container.Cost} expression the binding panel will select the appropriate field automatically, you can now format this value as currency by using the dropdown format option of the bindings panel shown in the following image:
The binding expression visible in the code window will then change from:
<%# DataBinder.Eval(Container.DataItem, "Cost") %>
To:
<%# Double.Parse(DataBinder.Eval(Container.DataItem, "Cost").ToString()).ToString("C") %>
Perform the same procedure on the {Container.TotalCost} expression as that is also displaying a monetary value.
Next we want to drag the totals into the totals section of the table, drag:
"Sub Total" cell gets Binding item "SubTotal"
"Carriage" cell gets Binding item "CarriageCost"
"Tax Total" cell gets Binding item "TaxTotal"
"Grand Total" cell gets Binding item "GrandTotal"
The bottom 4 rows should then look similar to the following image:
Next we want to display the customers name and address details in the top part of the table, these values are stored within the carts StorageItems collection and can be displayed using the following expression:
| C#
|
| <%= Cart1["ItemName"] %>
|
|
|
| VB
|
| <%= Cart1.Item("ItemName") %>
|
Where ItemName would be the StorageItems name, so in the cell to display the customers name we add:
| C#
|
| <%= Cart1["FirstName"] %> <%= Cart1["LastName"] %>
|
|
|
| VB
|
| <%= Cart1.Item("FirstName") %> <%= Cart1.Item("LastName") %>
|
If you recall on the Checkout: Get Customer Info page (getcustinfo.aspx) the form fields on that page were called "FirstName" and "LastName" as are the respective database fields in the Customers table, these were stored in the carts StorageItems using the carts store method and passing either the Request.Form or the Database record, so you know that the StorageItems name for the "FirstName" database or form field is also going to be called "FirstName".
In the cell for displaying the customers email address use:
| C#
|
| <%= Cart1["EmailAddress"] %>
|
|
|
| VB
|
| <%= Cart1.Item("EmailAddress") %>
|
And for the cell displaying the customers address use:
| C#
|
| <%= Cart1.PreserveLineBreaks(Cart1["Address"]) %>
|
|
|
| VB
|
| <%= Cart1.PreserveLineBreaks(Cart1.Item("Address")) %>
|
The PreserveLineBreaks method of the cart takes the given value and returns a string with all the line breaks replaced with a <br> tag so that multiple lines are rendered in the html.
Once you have finished adding the customer's name and address details in the top part of the table it should look similar to the following image:
Ok thats all the visual display stuff taken care of, now we need to add a little bit of code to this page.
Begin by selecting the cart control
and then click the "Wire Event..." button on the property inspector, from the event menu select "Load" and click "OK", the following code block will then be inserted into the page:
| C#
|
| <script runat="server">
|
| void Cart1_Load(object sender, System.EventArgs e)
|
| {
|
| //code here
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub Cart1_Load(sender As Object, e As System.EventArgs)
|
| 'code here
|
| End Sub
|
| </script>
|
Modify this event procedure to contain the following code:
| C#
|
| <script runat="server">
|
| void Cart1_Load(object sender, System.EventArgs e)
|
| {
|
| if(Cart1.GrandTotal > 50){Cart1.CarriageCost = 0;}
|
| else{Cart1.CarriageCost = 15;}
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub Cart1_Load(sender As Object, e As System.EventArgs)
|
| If Cart1.GrandTotal > 50 Then
|
| Cart1.CarriageCost = 0
|
| Else
|
| Cart1.CarriageCost = 15
|
| End If
|
| End Sub
|
| </script>
|
This will run each time the cart control loads and check the GrandTotal value, if the value is over 50 CarriageCost will be set to 0, otherwise CarriageCost will be set to 15, we will look at alternative method of calculating CarriageCost later but for now we will keep thing as simple as possible.
Next select the "Insert Database Record" control
and then click the "Wire Event..." button on the property inspector, from the event menu select "RecordInserted" and click "OK", the following code block will then be inserted into the page:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordInserted(object sender, WebXelCart.RecordInsertedEventArgs e)
|
| {
|
| //code here
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordInserted(sender As Object, e As WebXelCart.RecordInsertedEventArgs)
|
| 'code here
|
| End Sub
|
| </script>
|
Modify this event procedure to contain the following code:
| C#
|
| <script runat="server">
|
| void WriteToDB1_RecordInserted(object sender, WebXelCart.RecordInsertedEventArgs e)
|
| {
|
| Cart1.OrderID = e.Identity;
|
| SaveOrder1.Save();
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub WriteToDB1_RecordInserted(sender As Object, e As WebXelCart.RecordInsertedEventArgs)
|
| Cart1.OrderID = e.Identity
|
| SaveOrder1.Save()
|
| End Sub
|
| </script>
|
This will run when the order information is inserted into the tblOrders table, the carts OrderID property is then set to the newly inserted records Identity value, in this case it comes from the tblOrders table's OrderID field value. After the OrderID is set the Save() method of the Save Order To Database control(SaveOrder1) is called causing it to save the cart items to the OrderItems database table, it is very important that this method is only called *after* the carts OrderID property is set because the OrderID value is used to identify which order an order item relates to.
Next we need to add an event procedure for when the user clicks the button, within this event procedure we will place the code calling the Save() method of the Insert Database Record control(WriteToDB1).
Begin by placing the following code block in the page:
| C#
|
| <script runat="server">
|
| void btnCheckout_Click(object sender, System.EventArgs e)
|
| {
|
| WriteToDB1.Save();
|
| }
|
| </script>
|
|
|
| VB
|
| <script runat="server">
|
| Sub btnCheckout_Click(sender As Object, e As System.EventArgs)
|
| WriteToDB1.Save()
|
| End Sub
|
| </script>
|
Then find the btnCheckout button, that's the one with the text "Pay Now" and add the following attribute to its tag:
OnClick="btnCheckout_Click"
This wires the event procedure you just defined to the click event of the button so that when the user clicks the button the event procedures code will be executed causing the Database Record control (WriteToDB1) to insert the record into the tblOrders table, this control in turn calls the Save() method of the Save Order To Database control(SaveOrder1) control from it's RecordInserted event, this guarantees that the order will not be saves until the button is clicked and also that the OrderItems are never saved before the parent record has been inserted into tblOrders and the OrderID is obtained.
Next: Transfer to Payment Gateway