Using Tab Products Pro... on an EZpage?

**Feznizzle** · 18 Jun 2015, 03:18 PM

Hi Guys,

I know, I know... TPP is designed to be used on Product Pages.

But TPP beautiful and simple, and I'd like to use it elsewhere. Particularly on pages that may contain lots of information, but that I want to keep organized and uncluttered. For instance, some of my category descriptions contain general information as well as charts to help visitors find the right product; some of my EZpages contain gobs of info too and I'd rather not use the chapter system to make my clients have to follow link.

I know for a fact that TPP can be called on EZpages, etc, because I have done it before, two years ago. Here is the conclusion of the conversation where I figured out how to do that:
https://www.zen-cart.com/showthread....63#post1217363

Unfortunately, that bit of code no longer works!

Yesterday I installed the latest TPP into a zc154 and got it working perfectly:
http://justmedicalequipment(DOT)com/...&products_id=1

But when I pasted that code into my EZpage source, no dice! Here it is:
http://justmedicalequipment(DOT)com/...page=page&id=4

Can somebody help me figure out what I'm doing wrong? I'd happily buy a cup of coffee for anyone that can post some source code up here that can be used as a model to get TPP working on an EZpage!! Just PM me your email.

When I went thru the TPP support forum yesterday, I counted 8 people requesting this same thing. So this solution may help a lot of people over time.

Thanks,
Fez

**Feznizzle** · 18 Jun 2015, 03:21 PM

For ease of reference, here is the source code I created that USED TO work (2 years ago, anyway!):

HTML Code:

<div id="slidetabsmenu" style="display: block;">
  <ul>
    <li> <a class="current" onclick="expandcontent('sc1', this)" href="javascript:void(0)"><span>Dis Da Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc2', this)" href="javascript:void(0)"><span>Dis Da Uda Tab</span></a> </li>
    <li> <a class="" onclick="expandcontent('sc3', this)" href="javascript:void(0)"><span>Dis Dat and Da Uda</span></a> </li>
  </ul>
</div>
<br style="clear: both;">
<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1" style="display: block;">
  <p> Mikey puts some html in here!!!!</p>
</div>
<!--end sc1-->

<div class="tabcontent" id="sc2" style="display: none;">
  <p> Put some more content here, bro!</p>
</div><!--end sc2-->
<div class="tabcontent" id="sc3" style="display: none;">
  <p> Mikey puts some awesomeness right here!!!!</p>

</div>
<!--end sc3-->

The following 3 variables have changed:

Using the latest ZC
Using the latest TPP
Using a different template

**DrByte** · 18 Jun 2015, 03:46 PM

Two things:

1. The code you posted above is missing the closing </div>. But it looks like the HTML on your site is fine, so it was just a copy+paste error.

2. The TPP code is functioning fine on the products page because of the presence of this file:
/includes/modules/pages/product_info/jscript_tpp.js

But, since EZ-Pages run from a different folder, you'll need to copy that jscript_tpp.js file into the /includes/modules/pages/page/ folder as well.

EDIT:
3. Oh, and the CSS too. In your template css folder, copy product_info.css to page.css (or page4.css if you want it just for that ez-page)

For optimization, you could experiment with making the .js and .css files global ... ie: put the jscript_tpp.js file into your template's jscript folder so it runs on every page (and remove it from the other /modules/pages folders), and put the relevant css content into your main stylesheet.css. This way there's less duplication to maintain, and fewer requests required to draw the page.

**Feznizzle** · 18 Jun 2015, 06:13 PM

Awesome as always, thanks DrB!!!

For anybody else who wants to use TPP on EZpages, Category pages, etc... it can be done!

NOTE: You have to have a modest understanding of html in order to do this.

Ok, so here is how you can do can make TPP universally available on any page you create (this assumes you already have TPP correctly installed on your site):

Backup your site files!
To make the TPP jscript universally available, find the js file (/includes/modules/pages/product_info/jscript_tpp.js) and drop a copy into your template js folder (/includes/templates/YOUR_TEMPLATE/jscript/).
To make the TPP css universally available, find the css file (/includes/templates/YOUR_TEMPLATE/css/product_info.css) and copy/paste (move) the content of that file (actually, just the "@import ('tpp/alt_xxxx.css')" line) into the top of your site's main css file (/includes/templates/YOUR_TEMPLATE/css/stylesheet.css).
Now you can go remove the unneeded js files:

/includes/modules/pages/document_general_info/jscript_tpp.js
/includes/modules/pages/document_product_info/jscript_tpp.js
/includes/modules/pages/product_free_shipping_info/jscript_tpp.js
/includes/modules/pages/product_info/jscript_tpp.js
/includes/modules/pages/product_music_info/jscript_tpp.js

Now that you have the js and css is available, you can use tabs anywhere using some simple html. I'd suggest creating an EZpage to experiment with. Once you've created a page, here is a basic html frame you can fiddle around with to figure out how it works:

HTML Code:

<div id="slidetabsmenu" style="display: block;">
<ul>
    <li><a class="current" href="javascript:void(0)" onclick="expandcontent('sc1', this)"><span>Dis Da Tab</span></a></li>
    <li><a href="javascript:void(0)" onclick="expandcontent('sc2', this)"><span>Dis Da Uda Tab</span></a></li>
    <li><a href="javascript:void(0)" onclick="expandcontent('sc3', this)"><span>Dis Dat and Da Uda</span></a></li>
</ul>
</div>

<p>&nbsp;</p>

<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1" style="display: block;">
<p>Put some html in here!!!!</p>
</div>
<!--end sc1-->

<div class="tabcontent" id="sc2" style="display: none;">
<p>Put some more content here, bro!</p>
</div>
<!--end sc2-->

<div class="tabcontent" id="sc3" style="display: none;">
<p>Now put some more awesomeness right here!!!!</p>
</div>
<!--end sc3-->

</div>

Hope this helps somebody!

**DivaVocals** · 21 Jun 2015, 01:52 AM

Before you give some unsuspecting community member to get the impression that how TPP bundles the CSS and JS files in the module is WRONG... I would like to bring your attention to the following:

As of v1.09a:

~ Slight change so that the javascript and CSS files only load on the product information pages
~ Add CSS3 stylesheet in the /includes/templates/YOUR_TEMPLATE/css/tpp/*.css folder
~ Improved fix for the issue with the "duplicate" review buttons (incorrectly displayed two "Write Reviews" buttons)

You posted:

Originally Posted by Feznizzle

A

To make the TPP css universally available, find the css file (/includes/templates/YOUR_TEMPLATE/css/product_info.css) and copy/paste (move) the content of that file (actually, just the "@import ('tpp/alt_xxxx.css')" line) into the top of your site's main css file (/includes/templates/YOUR_TEMPLATE/css/stylesheet.css).
Now you can go remove the unneeded js files:

/includes/modules/pages/document_general_info/jscript_tpp.js
/includes/modules/pages/document_product_info/jscript_tpp.js
/includes/modules/pages/product_free_shipping_info/jscript_tpp.js
/includes/modules/pages/product_info/jscript_tpp.js
/includes/modules/pages/product_music_info/jscript_tpp.js

You do realize that current module configuration (putting the CSS and JS files in their current locations in TPP) was done INTENTIONALLY as of the 1.09a TPP update so that the TPP JS/CSS DOES NOT load on absolutely EVERY SINGLE Zen Cart page??????????????????

You rolling this back to the way it USED to be and then suggesting that these files are somehow "un-needed" does not take into account that they now load on pages where you DO NOT need to run them.. (ya know pages like say the contact us page, the privacy page, shopping cart, product listing pages.. etc.. etc.. etc..)

Just wanted to bring that to your attention.. If you want these same TPP tabs on other pages, then add the TPP JS/CSS file EXACTLY where they need it to run.. (as opposed to just running it universally on every page..)

Nothing "wrong" with your suggestion, but it's not what I would do.. I would follow DrByte's first suggestion

Originally Posted by DrByte

2. The TPP code is functioning fine on the products page because of the presence of this file:
/includes/modules/pages/product_info/jscript_tpp.js

But, since EZ-Pages run from a different folder, you'll need to copy that jscript_tpp.js file into the /includes/modules/pages/page/ folder as well.

EDIT:
3. Oh, and the CSS too. In your template css folder, copy product_info.css to page.css (or page4.css if you want it just for that ez-page

**DrByte** · 22 Jun 2015, 08:54 PM

Neither way is specifically wrong.

There are 2 camps: one that says you should be explicit about each page, and another that says "since all the site-wide stuff is cached anyway, it's actually faster to have it load on all pages".

So, let's not get into a fight about which way is right or wrong. Each has its merits. Finding the "best" way for you and your customers is up to you to explore and test in multiple variations.