Tabbed
Products Pro
Version: v1.05 (Released August 2, 2008)
Author: QHome (qhomezone@gmail.com)
Designed for: Zen Cart v1.3.x Release
Tabs based on: DynamicDrive tabs
License: under the GPL
Support: Given via the Zen-Cart Forums
Enjoy!
Qhome
What Does This Contrib Do?
Tabbed Products Pro, or 'TPP', is the successor to my original 'Tabbed Product Lite' contrib. TPP allows you to change the look of your product info screen to use a tabbed display using DHTML & Javascript for a cleaner, more organized look. Since the "Lite" version, TPP has been completely rewritten to be more optimized, and to be implemented & customized easier.
As with the "Lite" version, the file does not alter any actual values in your store. It relies on javascript to manipulate the look of the page on your customers browser, while still keeping all of the source code intact for SEO, and w3 validation.
Tabs are created dynamically on the display page based on tags entered right in the main product description, or by global options from the admin area.
See the "How To Use" tab for details on how to use it. Over the process of creation and feedback, this has become extremely advanced in logic, and there are many different customizations that can be accomplished with this.
All files are arranged in the correct Zen Cart v1.3.x structure, with the exception of YOUR_TEMPLATE. Rename that folder to the template folder name you are using and upload the files. Overwrite any existing version 3.x files (unless you have customizations you'd like to merge)
(BACKUP YOUR EXISTING "tpl_product_info_display.php" FILE IF YOU ARE ALREADY USING A CUSTOM PRODUCT DISPLAY FOR YOUR TEMPLATE
| Files to Overwrite: | None, unless you already have a custom product display template file. If you already have modifications to your display file, you will have to merge the changes together. There are only 3 snippets of code that need to be added to your template to make it work with TPP |
| File Modifications: | Only if you need to merge your template file |
| Database Modifications: |
Run the included sql file to add the Configuration Options for TPP.
(Admin->Tools->Install SQL Patches) |
| Files to upload: |
IMPORTANT!!! In the includes/template folder, change YOUR_TEMPLATE
to the name of the template you are using. (It is not recommended that you overwrite the
files in the template_default folder) The rest of the file structure is in tact, so
you could rename the YOUR_TEMPLATE folder locally and upload the entire structure.
/includes/templates/YOUR_TEMPLATE/css/*.css
(Multiple files) |
| Modifying Existing templates: | To modify existing templates, there are only 3 minor code snippets to add. In the product info display template: 1. This tells the product page to load the TPP module file: FIND: <div class="centerColumn" id="productGeneral"> ABOVE THAT, ADD: <?php //BOF :: Tabbed Products Pro :: require(DIR_WS_MODULES . 'tabbed_products_pro.php'); //EOF :: Tabbed Products Pro :: ?> 2. This is the location on the page where the tab block is going to be. This can be moved to other locations on the page if so desired. FIND: <!--eof free ship icon --> BELOW THAT, ADD: <?php //BOF :: Tabbed Products Pro :: echo '<div id="tpptabBlock" style="display:none;">' . $tabData . '</div>'; //EOF :: Tabbed Products Pro :: ?> 3. This loads the final javascript to hide the non-tabbed blocks if they are already on tabs. So you don't end up with duplicate blocks. GOTO: Bottom of the file ADD: <?php //BOF :: Tabbed Products Pro :: echo $tabjscript; //BOF :: Tabbed Products Pro :: ?> THAT'S IT! Now your products page should be tabbed! |
Use:
The Basics. Tabs are created dynamically from the use of tags in the product description. Tabs are controlled and managed in the Admin->Configuration->TPP Config configuration menu.
YOU
MUST NOT USE A WYSIWYG EDITOR SUCH
AS FCKEDITOR OR HTMLAREA.
THE TAGS MUST BE ENTERED IN SOURCE
CODE MODE.
There are 4 types of tags:
| <!--% %--> |
Custom
Tags
These are used in the product description area for creating custom tabs with your own text on the tab. The tab text comes from the text in between the delimiters. Example: <!--%Product Description%--> The name of this tab is "Product Description". This is the text on the product description tab. <!--%Custom Information%--> This is where the next tab is created. All text from below this tag goes on the "Custom Information" tab. All text before the first tag will be above the tabs. |
||||||||||||||||
| <!--# #--> |
Zen
Tags These tags are for the "built-in" modules that Zen Cart comes with. Things like Additional Images, Customers Also Purchased, etc. You can also add 3rd party tags the same way. I've included the Cross-Sell code as an option to be enabled if you have the contrib already installed. I have created multiple Zen Tags that when placed in the description, will add additional seperate tabs based on modules such as "Additional Images", and "Customers Also Purchased", and "Cross Sell". To use them, simply add these tags to your product description:
Example: |
||||||||||||||||
| <!--@EndTabs@--> |
Stop
Tags
This tag tells the code to stop doing the tab parsing. All text after this tag will be below the tabs. |
||||||||||||||||
| <!--* *--> |
Sub Tags These tags are for telling the code to use sub_ tags to put multiple modules onto one tab. The tab you want the object on is referenced by the # in the parenthesis (for example, if you want attributes on the 4th tab, you would use <!--*sub_AttributeOptions(4)*-->). Supported tags:
EXAMPLE: <!--%Product Description%--> This is the stuff on the 1st tab. It also has Add To Cart button on it. (by itself) <!--*sub_AddToCart(1)*--> <!--%Custom Tab 2%--> This is the 2nd tab and has Add to cart & Attribute Options on it as noted by the sub tabs below. <!--*sub_AddToCart(2)*--> <!--*sub_AttributeOptions(2)*--> |
Notes:
1. First, before you make any custom changes. Try it out. Upload all the files and view your products to see if there are any errors. The default setup should work with any store. Now that you know that it works for you, you can customize some of the preferences in Step 2. If you have any errors on first install, contact me on the zen-cart forums in the official thread
2. Goto the Config and change it according to your needs. Try different combinations, and read the details of each setting. Some have extra "smart" code to keep them on the first tab no matter what because it makes better business sense.
3. If you have any of the Globals set to true, keep in mind that this means that ALL products will share these settings but ONLY if that particular product has content for that tab. For example, if you set $bGblAdditionalImages to true, only items that have additional images will actually show the additional images tab.
4. There are many combinations of tabs you can display. If you want ALL items to have the Customers Also Purchased on a tab, but only SOME items you would like the Additional images as a tab, you can set the Global Customers Also Purchased configuration to true in the config area, and add the tag for <!--#AdditionalImages#--> to the specific product descriptions.
Create Tabs for your product(s)
To create a tabbed view for your items, you simply add the proper tags to the product description area when adding or modifying a product from the admin
This: <!--%
is the opening tag is the closing tag
This: %-->
Anything in between is the title of the tab.
Example:
This is text
above the tabs.
<!--%Product Description%-->
This is the main product description.
<!--%Extra Specs%-->
This is where you can add custom stuff as you wish. You can have as many
tabs as you want.
<!--%BlahBlah%-->
This is another tab named BlahBlah
(Click for screenshot example)
So for each tag set, a new tab is created. If you want text to appear above the tabs simply put all the text before the first tab tag and it will appear above. If you want to put text below the tabs. Simply add <!--@EndTabs@--> to your Product Description area after all of your tabs. All text after that will be below the tabs.
========================================================The great thing about this contrib, is that this sets the custom tabs for products on "per product" OR "global" basis. I made the template code smart enough to tell if you have tab tags or not. If you dont want tabs on a product, then simply don't use the tags or use the IgnoreGlobals tag and it will default to normal zc view.
History
2-Aug-2008 - v1.05 (Release) - qhome
12-May-2008 - v1.04 (Release) - qhome
25-Mar-2008 - v1.03 (Release) - qhome
06-Mar-2008 - v1.02 (Release) - qhome
16-Feb-2008 - v1.01 (Release) - qhome
15-Feb-2008 - v1.0 (Release) - qhome
07-Feb-2008 - v0.6BETA - qhome
24-Jan-2008 - v0.5BETA - qhome
22-Jan-2008 - v0.3BETA - qhome
21-Jan-2008 - v0.2BETA - qhome
21-Jan-2008 - v0.1BETA - qhome