How to Add a Master.com Site Search to your Website
For this illustration we will be using the FREE website search services of master.com.
You can view a Demonstration of an XLEcom website utilizing the master.com site search here:
Go the the Search page and perform a search using the word: computer
To add the search feature to your XLEcom website you will need to do the following:
- Get a FREE master.com website account
- Create a Look-and-Feel Search template file
- Add the Search form code to one of your top navigation menu pages
- If you are using the left and or right side Product Advertising blocks, then you need to add the full website path to the images in the JavaScript ad.js files.
Setting up the Search Feature
In this particular case you will need to first setup your website BEFORE you sign up for a FREE master.com account. The reason is that the free search will only crawl your site once a week and will crawl it the first time when you sign up.
Step 1 - Create a Look-and-Feel Search Template File
This is a necessary step for master.com. Master.com will fetch all the HTML code from this page to create a Look-and-Feel Search template for your site. This template file must include the statement "Master.com.content" in the file. Master.com will replace the "Master.com.content" statement with a Search box and the search results in the return search results web page they create for the Search feature.
(1) To create a Look-and-Feel Search template file, use one of your XLEcom's top navigation menu Support pages and name it Search.
(2) Add the following HTML comment to the Search page in the XLEcom program as shown in the image below:
(3) Add the HTML comment, turn off the page image, and Publish the page.
(4) After Publishing the page, rename the page from search.html to searchtemplate.html.
(5) Upload this searchtemplate.html template file to your html folder on your web sever.
The published searchtemplate.html page file should look as follows.
Step 2 - Sign Up for your Free master.com Search Account
Sign Up for your Free master.com Search and configure your site search parameters. Tell master.com to use the searchtemplate.html file as your Look-and-Feel Search template. Master.com will then immediately crawl your website. Your next site crawl be automatically scheduled for 1 week later.
Step 3 - Add the Search form code to one of your top navigation menu pages
Master .com will provide you with the Search form code to place onto your site. It will look simular to the following code:
<form method=GET action="http://demos.xlecom.master.com/texis/master/search/">
<input name="q" value="" size="40">
<input type=submit value="search">
<input type=hidden name=s value=SS>
</form>
Modify the code slightly to have it centered within your Search page by adding the <div> HTML tags. Also, add the "Master.com.content" statement as follows:
<!-- Master.com.content -->
<div align=center>
<form method=GET action="http://demos.xlecom.master.com/texis/master/search/">
<input name="q" value="" size="40">
<input type=submit value="search">
<input type=hidden name=s value=SS>
</form>
</div>
Next, remove all the line breaks (carriage returns) from the form code so that it will all be contained on a singe line as follows:
<!-- Master.com.content --><div align=center><form method=GET action="http://demos.xlecom.master.com/texis/master/search/"><input name="q" value="" size="40"> <input type=submit value="search"><input type=hidden name=s value=SS></form></div>
Switch back to XLEcom, and replace the "Master.com.content" statement with the single line of code within your Search page as shown in the image below. Next, publish this page (search.html) and upload it to your html folder on your web server.
The published search.html page file including the search form should look as follows
Step 4 - Add the full path to the images in the JavaScript ad.js files
If you are using the left and or right side Product Advertising blocks, then you need to add the full website path to the images in the JavaScript ad.js files.
Master.com uses the Look-and-Feel Search template file to create a search results page that is hosted on their website. Therefore, you will need to add your the full http file path of your website to the images used in the Product Advertising blocks.
If you are using both the left and right side Product Advertising blocks, then XLEcom created four (4) ad.js Javascript files located within your html folder. The files are named ad1.js, ad2.js, p-ad1.js, and p-ad2.js.
Open each of these files in your ASCII text editor and change all the relative paths to the images to an absolute path.
For example, if the relative path is: ../images/image-048-big.jpg
then change it to http://yourwebsite.com/images/image-048-big.jpg
You will need to do this for both the product and add-to-cart images.
Resave the JavaScript files and upload them to your html folder on your web sever.
That's it, your done.
Recent comments