This is the second part of how to create an e-shop using DNM Rad. Make sure that you have completed all the steps in Part 1.

Some alterations from Part 1

• Go  into ‘cartlines’ change name of tablefield ‘desc’ to ‘descr’ (desc will give an error when loading data, this is solved in version DNM 01.10.06)
• Add the following three fields in ‘cartheader’
  • head_Name – Text
  • head_Surname – Text
  • head_Email - Text

Adding Currency to your prices

 If you want your price label to display the currency symbol, example the image below.

You need to go into the form and control displaying the price, go into 'Data Calculation' and select Currency Symbol & Currency and save.

Now this won't make your price display any currency symbol because we never specified which currency symbol we want to display. In DNM Rad we can specify a default currency which will be used if no currency is specified via the Currency Control (will be explained in a blog).

To do the default currency you need to go to 'Control Panel', Settings and add the following Setting.

This will instruct DNM Rad to use the € symbol if not currency is being used. The 'EUR' code needs to be set as it will be used as a default code for payment gateways.

Now as you can see below the prices are being displayed with a currency symbol in front.

Creating a Cart View Form

One thing we need to do is to add a cart view so that the user can see what he currently has in his cart.

This can be done easily by creating a form that displays the item in table 'cartlines'

Go into control panel, create new form, eg. frm_CartView. When you are viewing form properties, set the following properties.

Why do we set the Cart sources? This is done because in our cart view we will be adding an "Add to Cart" and "Remove from Cart" button ( + , - ). So we need to indicate like we did in our Items View form which table is the cart. Now since both the Data Source of the form and the Cart Source of the form are the same DNM Rad will know that it is the same source and will only used data to increase and decrease the quantity.

Press Save.

Go into Templates

Create the following template.

Header

<table>
<tbody>
<tr>
<td>Item</td>
<td>Quantity</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><td colspan="5"><hr></td></tr>

Body

<tr>
<td>[DNMLABEL::ID=shop_Cart_Item]</td>
<td>[DNMLABEL::ID=shop_Cart_Qty]</td>
<td>[DNMBUTTON::ID=btnInc]</td>
<td>[DNMBUTTON::ID=btnDec]</td>
<td>[DNMBUTTON::ID=btnDel]</td>
</tr>

Footer

<tr>
<td colspan="5"><hr></td>
</tr>
<tr>
<td colspan="5">[DNMBUTTON::ID=btnAddNew]</td>
</tr>
</tbody>
</table>

As you can see when you concatenate all the text you will end up with a table, this is why we use the property 'View as Textbox' because this property will instruct DNM Rad to use a normal textbox as a template editor and also not to use a Data List to repeat data in the middle. It will just concatenate the HTML, repeating the body part for the amount of data you have loaded.

Back to properties.

Set the data sources for both the shop_cart_itemname, shop_cart_quantity.
Go to btninc and set the event to add to cart, also write button text.
Go to btndec and set the event to delete from cart, also write button text.
Go to btndel and set the event to delete, also write button text.
Go to btnGoToCart, set the event to Navigate and text Proceed to Checkout. (We will add navigator at a later stage)
Now we need to create the form where the checkout control will be implemented.
Go into Control Panel, then Forms; Click ‘New Form’ and type in the name of your new form, e.g. frm_Checkout.
In the new form you need to set the datasource to the header table.
Click on ‘Templates’, so we can start created the form. Click ‘Generate Edit Form Template’ this will generate a template depending on what fields you created in the header table. In this case I only want to save Name, Surname and Email. You can add more fields, e.g. Shipping Address, Billing Address etc.
Now we need to add two controls that will give us the functionality to send our information to a payment gateway. These controls are:

• DNMCHECKOUT control
• DNMCHECKOUTCONT control

The DNMCHECKOUT control is the main control this control has all the checkout process functionality in built. It will collect the required data and using information gathered from properties you will set it will carry out the latest calculations before sending the info to the assigned payment gateway.
The DNMCHECKOUTCONT control is used to specify the DNM Rad where you want to load the payment gateway. Some payment gateways have IFrames implemented with this control you can specify where you want to display the control. Although some payment gateways like paypal do not use the iframe method, you still need to implement this control.

<!--This is an auto generated template -->
<table>
<tbody>
<tr>
<td>[DNNLABEL::ID=lblhead_Name::HelpText=Name::Text=Name]</td>
<td>[DNMTEXTBOX::ID=head_Name::Source=head_Name::Size=255::Required=False]</td>
</tr>
<tr>
<td>[DNNLABEL::ID=lblhead_Surname::HelpText=Surname::Text=Surname]</td>
<td>[DNMTEXTBOX::ID=head_Surname::Source=head_Surname::Size=255::Required=False]</td>
</tr>
<tr>
<td>[DNNLABEL::ID=lblhead_Email::HelpText=Email::Text=Email]</td>
<td>[DNMTEXTBOX::ID=head_Email::Source=head_Email::Size=255::Required=False]</td>
</tr>
<tr>
<td colspan="2">[DNMCHECKOUTCONT::ID=checkCont]</td>
</tr>

<tr>
<td colspan="2">[DNMCHECKOUT::ID=btncheckoutControl]</td>
</tr>
</tbody>
</table>

Click ‘Save Template’ when you are ready from any design changes and go back to properties.
Set the datasource properties of any controls you might have except the DNMCHECKOUT control.
Note: DNMCHECKOUTCONT does not have any properties.
When you are ready from the properties click on the DNMCHECKOUT control, here you will find a list of properties that will help you set up your checkout process. This is an extensive list of properties but it is divided in section to make it easier to understand. We will go through those properties to make your checkout process work. Then we will go through the other sections like shipping, taxes, discount at a later stage.
I will be assuming that you want to connect your checkout button to a paypal. Note: that for other payment gateways the same properties may apply, certain properties may differ from one payment gateway and the other.
Here is the list of properties which you need to set to connect to a payment gateway and their description.

Although there are a lot more properties we only need these to connect to a payment gateway, we will tackle shipping calculations, tax calculations etc. at a later stage.

Installing a Payment gateway

Click here to download the PayPal Files.

To install a payment gateway all you need to do is take the dll from the zipped file and put the dll in the bin folder in your dotnetnuke installation.

Then there is an .ascx file extract that to
site\DesktopModules\DotNetMushroom\Gateways\paymentgateway\paymentgatewayPayment.ascx

Example:
Website1\DesktopModules\DotNetMushroom\Gateways\Paypal\PaypalPayment.ascx

If Gateways folder does not exist create it. You need to create you payment gateway folder and make sure the ascx is named the payment gateway folder + Payment.ascx.
After doing this step you then will have Paypal listed in the property ‘Payment Gateway’.

Setting the Navigator

When you need to navigate to a form upon status change, you need to set the following navigators.

• Change Form to show the Confirm Form
• Change Form to show the Decline Form
• Change Form to show the Error Form
• Change Form to show the Cancel Form
• Filter to load the order used.

Setting Payment Settings

Payment gateways require certain information that for all orders the setting and values are always the same for example in paypal you need to pass the parameter ‘buisness’ in all orders.
In DNM Rad you can set these settings in the control panel and are automatically passed in every order. You do this by accessing ‘Payment’ in Control Panel, select the payment gateway you want (you need to installed the payment gateway to see the payment gateway in the list). Then set the settings like for example:

Creating Email Templates for E-Shop

When creating Email Templates (there are two email templates that are used in the e-shop Confirm and Decline) you need to create two forms that will load data from two tables ‘cartheader’ and ‘cartlines’

Header

<table>
<tr><td colspan="2">Order Confirmed</td></tr>
<tr>
<td>Name</td><td>[head_Name]</td>
</tr>
<tr>
<td>Surname</td><td>[head_Surname]</td>
</tr>
<tr>
<td>Email</td><td>[head_Email]</td>
</tr>
<tr><td colspan="2">Items Ordered</td></tr>
<tr>
<td>Item</td><td>Qty</td>
</tr>

Body

<tr>
<td>[descr]</td><td>[qty]</td>
</tr>

Footer

<tr><td colspan="2">Thanks for shopping with us.</td></tr>
</table>

Loading Cart Data

Some of you may notice that we never specified how the cart will load cart items specifically for the user logged in or visiting the site. In fact currently the cart will load all the items in the cart without taking in consideration order status and user.
This is done by adding a filter to the form, now instead of using a navigator we want to load that form with that filter. In order to achieve this we will use a form property (created in version DNM 01.10.06) named ‘Form Filtering’.
This property will load the form with that specific filter.
Now the filter should be something like this

(dnm_Status <> 1  AND dnm_UserId = {%dnm_userid}) OR (dnm_Status <> 1  AND dnm_sid = '{%dnm_sid}')

Lets explain this filter:
‘dnm_Status <> 1’
This is used to load orders that do not have their status set to ‘Confirm’ (i.e. 1), this means that if order is Declined (i.e. 0), In Progress (i.e. 2), Error (i.e. 3) or Cancelled (i.e. 4) the item will be loaded.
‘dnm_UserId = {%dnm_userid}’
This is used to load those item that have the user id set to the current logged in user

‘dnm_sid = '{%dnm_sid}'’

This is used to load those items that have the session id set to the user’s session id.
Note: this is normally used for when you want to allow users to buy from your shop without having to log in.
So the filter will load cart items:

Status is set not Confirmed and User id is the same as the currently logged in user OR Status is set not Confirmed and session id is the same as the user’s Session Id