Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Dynamic Tabs Rate Topic   - - - - -

 
  • baballuci
  • Senior Member
  • Members
  • Join Date: 02-Mar 06
  • 969 posts

Posted 16 November 2006 - 07:49 PM #1

I've hacked together some dynamic product description tabs in a site which i've been designing for a friend's company, which you can name the tab titles and tab descriptions all from ADMIN section on a per product basis.

i.e. One product may have 'Description' 'Tech Spec' 'Dimensions', while another may only have 'Description' 'Tech Spec'.

It means adding fields to the existing tables to accomodate the extra data, and changes to the current tpl's.

Maybe if others are interested i'll post a how to... in a couple of weeks, but i'm not sure how to easily impliment the table changes, maybe an sql script, but i don't want to be responsible for trashing someones site.

If Sno's reading maybe he could help make it into a proper Mod.

I've included some images.

Attached Thumbnails

  • Admin.gif
  • Product2.gif
  • Product1.gif

Charlie

 
  • snorocket
  • Forum Janitor
  • Members
  • Join Date: 15-Mar 06
  • 2519 posts

Posted 16 November 2006 - 08:01 PM #2

no problem, maybe you can get your instructions together how to implement and PM me and we can turn it into a module or something, adding fields to existing tables will be easy with a few ALTER TABLE queries that you can do through the admin panel...
SNOROCKET.COM, Now Accepting PRE-ORDERS:
Customer Service (Helpdesk) Addon for CS-Cart v4.3.1
Quote and Invoicing Addon for CS-Cart v4.3.1

 
  • willow1872
  • Senior Member
  • Banned
  • Join Date: 02-Nov 06
  • 153 posts

Posted 16 November 2006 - 08:11 PM #3

Sounds great :)

 
  • jobosales
  • Senior Member
  • Members
  • Join Date: 04-Nov 06
  • 3114 posts

Posted 17 November 2006 - 12:40 AM #4

Very nice addition, babalucci. I know we could sure use this for some of our products.

Bob

 
  • nwsco
  • Senior Member
  • Members
  • Join Date: 12-Sep 06
  • 372 posts

Posted 17 November 2006 - 08:35 AM #5

Thats would be a very useful hack! Can't wait!

 
  • SWS
  • Senior Member
  • Members
  • Join Date: 30-Oct 06
  • 798 posts

Posted 18 November 2006 - 01:38 AM #6

Very very useful... just what ive been looking for !

Cant wait for your contribution
[SIZE=3][/SIZE]

 
  • MikeK
  • Senior Member
  • Members
  • Join Date: 26-Apr 06
  • 434 posts

Posted 18 November 2006 - 06:44 PM #7

By all means, please, please, please finish it out and post the code. This is exactly what I need. I was hoping something like this would have been in 1.3.4, but alas.....

Thanks,
Mike

 
  • TonyK
  • Member
  • Members
  • Join Date: 03-Mar 06
  • 1686 posts

Posted 20 November 2006 - 09:23 PM #8

Anyone looking to jazz up their tabs may want to view the source here....nice tab designs.

http://exploding-boy...enus/menus.html
Pimpin' skins since v1.0

 
  • terje
  • Member
  • Members
  • Join Date: 04-Nov 05
  • 58 posts

Posted 21 November 2006 - 05:21 AM #9

You may put "send to a friend" on a tab as well?
CS-Cart 1.3.4

 
  • nzervos
  • Junior Member
  • Banned
  • Join Date: 18-Dec 06
  • 1 posts

Posted 18 December 2006 - 12:49 PM #10

Hey, that is very useful. Could you by any chance post the code or send it to me. I would be grateful!

 
  • Brandito
  • Member
  • Members
  • Join Date: 17-Dec 06
  • 82 posts

Posted 18 December 2006 - 10:53 PM #11

Wow, that's awesome. Just exactly what I've been needing. Let me know when you make it into a mod, or if you have the code availible could you PM it to me?

Thanks.

 
  • Grennix
  • Junior Member
  • Members
  • Join Date: 02-Nov 06
  • 5 posts

Posted 12 January 2007 - 12:45 PM #12

A very useful hack, just what I need. Will this mod be availible soon, or if possible PM the code to me.

Thanks,
Peter

 
  • baballuci
  • Senior Member
  • Members
  • Join Date: 02-Mar 06
  • 969 posts

Posted 03 February 2007 - 03:25 AM #13

It works on 1.3.4 i've not tried on 1.3.3

I'd suggest you make backup of database and any modified files first.

1. In /customer/products_pages/product_details.tpl

Comment out lines 189-191:
<hr>
<p></p>
{$product.full_description|default:$product.short_description}
2. Below it copy and paste the following:
{* Start Product Tabs Menu *}

<link rel="stylesheet" type="text/css" href="{$skin_dir}/tabcontent.css" />
<script type="text/javascript" language="javascript 1.2" src="{$skin_dir}/tabcontent.js"></script>

<br />
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Description</a></li>
{if $product.tab2_avail == 'Y'}
<li><a href="#" rel="tcontent2">{$product.tab2title}</a></li>
{/if}
{if $product.tab3_avail == 'Y'}
<li><a href="#" rel="tcontent3">{$product.tab3title}</a></li>
{/if}
{if $product.tab4_avail == 'Y'}
<li><a href="#" rel="tcontent4">{$product.tab4title}</a></li>
{/if}
{if $product.tab5_avail == 'Y'}
<li><a href="#" rel="tcontent5">{$product.tab5title}</a></li>
{/if}
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
{$product.full_description|default:$product.short_description}
</div>

<div id="tcontent2" class="tabcontent">
{$product.tab2}
</div>

<div id="tcontent3" class="tabcontent">
{$product.tab3}
</div>

<div id="tcontent4" class="tabcontent">
{$product.tab4}
</div>

<div id="tcontent5" class="tabcontent">
{$product.tab5}
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>

{* End Product Tabs Menu *}
3. In /admin/products_pages/products_update.tpl:

At line 206 copy and paste the following,
{******* START PRODUCT TABS SECTION *******}
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tab2}:</td>
	<td> </td>
	<td>
		<input type="hidden" name="product_data[tab2_avail]" value="N" />
		<input type="checkbox" name="product_data[tab2_avail]" value="Y" {if $product_data.tab2_avail == 'Y' || $mode == "add"}checked="checked"{/if} /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
	<td > </td>
	<td>
		<input type="text" name="product_description[tab2title]" size="55" value="{$product_data.tab2title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
	<td> </td>
	<td>
		<textarea id="product_tab2" name="product_description[tab2]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab2|escape:html}</textarea><br />
		{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab2');" but_style="text"}
	</td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tab3}:</td>
	<td> </td>
	<td>
		<input type="hidden" name="product_data[tab3_avail]" value="N" />
		<input type="checkbox" name="product_data[tab3_avail]" value="Y" {if $product_data.tab3_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
	<td > </td>
	<td>
		<input type="text" name="product_description[tab3title]" size="55" value="{$product_data.tab3title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
	<td> </td>
	<td>
		<textarea id="product_tab3" name="product_description[tab3]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab3|escape:html}</textarea><br />
		{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab3');" but_style="text"}
	</td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tab4}:</td>
	<td> </td>
	<td>
		<input type="hidden" name="product_data[tab4_avail]" value="N" />
		<input type="checkbox" name="product_data[tab4_avail]" value="Y" {if $product_data.tab4_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
	<td > </td>
	<td>
		<input type="text" name="product_description[tab4title]" size="55" value="{$product_data.tab4title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
	<td> </td>
	<td>
		<textarea id="product_tab4" name="product_description[tab4]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab4|escape:html}</textarea><br />
		{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab4');" but_style="text"}
	</td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tab5}:</td>
	<td> </td>
	<td>
		<input type="hidden" name="product_data[tab5_avail]" value="N" />
		<input type="checkbox" name="product_data[tab5_avail]" value="Y" {if $product_data.tab5_avail == 'Y'}checked="checked"{/if} /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.tabtitle}:</td>
	<td > </td>
	<td>
		<input type="text" name="product_description[tab5title]" size="55" value="{$product_data.tab5title|escape:html}" class="input-text" style="width: 85%" /></td>
</tr>
<tr>
	<td class="field-name" nowrap="nowrap">{$lang.full_description}:</td>
	<td> </td>
	<td>
		<textarea id="product_tab5" name="product_description[tab5]" cols="55" rows="10" class="input-text" style="width: 85%">{$product_data.tab5|escape:html}</textarea><br />
		{include file="buttons/button.tpl" but_text=$lang.edit_in_visual_editor but_onclick="javascript: fn_open_editor('product_tab5');" but_style="text"}
	</td>
</tr>

{******* END PRODUCT TABS SECTION *******}
4. Copy the two files tabcontent.css and tabcontent.js to /customer/

5. Copy the two files shade.gif and shadeactive.gif to /customer/images/

6. New Language Variables:

tabtitle = Tab Title
tab2 = Tab 2 Available
tab3 = Tab 3 Available
tab4 = Tab 4 Available
tab5 = Tab 5 Available


7. Table Field Additions: I used PHPMYADMIN but i'm sure it's not hard to write a mysql script to add the fields.
         Field        Type          Collation             Null            Default
    
  In Table products:
  
    tab2_avail    char(1)     latin1_swedish_ci       No                N
    tab3_avail    char(1)     latin1_swedish_ci       No                N
    tab4_avail    char(1)     latin1_swedish_ci       No                N
    tab5_avail    char(1)     latin1_swedish_ci       No                N
    
  In Table Product_descriptions:
  
    tab2          text            latin1_swedish_ci       No
    tab2title     varchar(25) latin1_swedish_ci       No
    tab3          text            latin1_swedish_ci       No
    tab3title     varchar(25) latin1_swedish_ci       No
    tab4          text            latin1_swedish_ci       No
    tab4title     varchar(25) latin1_swedish_ci       No
    tab5          text            latin1_swedish_ci       No
    tab5title     varchar(25) latin1_swedish_ci       No

The FIRST TAB is always 'Default Full Product Description'.

Now when you edit or add an existing products in admin you will find there are another 4 spaces to put the tab descriptions. You can switch each tab on/off and give each tab an individual title.
If you want to change the tab colours then change the gif's but try to keep the same filenames, otherwise you'll have to edit the tabcontent.css file.

I've included these instructions in the attached file "product tabs.zip" which also include all the neccessary files you need.

If anyone can improve on this then please do.

Attached Files


Charlie

 
  • MikeK
  • Senior Member
  • Members
  • Join Date: 26-Apr 06
  • 434 posts

Posted 03 February 2007 - 03:50 AM #14

Looks to be pretty much exactly what I need. I put in a quote request to CS-C to develop pretty much the exact thing you've come up with here and they came back with a price that was a bit higher than what I can handle right now. My biggest concern is incompatibility with future versions of CS-C. It might not be a bad idea to run this code by them and see if they would be willing to fold it into the program. I'd be willing to put up some cash if they would be willing to make it a permanent part of the product.

Would you mind if I talked to them about this?

Thanks,
Mike

 
  • baballuci
  • Senior Member
  • Members
  • Join Date: 02-Mar 06
  • 969 posts

Posted 03 February 2007 - 12:01 PM #15

No i wouldn't mind. It could benefit alot of other cs-cart users.

They would probably do it alot better than me anyway, lol.
Charlie

 
  • MikeK
  • Senior Member
  • Members
  • Join Date: 26-Apr 06
  • 434 posts

Posted 06 February 2007 - 04:58 PM #16

I sent the code from Baballuci into CS-C and asked them how much it would cost to create a mod that will become a permanent part of CS-C and this is what they came back with:

We have investigated this code http://forum.cs-cart...44&postcount=13.
And in this case we can offer you the following.


1. We will add a new "Tabs to product details page" module. We will add the "Manage tabs" link in the "CMS" sidebox in the back-end if the "Tabs to product details page" module is active.
2. The "Manage tabs" page will have the following functionalities:
- Add new custom tab button
- Delete custom tab button
- Update name of each custom tab button
You will not be able to change the tab background image and border color via the back-end. But we can provide you with instructions so you could perform it by yourself.
3. Also admin will be able to define the following on the tab details page.
- Update tab name
- Edit tab content
4. If the "Tabs to product details page" module is active then product details page will have tabs in the storefront e.g. http://www.megapcs4u...&product_id=899
5. If administrator adds new tab via back-end then it will be automatically displayed on all product details pages in the back-end.

The modification of such complexity will cost $150


A more than fair price, (as usual). Since I really need this mod, I don't have a problem paying for it, however, my budget's tight and I know it will be a useful addition to lots of users. Any chance I can get a couple of you folks to kick in $50 apiece for this?

Thanks,
Mike

 
  • snorocket
  • Forum Janitor
  • Members
  • Join Date: 15-Mar 06
  • 2519 posts

Posted 06 February 2007 - 07:56 PM #17

If CS does this mod then the tabs need to be product specific meaning that I need Tab#1 to show for Product#1 only and Tab#2 to show only on Product#2. This can be done similar to global product options in which we can create the tabs in the tabs manager and then in product details we can add by association each tab with each product ect...

Example I may want Tab#1 to show only on Product 1 and Tab#2 to show only on products2, 3, 4 and Tab#3 to show only on product 5

I'll pitch in as I don't have time anymore to do this myself, it would be nice to have this instead of having to hardcode it everytime. It would be nice if others would step up to the plate and offer to pitch in so we could get the price per person well below $50/ea., who else is in?
SNOROCKET.COM, Now Accepting PRE-ORDERS:
Customer Service (Helpdesk) Addon for CS-Cart v4.3.1
Quote and Invoicing Addon for CS-Cart v4.3.1

 
  • sholand
  • Senior Member
  • Members
  • Join Date: 16-Jan 07
  • 142 posts

Posted 06 February 2007 - 08:04 PM #18

I am willing to throw money in for this mod as well.

 
  • snorocket
  • Forum Janitor
  • Members
  • Join Date: 15-Mar 06
  • 2519 posts

Posted 06 February 2007 - 08:27 PM #19

4 of us so far, price is down to $37.50, who else is in?
SNOROCKET.COM, Now Accepting PRE-ORDERS:
Customer Service (Helpdesk) Addon for CS-Cart v4.3.1
Quote and Invoicing Addon for CS-Cart v4.3.1

 
  • zardos
  • Senior Member
  • Members
  • Join Date: 08-Feb 06
  • 1062 posts

Posted 06 February 2007 - 08:30 PM #20

Yes i would also put some money in the pot for this mod.