Template Monster – Display Template Search results on the same page

This blog post would be of interest to you only if you are a Template Monster Affiliate. Well, I am, and I was trying to display a Search form for users for searching templates on one of my network sites.

You have to agree that Template Monster has provided great User Interface on My Template Storage to enable you to quickly generate code for displaying templates on your site, search among the templates, preview them etc. and then, easily embed the generated code in your site page.

I was able to easily create code for Displaying templates on a site, and to display the Search form for templates on the same site. However, one important issue I was having was that when the user clicked the Search button, the Search Results for the templates always opened in a new page. After some tweaking around, I was finally able to get the Results for Template Search to display on the same page. Here’s how:

Basically, you need to make sure that you have code for Displaying Templates on the same page, where you have code for Searching Templates. Further, you need to ensure that both the (javascript) code fragments use the same frame name for displaying results.

Here’s a further step-by step breakdown of the process to achieve this:

1. Create a Preset from Main >> Presets >> Preset Settings (if you do not already have created atleast one preset). The settings you choose for the Preset does not matter as far as connecting the Search Form to the Search Result Display on the same page is concerned. These settings just control how your Search Form / Result Templates look like.
2. Generate code for “Display Templates on your site” from:
    Main >> Presets >> Preset Tools >> Display Templates on your site
   Here again, the other settings don’t matter much, but the important one would be the “Frame name” setting towards the bottom of the page. Make sure that you fill out a valid name in this box, and note it down for use while generating the Search Form.
   Also, copy the javascript code generated here for later usage.
    
3. Generate code for”Display a Search form on your site” from:
   Main >> Presets >> Preset Tools >> Display a search Form on your site
   Here, the most important setting would be in Step 3. You can fill out whatever suits you in Step 1) & 2).
   In Step 3), please make sure that you fill out the “Frame name” option again, and that the value for this option is exactly the same (including case) as that filled out for this option above (while generating code for Displaying Templates).
   Click “Next” here to reach Step 4) where your Search Form skin code is generated & displayed to you.
    
4. Finally, create a page on your website, and take care that you put-in both the javascript code fragments generated above (one for “Displaying Templates” and other for the “Search Form”) on the same page on your site, at appropriate places.

That should be it, and the Search Results for Templates should now be displaying on the same page where you placed code for “Displaying Templates”. You also have advanced skinning facilities available through custom CSS files for tweaking the Search Form or Template Display exactly as you like.

You can see the result of the above process here:
http://imbibe.in/solutions/website-development