Product Hierarchy Landing Page using JQuery
Posted: Tue Dec 22, 2009 5:31 pm
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:
I added the following hierarchy templates to the Products module:
Hierarchy Template: Sidebar
Hierarchy Template: Sidebar-sub - (css/js flyout menu)
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:
with this:
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:
NOTE:
This script assumes you're using pretty urls. If you are not, replace line 5 in the gcb:
with this:
Add the 'scripts' gcb to the layout template in the header where you would normally call to javascript:
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.
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'}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}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}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'}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}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>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");Code: Select all
$("#product-list-ajax").load("/index.php?page=products #product-list");Code: Select all
{global_content name='scripts'}