BazaarBuilder

Customising checkoutform1 page (checkoutform1.htm template)

This page is where customer will first enter his contact details or, if he is a returning customer, he will enter his login details and his contact details will be inserted automatically for him. He will have opportunity to modify these details on the next screen. The page is held on a secure server.

It displays 2 forms along with shopping cart. One for New Member Registrations, and other for Existing Members. It contains following javascript in <HEAD of the page.

function newWindow()
{
newWindow = window.open('forgetpass.pl?customerId=
<tmpl_var customerid1>&cart_id=<tmpl_var cart_id>',
'newWin', 'width=750 height=250, scrollbars=no, toolbar=no,
location=0, toolbars=0, status=0')
}

<a href="javascript:newWindow()">Lost Password?</a>

Above JavaScript function is used for existing members to get their account password.

The actual customization procedure is same as with all other similar pages;

Step 1: Getting unformatted copy From BazaarBuilder

Download the "default" copy of checkoutform1.htm from BazaarBuilder to start the customization process. The default checkoutform1.htm contains no formatting as it must be me customized according to each your website's design. To get the template via e-mail;

Select "Download Templates". Choose the default templates (unformatted) or one's you may have uploaded. Select checkoutform1.htm
Enter your amyl address where the default templates are to be sent. NOTE: On occasion some e-mail clients such as Outlook do not receive the e-mail attachments correctly. It is advised that you try using an alternative e-mail address from hotmail , yahoo or any other web based e-mail system.
Press Download.

Step 2: Modifying The Templates.

After receiving the template via e-mail, open it in your favorite web design tool such as Dreamweaver and customize it till you are satisfied with its layout. You may already have a page built that acts as a template for this site's design. In this case simply "cut +paste" the downloaded page into your site and save it as checkoutform1.htm. This template can be uploaded as in step 3 and the process repeated further till you are satisfied with the design.

The default template contains special variables which look almost exactly like normal HTML tags. Each of these variables represents a data for the concerned products that was inserted in the Category Manager section. As long as these variables are included in your pages in their given sequence, you have complete control on how each of the pages is customized to match the rest of the website.

Note 1: Take special care with setting the directory paths to various images and style sheets that may be used on the page. By default ALL the images will be stored in following directory: /bazaar/username/images/ (where username is YOUR own username that was registered with BazaarBuilder). Only GIF and JPG images are allowed. So if an image named globe.gif is used on the pages then the path would be /bazaar/username/images/globe.gif. Some design tools such as dreamweaver automatically the directory paths so its always worthwhile to double check these before uploading the page.

Read this article about how to customise this template.

Step 3: Uploading the modified Templates

After modification files are uploaded again to the server by following these simple steps;

Select "Upload Templates". A list of templates is displayed. Select all the required templates and press "Upload".
The online store will now work. Repeat Step 2 until you are satisfied with the result. Images and Style Sheets (css) can be upload in same manner by following steps 3 and 4 within the Template Builder section.

Step 4: Uploading Template Images

All images included in the template design are can be uploaded. All images will be placed in directory /bazaar/ /username/images/ on the web server.

Select "Upload Images". Select upto three images at a time to upload and press "Upload".
Additional images can be uploaded by repeating the process as many times as required.

Step 5: Uploading Template Style Sheets

In case you have used any external style sheets (css) which need to reside on the server, they can be uploaded to the server by following these simple steps

Select "Upload Templates". Select the style sheet and press "Upload".
paths to the style sheets are /bazaar/username/

This page uses following Template Variables. Sequence of these variables from top to bottom as below excluding above JavaScript:

<tmpl_var customerid>
<tmpl_var cart_id>
<tmpl_var customerid1>
<tmpl_var cart_id>
<tmpl_if currency>
<tmpl_var currency>
</tmpl_if>
<tmpl_if currency>
<tmpl_var currency>
</tmpl_if>
<tmpl_loop name=cart>
<tmpl_var index>
<tmpl_var option_price>
<tmpl_var product_id>
<tmpl_var product_desc>
<tmpl_if option_name>
<tmpl_var option_name>
</tmpl_if>
<tmpl_var product_price>
<tmpl_if option_cost>
<tmpl_var option_cost>
</tmpl_if>
<tmpl_var quantity>
<tmpl_var product_total>
</tmpl_loop>
<tmpl_var nettotal>
<tmpl_if discount>
<tmpl_var discount>
</tmpl_if>
<tmpl_var shipping>
<tmpl_var vat>
<tmpl_var grand_total>
<tmpl_var cart_id>
<tmpl_var customerid>
<tmpl_var curr_id>
<tmpl_var payment_method>
<tmpl_var bandid>
<tmpl_var dcountry>
<tmpl_if errors>
<tmpl_var errors>
</tmpl_if>
<tmpl_var first_name>
<tmpl_var last_name>
<tmpl_var address1>
<tmpl_var address2>
<tmpl_var city>
<tmpl_var tele>
tmpl_var fax>
<tmpl_if country>
<tmpl_var country>
<tmpl_var country>
<tmpl_else>
</tmpl_if>
<tmpl_var billing_zip>
<tmpl_var recipient_name>
<tmpl_var delivery_address1>
<tmpl_var delivery_address2>
<tmpl_var delivery_city>
<tmpl_var delivery_zip>
<tmpl_var email>
<tmpl_var password>
<tmpl_var confirm_password>
<tmpl_var hint>
<tmpl_var curr_id>
<tmpl_var payment_method>
<tmpl_var customerid>
<tmpl_var cart_id>
<tmpl_var bandid>
<tmpl_var dcountry>

Read this article about how to customise this template.