How you can add jQuery tabs in Magento CMS page

We would like to highlight some moments as to adding jQuery tabs in Magento CMS pages. You can use jQuery tabs if you want to do it and you can find some examples and source code here: http://jqueryui.com/tabs/

Let’s investigate a step-by-step instruction:


At the beginning you should create a CMS page (CMS -> Pages -> Add New Page). Name the CMS page title as ‘Testing’.
We have set the ‘Layout’ to ’1 column’ under ‘Design’ tab. But it is up to you.
You should write the following sample code under ‘Content’ tab:

Код:

<div style="float: right; width: 200px;">

<p>{{block type="tag/popular" template="tag/popular.phtml"}}</p>

</div>

<div id="tabs" style="width: 680px;">

<ul>

<li><a href="#tabs-1">Nunc tincidunt</a></li>

<li><a href="#tabs-2">Proin dolor</a></li>

<li><a href="#tabs-3">Aenean lacinia</a></li>

</ul>

<div id="tabs-1">

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p>

</div>

<div id="tabs-2">

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>

</div>

<div id="tabs-3">

<p>Mauris eleifend est et turpis. Duis id erat.</p>

<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p>

</div>

</div>

Please, save the page;

In order to include the jQuery CSS and JS files you should add the following code in app/design/frontend/your_package/your_theme/template/page/html/head.phtml. IF condition can be used to include the jQuery CSS and JS page only on this particular CMS page only:

Код:

<?php

$headBlock = $this->getLayout()->getBlock('head');

if ($headBlock->getModuleName() == 'Mage_Page' && $headBlock->getTitle() =='Testing'): // remember from above step # 1 that the page title is set as 'Testing'

?>

<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript">

jQuery(function() {

jQuery( "#tabs" ).tabs();

});

</script>

<?php endif; ?>

Congratulations! You have created a new CMS page and you can view tabs on it. We have set the URL key for our new page as ‘testing’, then our new page URL will be http://ourdomain.com/testing or it will be http://127.0.0.1/ourMagentoFolder/testing on a local machine. You can check the tabs there.

Also, we can recommend you to use some third party extensions, which work also on CMS pages such as GoMage Advanced Navigation extension. It helps to output the products and the navigation on the static pages. Also, you can add an infinite scroll using GoMage Advanced Navigation extension.

It will help you to save your customers’ time when they search for a necessary product.

Also, you can apply the process of adding a product to cart on the CMS pages by using GoMage ProCart extension. If you output the products and navigation using Advanced Navigation extension, you can provide customers with the opportunity to add a product to cart directly from CMS pages. It is a wonderful feature taking into account that GoMage ProCart extension uses Ajax technology which doesn’t need the page re-loading.


“The code has been taken from the site http://blog.chapagain.com.np “

 

it's great .While Hardcodes is not recommend.