Tabs

To install, especially if you are new to Magento, kindly follow the JoomlArt Magento extension user guide to install the Magento extension Tabs.

Provided that Tabs module is installed properly, you can follow these steps to configure this Magento extension for your eCommerce website.

1. Log in to your Admin Panel on the stage localhost: //localhost/magento/index.php/admin/.

2. Navigate to JoomlArt >> Tabs .

3. Configure default parameters as per screenshort below:

• Enabled: choose to publish/unpublish module parameter.
• Title: input the title of project list.
• Style: choose style for each template.
• Height: define the height of tab. Set 0 for Auto.
• Width: define the width of tab. Set 0 for Auto.
• Position: select the position of the tabs.
• Skip Animation: select whether to have the animation effect.
• Animation: choose type of animations.
• Event: define event happenning when Click/ Mouseover on the tabs.
• Duration: determine the animation duration in millisecond.

To push the module onto front page, go to CMS >> Manage page, select page that you want to display this module e.g. Homepage.

1. You must create static block first

Navigate to CMS >> Static Blocks to add content of static block:



Fill in Content parameter with content of the static block as followings.

<div>{{block type="joomlart_jmproducts/list" name="Desserts" title="Desserts" catsid="4"}}</div>

other blocks have the same configure with the block above

2. Add block as a tab of Tabs extension

Navigate to CMS/ Manage Page/ Home.



Fill in Layout Update XML parameter with syntax below:

       <reference name="mass-top">

              <block type="joomlart_jmtabs/core" name="jmtabs">

                <action method="addTabs_staticblock">

                  <title>Desserts</title>

                  <identifier>position-05</identifier>

                </action>               

                <action method="addTabs_staticblock">

                  <title>Pizza-pasta</title>

                  <identifier>position-06</identifier>

                </action>

                <action method="addTabs_staticblock">

                  <title>Seafood</title>

                  <identifier>position-07</identifier>

                </action>

              </block>

            </reference>  

Now see how it works on front-page with default style and top position: