Smilehouse Workspace HOWTO Articles

Howto add a view/hide button to productlist

Sometimes it is necessary to view only few details about the products on the product list e.g. to be able to present more products on a single page. Usually this is done by showing simple details on a product list and make a link from product name and picture to a product page with additional information. However you can also create a special button that views/hides additional product information directly on the product list and this howto article explains how.

Modifying the Product List WAE

Open the Product page at:
Visual -> WWW-outlook -> Page construction -> Product List

And click Product List WAE on the left.

Place this code to Product HTML:

<div style="border: 1px solid grey; padding: 4px;">
$product_itemcode$ - $product_name$ - $product_price$
<a href="javascript:show('$product_itemcode$');"><b>View details</b></a><br>
<div id="$product_itemcode$_visible"></div>

This generates the basic outlook for the product list before the View details link is clicked by user.

<div id="$product_itemcode$_hidden" style="display:none">

This code generates the outlook of the product info that is viewed when the View details is pressed by user.
You can alter the HTML-code inside the div-tag any way you like.

Notice: When the user clicks the View details link again the script hides the details, so you might want to rename the link to Show/Hide or similar.

Finally put this code to End HTML:

<script type="text/javascript">
function show(itemCode){
var elem = document.getElementById(itemCode+"_hidden");
var targElem = document.getElementById(itemCode+"_visible");
targElem.innerHTML = elem.innerHTML;
targElem.innerHTML = "";

This code handles the viewing and hiding of contents.
Technically what it does it that it swaps the contents of div-tags when the view/hide link is pressed.

Leave Grouping HTML empty and Grouping Interval to 1.


At the settings tab of the Product List WAE you might want to add Product names and Product pictures as links to product pages.

Testing the script

You should see a result something like this:

By pressing the View details link you can view / hide product picture.
Naturally you could put anything you like into the details like links, more info, pictures, video material, additional prices or any other product information you have stored into your product database.

<< Back to HOWTO index