I was helping another web designer at www.PizzaToday.com solve some quirks with Adobe Business Catalyst. On the pizza magazine’s site they are have several web apps and one of those lets visitors submit classified ads. Visitors can then go to the classified ads page, choose a category of ads from a search form like Equipment for Sale, and click the Submit button to get a list of those ads.

But the magazine needed another approach. Elsewhere in the site, they needed a link that when clicked would take a web visitor directly to a specific category of classifieds, like the list of Equipment for Sale classifieds, without the visitor having submit the search form.

Unfortunately, Adobe Business Catalyst has no built-in way to automate this. It normally requires creating a separate page dedicated to displaying each category, which isn't practical when there are many categories of info.

What PizzaToday.com needed was a way for a link to go to the regular classified search page and automatically act as if the user clicked on one category and automatically produce the correct results list.

We created the solution using a few lines of jQuery code. Here’s how…

Normally going to www.PizzaToday.com/classifieds.htm takes you to the page where web visitors search with a web app search form.

Now we want a www.PizzaToday.com/classifieds.htm?category=Equipment for Sale link to go that page and automatically choose the Equipment for Sale category and submit the form and immediately produce the chosen ads.

Here’s our solution:

<script type="text/javascript">
   jQuery(document).ready(function(){
   var theCategory = '{ module_url,category}' ;
   if (theCategory) {
      jQuery('form.webapp option:contains("' + theCategory + '")').attr('selected', 'selected');
      jQuery("form.webapp").submit();
  }
 });
</script>

Remember, for this script to work your site must have jQuery loaded. See Loading jQuery.

Also, to your web app form on the page, you must add class="webapp" so this script knows which form on your page to work with, since your page may have more than one form.

How Does It Work?

Adobe Business Catalyst has a { module_url,variable} which will look at the address for this page in the browser, and look for a variable at the end of the URL in the format: variable=somevalue. In our example, if we use then it will study the page URL http://www.PizzaToday.com/classifieds.htm?category=Equipment for Sale and look for the word "category" following a ? and if found then { module_url,category} will return the value "Equipment for Sale"

• In line 4 of the script, we store any value following category= in the URL that called the classifieds page into our variable theCategory.
• In line 5, the IF tests if theCategory has a value, otherwise if it is null then nothing happens and the script ends. If there is a category value we continue...
• In line 6, the code looks at form with class="webapp" (form.webapp) and in it selects the category value in the form's category select box.
• In line 7 the code submits the form, causing Business Catalyst to render the search results to display only classifieds in the given category.

Modifying This Code

In addition to selecting a category, this code can be changed to use other search fields in the form. For instance, we could put the text parsed off the URL with { module_url, variable} into a input text box in our search form and then search for that phrase in the titles of the web app classifieds.

An example: if we have an input text box where the user types in keywords...

<input id="CAT_txtKeywords" class="cat_textbox" type="text" name="CAT_txtKeywords" maxlength="255" />

we can add ?keywords=oven at the end of the link and change line 6 to replace the keywords input box that has name "CAT_txtKeywords" with the value "oven" like this:

<script type="text/javascript">// <![CDATA[
   jQuery(document).ready(function(){
   var theKeywords = '{ module_url,keywords}' ;
   if (theKeywords) {
      jQuery('form.webapp input[name="CAT_txtKeywords"]').val(theKeywords);
      jQuery("form.webapp").submit();
  }
 }); 
// ]]></script>