Product Hierarchy Landing Page using JQuery

[bryan]

I really would like to see a parameter added to the Products module that would define a landing page for hierarchy items to render on. I know it's been addressed in the forum numerous times and I created a feature request for it in July of this year [2009]:
http://dev.cmsmadesimple.org/feature_request/view/3640

The action=hierarchy parameter is very limited without this functionality. Until it's added, I found a way to accomplish this using jquery.

The Setup:
I created a page titled "Products" (Page Alias is 'products') which is the only page I want for products to display on. My layout template contains the following code in the left column where I want my product hierarchy categories displayed:

Code: Select all

{Products action='hierarchy' hierarchytemplate='Sidebar'}

I added the following hierarchy templates to the Products module:

Hierarchy Template: Sidebar

Code: Select all

{if isset($child_nodes) && count($child_nodes)}
<div id="product-list">
{foreach from=$child_nodes item='node'}
<h1>{if isset($node.downurl)}<a href="{$node.downurl}" title="{$node.name}">{$node.name}</a>{else}{$node.name}{/if}</h1>
{Products action='hierarchy' parent=$node.id hierarchytemplate='Sidebar-sub'}
{/foreach}
</div>
{/if}

Hierarchy Template: Sidebar-sub - (css/js flyout menu)

Code: Select all

{if isset($child_nodes) && count($child_nodes)}
<ul>
{foreach from=$child_nodes item='node'}
<li>{if isset($node.downurl)}<a href="{$node.downurl}" title="{$node.name}">{$node.name}</a>{else}{$node.name}{/if}{Products action='hierarchy' parent=$node.id hierarchytemplate='Sidebar-sub'}</li>
{/foreach}
</ul>
{/if}

Using this setup will allow users to access the product hierarchy from any page.

The Problem:
Anyone who has tried this knows that clicking on a link generated by the Product hierarchy categories will display that link's content inline, replacing the current page content. Since you cannot define a 'target' or 'hierarchypage' parameter in the products module, you're stuck with the previous page template, title, menu location, and any conditions set by page specific smarty logic.
[e.g. - Say you're on the "News" page and you click on a product category from the left column. The next page will render with the contents of that product category link, but the page title will still say "News" and the menu will indicate that you're still on the "News" page.]

The Work Around:
In the layout template, replace:

Code: Select all

{Products action='hierarchy' hierarchytemplate='Sidebar'}

with this:

Code: Select all

{if $page_alias == 'products'}
{Products action='hierarchy' hierarchytemplate='Sidebar'}
{else}
<div id="product-list-ajax"><noscript>{Products action='hierarchy' hierarchytemplate='Sidebar'}</noscript></div>
{/if}

JQuery
If you don't already have a means of organizing a javascript library on your website:
Create a new global content block titled 'scripts' and add the following:

Code: Select all

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>
<__script__ type="text/javascript">
{literal}
$(document).ready(function(){
$("#product-list-ajax").load("/products #product-list");
});
{/literal}
</__script>

NOTE:
This script assumes you're using pretty urls. If you are not, replace line 5 in the gcb:

Code: Select all

$("#product-list-ajax").load("/products #product-list");

with this:

Code: Select all

$("#product-list-ajax").load("/index.php?page=products #product-list");

Add the 'scripts' gcb to the layout template in the header where you would normally call to javascript:

Code: Select all

{global_content name='scripts'}

Your website will now load the product hierarchy categories from the "Products" page on every page that displays the "Sidebar" hierarchy template using javascript. This will ensure that the "Products" page is always used to display the product category link content. The will display the menu as it normally would if javascript is disabled. I find that the hierarchy template takes a couple of seconds to load so you may need to make some adjustments in your layout template and CSS to avoid any unwanted movement on the page as it renders.

[ghadad]

just replace $node.downur with :
{$node.downurl|regex_replace:"/hierarchytemplate=\w+/":"hierarchytemplate=Sample"}

[bryan]

just replace $node.downur with :
{$node.downurl|regex_replace:"/hierarchytemplate=\w+/":"hierarchytemplate=Sample"}

I was only able to get this to work with pretty urls turned off. It allows you to define a target hierarchy template, but it still has the same problem with displaying content inline:

The Problem:
Anyone who has tried this knows that clicking on a link generated by the Product hierarchy categories will display that link's content inline, replacing the current page content. Since you cannot define a 'target' or 'hierarchypage' parameter in the products module, you're stuck with the previous page template, title, menu location, and any conditions set by page specific smarty logic.
[e.g. - Say you're on the "News" page and you click on a product category from the left column. The next page will render with the contents of that product category link, but the page title will still say "News" and the menu will indicate that you're still on the "News" page.]

Thanks for the suggestion. It's a much simpler solution that may be good enough in certain cases.

[kendo451]

This hack also works great for having a Category List in the sidebar!