Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email

Magento Forum

Using javascript in a CMS static block to visually select attributes
All About Doors and Windows
Total Posts:  51
Joined:  2008-10-13
Kansas City, MO USA

I thought I would post this here because it may help some people. We have a product catalog that requires a lot of visually based attributes. I played around with color chip ideas. But we had other things for our locks that needed to be shown visibly. Each one of our locks are mix and match when it comes to handles, backplates and finish. But since not all the attributes needed this functionality, I didn’t go through the trouble of creating an extension. And I think that there would be a problem with laying out the images in an extension because the layout would change with the amount of attributes.

One way to think of this is a product creation wizard.

I created the table manually and yes I used tables because it was just simpler in this case. Then I just used find and replace on the html to replace all the new lines and quotes so that I could [removed] the html with javascript. And I just used the layered navigation to discover the correct links.

The resulting page is here:

Here is some of the code (with some removed to fit the post) and the whole file is attached:

<script language="javascript">
//Get url of current page
var strHref [removed].href;
//Check if there are queries in the url
if ( strHref.indexOf("?") > -){
var strQueryString strHref.substr(strHref.indexOf("?")).toLowerCase();
//Add & so that I can attach new queries to the end (i.e. attribute values)
var strAttCon strQueryString "&";
//If there is no query, make strAttCon a ? so that I can attach new attribute values to the end.
var strAttCon "?";
strQueryString "";
//Passing attribute values to another category
//This only adds the current query string to the end of the url because these are categories
[removed]("<div style=\" padding-top:10pxmargin-left:10pxfloat:left;\"><h3 style=\"color:#869E4D; font-size:16pt;\"><b>Choose by Handle</b></h3><table border=\"0\" cellspacing=\"5\" cellpadding=\"5\">  <tr>    <td><div align=\"center\"><a href=\"" + strQueryString + "\"><img src=\"/skin/frontend/default/multipointlocks/images/M112 Handle.jpg\" width=\"255\" height=\"72\" /><br /><strong>Munchen - Standard</strong></a></div></td>    </tr>");

//Invisible when already selected
//Checks for occurrence of "color" in url and if not, prints.
("<div style=\" padding-top:10pxmargin-left:10pxfloat:right;\"><h3 style=\"color:#869E4D; font-size:16pt;\"><b>Choose by Finish</b></h3><table border=\"0\" cellspacing=\"5\" cellpadding=\"5\">  <tr>    <td><a href=\"" + strAttCon + "color=2\"><img src=\"/skin/frontend/default/multipointlocks/images/HTL_F71.jpg\"/><br />      </a>      <div align=\"center\"><a href=\"" + strAttCon + "color=2\"><strong>Resista Brass</strong></a></div></td>  </tr>");
//Invisible when already selected
//Checks for occurrence of "backplate" in url and if not, prints.
("<div style=\" padding-top:30pxmargin-left:10pxfloat:left;\"><h3 style=\"color:#869E4D; font-size:16pt;\"><b>Choose by BackPlate</b></h3><table border=\"0\" cellspacing=\"5\" cellpadding=\"5\">  <tr>    <td><div align=\"center\"><a href=\"" + strAttCon + "hoppe_backplate_style=186\"><img src=\"/skin/frontend/default/multipointlocks/images/Backplate 374.jpg\" width=\"50\" height=\"255\" /><br />        <strong>M374N</strong></a></div></td>");
File Attachments
Hoppe-Hinged-Door-Block-Newest.html  (File Size: 8KB - Downloads: 99)
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top