How to Create an Advertisement Block

How to Create an Advertisement Block

The methods illustrated on this page are only applicable to XLEcom versions 3.92 and below. Versions greater than 3.93 already have this functionality built into the program. Visit the following pages for more information: XLEcom Version 3.93 Released and How to Create Custom Advertisement Blocks.

The following are instruction on How to Create an Advertisement Block that will be displayed on every web page within the Left Frame / Area underneath the Product Navigation menus.

Table of Contents

  • Introduction
  • How the Process Works
  • How the Advertisement Block Functions
  • Incorporating the Advertisement Block to the XLEcom Program
  • Example 1 - How to Create a Featured Product Ad including an Add-to-Cart button (figure 1)
  • Example 2 - How to Create a General Advertisement Block (figure 2)
  • How to use with Framed and Non-Framed Published web sites
  • Example File Download

Introduction
There are two examples discussed in this section:

  • (1) How to create a Featured Product Ad including an Add-to-Cart button (figure 1)
  • (2) How to create a General Advertisement Block (figure 2)

How the Process Works
The information for the Advertisement Block is contained in a separate ASCII text file located in the html directory on the web server. This file would have the file extension .js as in ad1.js for example. When a web page from your site is viewed, the contents of the Advertisement file is dynamically extracted and displayed on the web page within the Left Frame / Area.

The benefit of having the contents of the Advertisement located in a separate file, is that you only need to replace this single file when you want to change the Advertisement. The rest of the site remains untouched.

Below are two example web page screen shot images showing both a (1) Featured Product Ad including an Add-to-Cart button and a  (2) General Advertisement Block.

Figure 1 - Featured Product Ad including an Add-to-Cart button

 

Figure 2 - General Advertisement Block


How the Advertisement Block Functions
You simply create an Advertisement Block by entering your HTML code for the Advertisement Block into a separate ASCII text file and saving the file with the JavaScript .js file extension. For example, the file name could be something like ad1.js. Next, you place a "call" to this ad1.js file by inserting the following line of script code into the web pages.

<script type="text/javascript" src="ad1.js"></script>

When the web page is displayed in a web browser, the code within the ad1.js file is dynamically extracted form this file and displayed on the page.

Incorporating the Advertisement Block to the XLEcom Program
To add a "call" to this ad1.js file, place the above line of script code into the Additional User Code edit box in the Site Setup - Left Frame / Area Dialog box as shown in the image below.

When you Publish the web site, the Advertisement Block will appear in the Left Frame / Area underneath the Product Navigation menus as shown in the above web page screen shot images. That's it.


Example 1 - How to Create a Featured Product Ad including an Add-to-Cart button (figure 1)

Step (1) As stated perviously, you need to first create the ad1.js file. The code shown below is the contents of the ad1.js file:

var HTMLCodeStart = '<table border=0 cellspacing=0 cellpadding=3 width=145 style="border: 1px solid #FF0000;"><tr><td bgcolor="#FFFFC0" align=center valign=middle><font color="#FF0000" size="-1" face="Arial"><b>Featured Product</b></font></td></tr><tr><td bgcolor="#FFFFC0" align=center valign=middle><font size="-2" face="Arial">Linksys Wireless Notebook Kit Router and PC Card</font></td></tr><tr><td bgcolor="#FFFFC0" align=center valign=middle><font size="-2" face="Arial">List Price: $120.00<br><font color="#FF0000" size="-2" face="Arial">Our Price: $99.95</font></td></tr><tr><td bgcolor="#FFFFC0" align=center valign=middle><img width=100 src="../images/image-107.jpg" border=1></td></tr><tr><td bgcolor="#FFFFC0" align=center valign=middle>';

var AddtoCartForm = '<form action="http://ww7.aitsafe.com/cf/add.cfm" method="post" target="shopcart"><input type="hidden" name="userid" value="98103224"><input type="hidden" name="price" value="99.95"><input type="hidden" name="scode" value="LINK105A"><input type="hidden" name="noqty" value="0"><input type="hidden" name="units" value="0"><input type="text" name="qty" size="3" value="1">&nbsp;<input type="hidden" name="product[]" value="Linksys Wireless Notebook Kit - Router and PC Card"><br><br><input type="image" name="submit" src="../images/add-to-cart-01.gif" border="0" alt="Add to Cart" OnClick="window.open(\'\',\'shopcart\',\'scrollbars,resizable,status,width=600,height=400\')"></form>';

var HTMLCodeEnd = '</td></tr></table>';

document.write(HTMLCodeStart + AddtoCartForm + HTMLCodeEnd);

To create a new Product Ad, you only need to change the text shown in Blue within the var HTMLCodeStart = ' '; statement and replace the Add-to-Cart HTML form code in the var AddtoCartForm = ' '; statement with another Add-to-Cart HTML form code.

The code within the var HTMLCodeStart = ' '; statement is the HTML table formatting and text for the Product Ad.

The code within the var AddtoCartForm = ' '; statement is the Add-to-Cart HTML form. This form displays both the quantity edit box and Add-to-Cart button. To simply acquire the Add-to-Cart HTML form, first Publish your site and then view the source code of the particular product page (page_xxx.html) that contains the Ad you want in an ASCII text editor such as Windows NotePad. Next, extract the HTML form code for the Featured Product Ad and then copy and paste this form code into the var AddtoCartForm = ' '; statement. Next, insert a back slash (\) before all the single quotes (') in the form statement. The single quotes (') are located near the end of the form after the OnClick event command, OnClick="window.open('','shopcart','scrollbars,resizable,status,width=600,height=400')"></form>. This inserting of a back slash (\) is necessary for the proper coding of the JavaScript function. Caution: Do not insert a back slash (\) before the two single quotes (') which are part of the var AddtoCartForm = ' '; statement.

The code within the var HTMLCodeEnd = ' '; statement is the HTML code for the end of the table.

The document.write(HTMLCodeStart + AddtoCartForm + HTMLCodeEnd); statement concatenates all the HTML code into a single line of code and writes it to the web page upon viewing in the browser.

Step (2) Save and place this ad1.js file into the XLEcom's Assets/html foder. The default installation full path location is C:\Program Files\XLEcom\Assets\html. To view the Advertisement Block when Previewing the web pages using XLEcom's Preview functions, also place a copy of the ad1.js file into the XLEcom's Preview folder C:\Program Files\XLEcom\Preview.

Helpful Hint: It is best to edit the ad1.js file that is located in the Preview folder, then when satisfied with the results of the Advertisement Block, copy this file to the Assets/html folder because it will be the file from this location that is uploaded to the web server.

Step (3) Place the following line of script code into the XLEcom Additional User Code edit box in the Site Setup - Left Frame / Area Dialog box as shown in the above dialog box image.

<script type="text/javascript" src="ad1.js"></script>

Step (4) Before you Publish your web site, check the box labeled "Copy all files from the Assets/html folder (*.*) to the Publish folder" as shown in the Publish dialog box image below.

That's it.


    Example 2 - How to Create a General Advertisement Block (figure 2)
    The procedure to create a General Advertisement Block is nearly identical to one outlined in Example 1. All you need to do is create a separate ASCII text file (ad2.js) with the contents shown below and place this file into the XLEcom's Assets/html folder. Then just follow Steps (2), (3), and (4) as stated above.

    document.write('<table border=0 cellspacing=0 cellpadding=3 width=145 style="border: 1px solid #FF0000;"><tr><td bgcolor="#FFFFC0" align=center valign=middle><font color="#FF0000" size="-1" face="Arial"><b>Limited Time Sale</b></font><br><font size="-2" face="Arial"><b>Take an additional 20% off on all purchases !</b><br>Discount will be applied at Checkout.</font></td></tr></table>');

    The document.write(' '); statement writes HTML code contained within the single quotes and parentheses to the web page upon viewing in a web browser. Keep in mind that if your HTML code contains any single quotes ('), then insert a back slash (\) before all the single quotes (') in the HTML code. Caution: Do not insert a back slash (\) before the two single quotes (') which are part of the document.write(' '); statement.

    To create a new General Advertisement Block, you only need to change the text shown in Blue within the ad2.js file.


    How to use with Framed and Non-Framed Published web sites
    This procedure works well for framed web sites. The only difference when using Non-Framed web sites, is that you must place a second copy of the Advertisement Block ad.js file into the root directory on the web server for the Advertisement Block to appear on the Home Page. This is due to different file path locations of the Non-Framed HTML documents. The Non-Framed Home Page calls the ad.js file from the root directory and the rest of the Non-Framed pages call the ad.js file from the html directory. All the pages in a Framed site call the ad.js file from the html directory.


    Example File Download
    You can download both the ad1.js and ad2.js sample files by clicking on the following link. Download ad_javascripts.zip

    Sam Raheb
    XLEcom Program Developer