Prototype Tutorial – Auto FAQs with Prototype JS

 

Here at HotWax Media, we build a lot of enterprise eCommerce websites. One common element in most eCommerce websites is a place to list Facts and Questions about the site, its products and its policies (FAQs). I don’t know about you, but I hate coding FAQ pages. The redundant process of having to write out the summary table at the top with the list of questions, and then re-write those same questions all over again below with the answers to the questions just drives me nuts. Not to mention that this redundant writing and re-writing of code almost always gets messed up a few months down the road when your very well meaning client attempts to add some new questions and answers to the list and unintentionally breaks the Table of Contents by not adding the proper ID/anchor relationship to each link.

Time to stop the insanity.
Today I am going to show you how a quick Prototype JS script can automatically generate your FAQ summary links for you by parsing the DOM for the appropriate links. Let’s get started.

First off, we need our list of questions, in standard Definition List format:

What is this?
This is standard definition list markup
What is the purpose of this example?
To show you how easy it is to generate your FAQ link summary with a little bit of javascript
Who should I contact for all of my enterprise eCommerce needs?
HotWax Media, of course.

In the above list, each question lives inside an anchor tag with a class name of “question”. There is also an unordered list above the questions with an ID of “questions”. This is important for the next step. Now, as they say on MTV Cribs, “This is where the magic happens”.

document.observe('dom:loaded', function(){
    $$('a.question').each(function(ele){
        var id = ele.innerHTML.unescapeHTML().gsub(/[^w- ]/, '').gsub(/[s-]+/, '-').toLowerCase();
        ele.writeAttribute({id: id});
        var link = new Element('a', {href: '#'+id})
            .update(ele.innerHTML)
            .observe('click', function(event){
                event.stop();
                Effect.ScrollTo(ele);
            });
        $('questions').insert(new Element('li').insert(link));
    });
});

Let’s break down the code above. First, using the $$ shortcut method in Prototype, we loop through each “question”, read the innerHTML of the tag, strip out the whitespace between each word, and replace the spaces with dashes. This string for each link is given a variable name of “id”.

Then we assign this variable back to the link and write it in to the link as an ID attribute.

Next, we create a new link element for each “question”, giving each href the “id” variable, prepended by a # sign.

Finally, we go to our unordered list and create a list item for each new link, and then insert that link inside of it.

Now, when the page is rendered, our questions markup will look like this:

What is this?
This is standard definition list markup
What is the purpose of this example?
To show you how easy it is to generate your FAQ link summary with a little bit of javascript
Who should I contact for all of my OFBiz needs?
HotWax Media, of course.

Now, we just add a little CSS to style our FAQs, and we are all done.

/***********************************************
FAQs
***********************************************/
#questions {margin:0}
#questions li {padding:0 0 5px;}
#questions li a {color:#333}
#questions li a:hover {color:#000}

#faqs dt {margin:30px 0 0;}
#faqs dt a {color:#333; font-size:15px}
#faqs dd {border-bottom:1px solid #ddd; margin:0; padding:0 30px 30px 0; position:relative;}
#faqs dd span {position:absolute; bottom:0; right:0; color:#ccc;}
#faqs dd span a {font-weight:normal; font-size:11px;}

That’s it folks. Combine this with the Scriptaculous Effect.ScrollTo function to eliminate the jerky page jump and you a have beautiful, seamless user experience that anyone can appreciate.

– Ryan

Ryan Foster is a designer and OFBiz developer for HotWax Media.

Ryan Foster - OfBiz Developer


DATE: Jun 25, 2010
AUTHOR: HotWax Systems
Enterprise eCommerce, OFBiz Development, Auto FAQ, FAQ, OFBiz, OFBiz Developer, Prototype, JS