Customise 4D Business Kit To Fit Your Needs

"Built to Order" Stores with 4D Business Kit
Technical Note 02-35

About this Tech Note

In my previous tech note, Creating Customised Dynamic Store Front Pages (#02-24), we developed both the front end and the back end of an e-commerce site from scratch. We had created a dynamic e-commerce solution that utilises the advantages of 4D Business kit. This tech note however, is designed for those who have a firm grasp of HTML and JavaScript. We will create a "Built to Order" type of store, and what better theme to use than a build it yourself computer store? In building this store, we will take advantage of the interactions between HTML, JavaScript and the 4DBK language.

What you will get out of this tech note:

1) Learn how o incorporate HTML, JavaScript and the 4DBK language to build your own "Built to Order" store.

2) How to archive your store and how to retrieve archives into 4D Business Kit.

3) How to set up "Quick Check-Out" features without login from your customers.

A complete store with fully functional web pages is included. The store contents and properties are saved as a 4D Business Kit archive. The web pages, images and the store archive are in the compressed file that is provided with this tech note. To take full advantage of this tech note, you may consider setting up an online merchant test account.

Import "COMP" store archive into 4D Business Kit

Uncompress the included file with this tech note. Launch 4D Business Kit and manually create a new store called "COMP". Do not use the 4D Business Kit Store Wizard to create this store. This will create a new folder for your store (COMP_Site) in your 4D Business Kit root directory and will register your store with the 4DBK Server. Open the folder containing the archived store content. Copy the folder named COMP_Site into the 4D Business Kit directory. The folder we are copying in will replace the folder that was created when we created the store.

Proceed to the Tools menu. From here select the Store Manager option. From the Store Manager, click on the Select an archive bar and select the folder containing the files you have uncompressed. To copy an archived store, one by one, highlight Store, Items and Shipping Options on the left column and click the "Copy to…" button. A dialog box will pop up asking you which store to copy the archive into. Select the new store you have just created, then press Ok. After you have imported these three archives, click on the little house icon next to the name of your store in the column on the right. The contents of the left column should match that on the right.

Launch your web browser and connect to your 4D Business Kit server. Take a look at the functionalities of the store. A flow chart for our entire site is below.

Coding the Site

The first two pages home.htm and list.htm are simple HTML pages that use the 4DBK language to query the database for distinct values in the L02 category. We then set the query to extract all items with a specific value for that category which the user may choose from our site.

The query is set up using the code below:

<!--#4DBKSelectionSet/2-->
<!--#4DBKQuerySet/ALL-->
<!--#4DBKSelectionDistinct/L01-->
<!--#4DBKRecordSet/1-->
<!--#4DBKSortSet/L01-->
<!--#4DBKSelectionSort-->
<tr>
//Loop to display all the distinct values of the L01 category
</tr>

The next page, detail.htm is our workhorse page. This is the page where the user selections thus far will influence what they see and which items they can purchase. This page takes advantage of three JavaScript functions, which interacts with 4DBK language tags to keep track of what the user has purchased, and then when ready, send that information to the shopping cart. Lets take a look at the main JavaScript function: on_onclick.

function on_onclick(current_input, index)
{
var returnValue = true;
if(current_input=='pro') procindex = index;
if(current_input=='med') mediaindex = index;
if(current_input=='mem') memindex = index;
if(current_input=='hd') hdindex = index;
if(current_input=='vc') vcindex = index;
if(current_input=='sc') scindex = index;
if(current_input=='mm') mmindex = index;
if(current_input=='os') osindex = index;
return returnValue;
}

This function takes in a string variable and an integer variable. The string variable is compared to a set of key values, and when a match is found, a predefined variable for that key is set equal to the integer value passed in. The importance of this code can be seen when we use it with HTML and 4DBK. Using HTML and the 4DBK Loop commands, we have created groups of radio buttons that are each associated with one type of product. We then are able to assign each individual product within a group, a unique value using the looping structure of the 4DBK language. When the user clicks on a particular radio button belonging to a particular group of related products, the function on_onclick is called and the value of that group and product is saved in the predefined JavaScript variable. Since HTML treats radio buttons grouped together as an array, this variable is then used to determine which item in the array that the user has checked. We then are able to pass this value onto another JavaScript function, Check_onclick, which will build a string of 4DBK code and use this array value to put the correct item into the shopping cart.

In order to have the JavaScript functions work with our HTML code, we need to use 4DBK's condition statements to determine which product the user has selected and which products are in the same categories as the selected product. Once this is determined, we can then display a list of the products that are associated with the item he is interested in. One example that is used in this tech note is that different models of computers come with different processors. Selecting one type of computer will display one set of processors, while selecting another type of computer will display another set of processors.

<!--#4DBKCaseOf-->
<!--#4DBKSelectionSet/1-->
<!--#4DBKCase/"4DBKField/L01"="@Laptop@"--> //if the user chooses laptop
<!--#4DBKIf("4DBKField/T01"="@A3@")--> //the model of laptop
<td><img align="none" src="../WebMediaUS/p4.gif"></td>
<td><table border="0" width="100%">
<!--#4DBKSelectionSet/3-->
<!--#4DBKQuerySet/T01="@Celeron@"-->
<!--#4DBKSortSet/T01-->
<!--#4DBKSelectionSort-->
<!--#4DBKRecordSet/1-->
<!--#4DBKLoop/VL01,1,4DBKSelectionSize-->
<tr>
<td>//display radio button for this item</td>
</tr>
</table>
</td>
<!--#4DBKIf_//if the user chooses a different laptop model_
//do this
//____
<!--#4DBKEndIf-->
<!--#4DBKCase/_//if the user chooses something else_
//do this_.
//____.
< !--#4DBKEndCaseOf-->

The next page in our flow chart that we come to is the cart.htm. This is the page in which the selected products from our details.htm page are passed in to. This page is simple in functionality and only contains two JavaScript functions and the usual basket looping code to display contents of the shopping cart. What is unique about this page is, the user is presented with a choice of checking out. They may wish to create an account, log in, or if they prefer, perform a quick check out. The last option is for customers who don't want to create an account on your site, and who are usually in a hurry. The JavaScript function: Go_To(site) will empty out the contents of the basket, and take the user to the site specified by the argument passed to it. This function is usually for taking the user back to the previous page, and at the same time, set the basket empty so they can make new selections. The function Check_Out(site) will take the user to the page passed in from the argument. This function is used, depending on the choice of the user, to either take them to the payment.htm page where they can set up an account or to login, or take them to the purchase.htm page where they can proceed with checkout without creating an account. The two functions are show below.

function Go_To(site)
{
var cmd;
cmd="4DBKExecute:4DBKStoreSet/COMP;4DBKSelectionSet/B;
4DBKSelectionSizeSet/0;4DBKGo/";
cmd=cmd+site;
cmd=cmd+";4DBKNoCache";
window.top.location.href=EncodeURL(cmd);
}
function Check_Out(site)
{
var cmd;
cmd="4DBKExecute:4DBKStoreSet/COMP;4DBKGo/";
cmd=cmd+site;
cmd=cmd+";4DBKNoCache";
window.top.location.href=EncodeURL(cmd);
}

The payment.htm page allows the user to either create a new account, or to log in with their email address and password. This page is very similar to the identity and login pages found in many of the templates. However, I have created a page where both functions are combined.

The alternative to payment.htm is the purchase.htm page. Even though we are not having the user officially creating a profile and logging in to the store, this is in fact what they are doing. The user is asked for only the necessary information to proceed with processing the order and shipment. Unbeknown to the users, they are actually creating an account in the Customers table. The only difference here as opposed to creating a permanent account is that there is no log in information available to the user. The necessary customer code field is just the combination of the date and the time the user loads the purchase.htm page. The creation of a user is necessary for calling the 4DBKOrderValidate function. This 4DBK language tag requires that the basket is not empty, and that the user has been identified (for shipment information).

There are three JavaScript functions on this page. One of the functions, checks the credit card information (CheckPaymentForm), another function checks the user information (CheckCustomerForm), and the last function (WriteCustomerForm), calls both the previous two functions to check for accuracy and then executes a string of 4DBK commands to create the customer account and proceed to confirmation.htm. A snippet of code for the function WriteCustomerForm is displayed below.

function WriteCustomerForm(form)
{
var code;
code='<!--#4DBKToday--> + <!--#4DBKNow-->';
if(!CheckCustomerForm(form))
{
return(false);
}
else if(!CheckPaymentForm(form))
{
return(false);
}
else
{
//prepare 4DBK string of commmands.
}
//process string of commands
}

The if statement is set up here so that if there are any errors in either one of the two checking functions, the WriteCustomerForm function will exit. Both of the checking functions must return true, which will cause the statements (!CheckCustomerForm) or (!CheckPaymentForm) to be false, for the else part of the function WriteCustomerForm to execute.

Second to last, is the confirmation.htm page. This page displays the user information as defined by the user, along with the contents of the shopping cart. This page is very similar to cart.htm, except the user is not presented with the choice of checking out at the bottom of the cart.htm page. The user's shipping address is displayed at the top of the page, and a drop down menu offers choice of shipping methods available, then the shopping cart information is displayed for the user to confirm. Once the user is identified and the shopping cart is not empty, we can proceed to verify the shoppers' credit card. The JavaScript code that is responsible for this is the ValidateOrder function. This function passes in the order price of the shopping cart and can use that information plus the is displayed below.

function ValidateOrder()
{
var cmd;
var amountholder;
var cckey;
car ccdate;
amountholder=<!--#4DBKField/PrOrderINV.USD,########0.00-->;
amountholder=amountholder + ",USD";
cckey='<!--#4DBKField/CusCCKey-->';
ccdate='<!--#4DBKField/CusCCExpDate-->';
cmd="4DBKExecute:";
cmd=cmd + "4DBKStoreSet/COMP;";
//you can enter credit card verification infomation here.
// (example below)
//cmd=cmd + "4DBKCreditCardProcess/US_VeriSign_PFP.txt,"+cckey+",
" +ccdate+","+amountholder+";";
cmd=cmd+"4DBKGo/final1.htm";
window.top.location.href=EncodeURL(cmd);
return(true);
}

As with all functions that redirect the user to another page, the ValidateOrder() function uses a JavaScript function imported from the library specified in the header of the HTML pages that requires them. The function that will create an URL from our string of 4DBK code is the EncodeURL function found in the 4DBKConvertDataLib.js file. Many other functions are needed for other functions, such as checking input values, checking credit card number validity, and checking email address validity. These functions are all possible through the script import feature of HTML.

The last page on the list is final.htm. This page, lets the users know their order number, and any other important information regarding their order. We should add in some code that will help us decipher whether or not the credit card transaction has been approved or not. Since we did not include the code to process the credit card transaction, because a merchant account would first have to be set up, we can not yet place any code to process the result of the transaction. However, if you do have an online merchant account already set up when you have read through this tech note, you would edit the last two pages, confirmation.htm and final.htm to include credit card transaction verification and result handling code.

Conclusion

This tech note was more complicated than tech note #02-24. This tech note went more in depth about how 4D Business Kit functioned with HTML and JavaScript languages to create dynamic store web pages. We also discussed about archiving store data and transporting the archive. Last, but not least, we discussed upon the many options of building a store where the user have more freedom about how they want to proceed with their purchase. This project was meant to be more difficult than the others, yet at the same time, the level of difficulty does not go beyond what HTML and JavaScript can pose. By having a firm understanding of how these two languages interact, we are more able to understand how 4D Business Kit can come into the picture. This tech note should offer some sort of a foundation from which to build upon. All of the pages I've discussed and more are included in the compressed file. Go ahead and modify the pages to your liking, and use them to enhance your own pages.

4D UK Newsletter

Please enter your email address to register for the 4D UK newsletter

International | Company | Contact 4D | Site Map | Privacy Policy | © 4D UK 1995-2009 | Change font size: [A] [A] [A] |