X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)
-   -   DIY Tabbed Content Menu for Product Page (https://forum.x-cart.com/showthread.php?t=11094)

markwhoo 01-09-2005 08:50 AM

Quote:

Originally Posted by bluecat
Worked like a charm, thank you very much. :)


Glad to hear it.

Now if only I can get my "More Info" or "product enquiry" to work in these tabs.

I know it can be done. I see it everywhere. For some reason it runs through the script on me and seems as though an email has been sent when clicking on the tab. AAARRRR!

No One out there have any ideas? Or is this a huge secret? lol

bluecat 01-09-2005 10:42 AM

Wish I could help on that. I just double checked on mine, and it works fine. :?

markwhoo 01-09-2005 11:12 AM

Quote:

Originally Posted by bluecat
Wish I could help on that. I just double checked on mine, and it works fine. :?


Were you referring to your addition of the details in tabs, or do you have a more info type email submission within the tabs that is working?

bluecat 01-09-2005 05:56 PM

I gotcha, I read it wrong. I don't have mine set up for that. :(

mffowler 01-29-2005 02:49 PM

I am trying to modify the tab mod to access the complete product.tpl , as the default/first tab. I have integrated the tab mod into a unique dialog.tpl called from the product.tpl and have the {title} as the first tab, but the problem is:
  • 1. I am trying to call the product.tpl from the product.tpl, where the unique dialog.tpl is in order to have the default product details (without having to click to see it)
    2. Whenever I attempt to call the inserted prioduct details, my products won't load/reload.

Ideas? Has anyone successfully worked this or something very similar and could share the code?

Thanks,

- Mike

mpj 02-04-2005 12:03 PM

this works very well.

thanks!

mpj 02-04-2005 03:32 PM

I had some problems for the images if then statement on X-Cart 4.0.11

Here is what I did to fix it

Code:

{if $images eq ""}
{else}[*]<FONT SIZE="1">Detailed Images</FONT
{/if}



HTH

Bella Forma 02-28-2005 06:14 PM

Thanks for this really great mod and free too!!!!

Regarding the if statements to only show the tabs when they have content I amended Phils code in the product.tpl to this:

Code:

<ul id="tablist">
{if $product_links ne ""}[*]Related
{/if}
{if $images ne ""}[*]Detailed Images
{/if}[*]Send to Friend
{if $active_modules.Customer_Reviews ne ""}
  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"}[*]Reviews
  {/if}
{/if}
{if $recommends}[*]Recommended
{/if}[/list]


and it works well. The only exception is if you are allowing review but there aren't any yet, it will then show the tab but with no content.

To fix that I changed the skin1/modules/Customer_Reviews/reviews.tpl to move the first /if statement down a bit and added an else to say 'there are no reviews yet'. Just going to paste the whole reviews.tpl file again as I can't work out how to bold within code blocks.

Code:

<FORM method="POST" action="product.php?mode=review&productid={$product.productid}">
<TR><TD colspan="2">
<FONT class="ProductDetailsTitle">{$lng.lbl_customer_reviews}</FONT>
</TD></TR>
<TR><TD class="Line" height="1" colspan="2">[img]{$ImagesDir}/spacer.gif[/img]</TD></TR>
{if $reviews ne ""}
{section name=r_i loop=$reviews}
<TR>
<TD colspan="2">
{$lng.lbl_author}: {$reviews[r_i].email|default:$lng.lbl_unknown}
{$reviews[r_i].message|replace:"\n":"
"}

</TD></TR>
{/section}
{else}
<TR><TD colspan="2">
There are no reviews for this product yet.</TD></TR>
{/if}
{if ($config.Modules.writing_reviews eq "A") or ($login ne "" and $config.Modules.writing_reviews eq "R")}
<TR><TD colspan="2">

<FONT class="ProductDetailsTitle">{$lng.lbl_add_your_review}</FONT>
</TD></TR>
<TR><TD class="Line" height="1" colspan="2">[img]{$ImagesDir}/spacer.gif[/img]</TD></TR>
<INPUT type="hidden" name="productid" value='{$product.productid}'>
<TR>
<TD width="30%">
{$lng.lbl_your_name}:</TD><TD>
<INPUT type="text" size="24" name="review_author" {if $login ne ""}value="{$customer_info.firstname} {$customer_info.lastname} ({$customer_info.email})"{/if}></TD></TR>
<TR>
<TD width="30%">{$lng.lbl_your_message}:</TD><TD><TEXTAREA cols="40" rows="4" name="review_message"></TEXTAREA></TD></TR>
<TR>
<TD colspan="2"><INPUT type="submit" value="{$lng.lbl_add_review}"></TD></TR>
{/if}
</FORM>


mpj 03-01-2005 04:20 PM

is there a way to changes images instead of text links?

thanks

markwhoo 03-01-2005 04:50 PM

Quote:

Originally Posted by mpj
is there a way to changes images instead of text links?

thanks


If you are speaking about the tabs and ability to change them from text boxes to rounded corners, or tab images, I would say yes, you would need to mod the tab script as it is diplayed.

there is code floating around the forum right now on how to change tabs to rounded corners using images, in custom mods area
This is same code type to make it all images, code needs to be tweaked a bit to make it happen.

Just do not destroy the call tags for the sections when making changes in the way it is displayed.

You could even make this verticle not hrizontal if you wanted. It is all in the way you tweak the code.

PhilJ 03-01-2005 10:05 PM

Quote:

is there a way to changes images instead of text links?

You could try modifying this code...

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm

mpj 03-02-2005 07:14 AM

thanks for your help! :D

mpj 03-02-2005 08:37 AM

thanks for your help! :D

x-online 03-06-2005 04:15 PM

Hi all,

Here are Boomer codes and the reason why i am posting here because i have sent him many many emails regarding his help/assistant.
He returned me with a solution that does not solved... and disappeared.
Really disappointed.

I hope people in this forum can help me out what's going on wrong:

I tried to put 'pricematch' under his tab but whatever i do it just never sync/connect.... Please see in 'bold'

Quote:

{if $product_links[0]}[*]Related Products{/if}
{if $active_modules.Customer_Reviews ne ""}[*]Reviews{/if}
{if $images[0]}[*]Images{/if}
{if $recommends}[*]Also Bought{/if}
{if $product.param00 ne ""}[*]Additional Info{/if}
{if $config.version gt "4.0"}[*]Refer{/if}
[*]Price Match
[/list]</div>

{* TABS CONTENT *}
<DIV id="accessories" style="display:block;">
{capture name=dialog}
{if $active_modules.Upselling_Products ne "" && $product_links[0]}



{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Related Products" content=$smarty.capture.dialog extra="width=100%"}
</DIV>

<DIV id="reviews" style="display:none;">
{capture name=dialog}
{if $active_modules.Customer_Reviews ne ""}



{include file="modules/Customer_Reviews/vote_reviews.tpl" }


{include file="cartmods/pricematch/pricematch.tpl" productid=$product.productid extra="width=100%" target="_blank"}
{/if}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Reviews" content=$smarty.capture.dialog extra="width=100%"}
</DIV>

<DIV id="pricematch" style="display:none;">
{capture name=dialog}
{include file="cartmods/pricematch/pricematch.tpl" productid=$product.productid extra="width=100%" target="_blank"}
{/capture}
{include file="cartlab-tabs-dialog.tpl" title="Price Match" content=$smarty.capture.dialog}
</DIV>


my website is http://www.directav.com.au/product.php?productid=301&cat=0&page=1
As you can see it does work under "review" and it shown up but does not with it own tab... any ideas plesae?

***I'm sorry boomer for publish your code but i have to get my business going.***

CopperB 03-23-2005 10:42 PM

First off thanks to PhilJ. This is an excellent mod. Also thanks to Bella Forma for the if statement code to only show the tabs when they have content and to soleag for the main details code.

mffowler was looking for complete code for this mod so here it is. I have taken PhilJ and Bella Forma's code and made a few changes to the CSS to go with my site.

I have only used this in v4.0.11

This will open the complete Product Details as the fist tab
This will also only show the tabs when they have content.

1) Create a file called skin1/tabs.css

Code:

 
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #6666FF;
border-bottom: 1px solid #6666FF;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: #6666FF;
}

#tablist li a.current{
background: #FFFFFF;
}

#tabcontentcontainer{
width: 90%;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;

}

.tabcontent{
display:none;
}


2) Create a file called skin1/tabs.js

Code:

/***********************************************
* Tab Content script- б╘ Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc0"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(window.location.pathname).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload




//Dynamicdrive.com persistence feature add-on
/////////////////////////////////////////////

var enablepersistence=false //true to enable persistence, false to turn off (or simply remove this entire script block).

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function savetabstate(){
document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab
}

window.onunload=savetabstate

//Dynamicdrive.com persistence feature add-on
/////////////////////////////////////////////


3) Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl

Code:

{* $Id: overview.tpl,v 1.6.2.2 2004/12/10 13:14:52 max Exp $ *}
<table width="100%" border="0">
  <tr>
    <td><SPAN class=>
{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}
</SPAN></td>
    <td></td>
  </tr>
</table>



4) in skin1/customer/home.tpl

underneath...

Code:

<LINK rel="stylesheet" href="{$SkinDir}/skin1.css">

add...

Code:

<LINK rel="stylesheet" href="{$SkinDir}/tabs.css">


5) find skin1/customer/main/product.tpl

add this code to the top of the page...

Code:

<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>

then right above... (this is to have the main details show)
Code:

{/capture}

Add:

Code:


 
<a name="tabs"></a>
<ul id="tablist"> [*]Product Details[*]Send to Friend
{if $images ne ""}[*]Detailed Images
{/if}
{if $active_modules.Upselling_Products eq ""} [*]Related Products
{else}
{/if}[*]Recommended Products
 {if $active_modules.Customer_Reviews ne ""}
  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"}[*]Customer Reviews
{/if}
{/if}[/list]<DIV id="tabcontentcontainer">
<div id="sc0" class="tabcontent">
{include file="customer/main/overview.tpl" }
</div>
<div id="sc1" class="tabcontent">
{include file="customer/main/send_to_friend.tpl" }
</div>
<div id="sc2" class="tabcontent">
{if $active_modules.Detailed_Product_Images ne ""}
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
</div>
<div id="sc3" class="tabcontent">
{if $active_modules.Upselling_Products ne ""}
{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
</div>
<div id="sc4" class="tabcontent">
{if $active_modules.Recommended_Products ne ""}
{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
</div>
<div id="sc5" class="tabcontent">
{if $active_modules.Customer_Reviews ne ""}
{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}
</div>
</DIV>
{/capture}


Then remove the block of code that this replaces. ie.

Code:

remove...

Code:




{include file="customer/main/send_to_friend.tpl" }
{if $active_modules.Detailed_Product_Images ne ""}



{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
{if $active_modules.Upselling_Products ne ""}



{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}



{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}



{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}


Once again.. Awesome mod and thanks to everyone who contributed on it. I hope compiling it all in one spot will help a few people out.


:D

longhorn180 04-04-2005 05:43 AM

I made a few changes to this mod to suit my needs. Instead of having the mod be part of the product page, I had the product page show up under the product details tab (book details in my case). Here's an example: http://www.thecrackedbook.com/xcart/customer/product.php?productid=19880&cat=253&page=3
If anyone is interested, here is what I did. Follow the steps stated previously in creating the tabs.css file and a tabs.js file in your skin1 directory. Also add the link in home.tpl to the tabs.css file. Then instead of creating the overview.tpl file, create a file named "custom_product.tpl" with the following code and save it as customer/main/custom_product.tpl

Code:

{* $Id: custom_product.tpl,v 1.78.2.4 2005/04/03 18:47:00  Exp $ *}
<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>
{capture name=dialog}

 
<a name="tabs"></a>
<ul id="tablist"> [*]Product Details [*]Send to Friend
{if $images ne ""} [*]Detailed Images
{/if}
{if $active_modules.Upselling_Products ne ""} [*]Related Products
{else}
{/if} [*]Recommended Products
{if $active_modules.Customer_Reviews ne ""}
  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"} [*]Customer Reviews
{/if}
{/if} [/list]<DIV id="tabcontentcontainer">
<div id="sc0" class="tabcontent">
{include file="customer/main/product.tpl" }
</div>
<div id="sc1" class="tabcontent">
{include file="customer/main/send_to_friend.tpl" }
</div>
<div id="sc2" class="tabcontent">
{if $active_modules.Detailed_Product_Images ne ""}
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
</div>
<div id="sc3" class="tabcontent">
{if $active_modules.Upselling_Products ne ""}
{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
</div>
<div id="sc4" class="tabcontent">
{if $active_modules.Recommended_Products ne ""}
{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
</div>
<div id="sc5" class="tabcontent">
{if $active_modules.Customer_Reviews ne ""}
{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}
</div>
</DIV>
{/capture}
{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"}

Open customer/home_main.tpl and find:
Code:

{elseif $main eq "product"}
{include file="customer/main/product.tpl" product=$product}

and replace it with this:

Code:

{elseif $main eq "product"}
{include file="customer/main/custom_product.tpl" product=$product}


Then you still need to remove this code from product.tpl

Code:


 
{include file="customer/main/send_to_friend.tpl" }
{if $active_modules.Detailed_Product_Images ne ""}


 
{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
{if $active_modules.Upselling_Products ne ""}


 
{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}


 
{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}


 
{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}


That's it. If you have installed the previous version of this mod in your product.tpl file then you would need to uninstall it before you install this version.

Jerrad 04-04-2005 08:04 AM

Hi, longhorn.
I really like the changes you made to this mod and will give it a try this evening. It sure does look good in your shop.

Another thing I noticed in your shop is the way you have the page navigation displayed - really, really awesome looking!
Any chance you could share this mod...?

Thanks in advance!

longhorn180 04-04-2005 08:16 AM

The page navigation mod is something I purchased from Boomer at cart-lab. Here is link for the mod: http://www.cart-lab.com/lab/customer/product.php?productid=5&cat=0&page=1.

Jerrad 04-04-2005 09:44 AM

Thanks for the reply, longhorn.
I knew about the mod from CartLab, but I thought/hoped you made it yourself.
Another thing for my own wishlist...

Thanks!

mrbiggles 04-05-2005 08:51 AM

Thanks for this
Got it working well, and did not take much effort at all. It makes a lot of sense to have the Tabs setup like that rather than seperate.
Regards Adam

pengrus 04-05-2005 08:04 PM

Thanks to all for sharing the knowledge!

Quote:

First off thanks to PhilJ. This is an excellent mod. Also thanks to Bella Forma for the if statement code to only show the tabs when they have content and to soleag for the main details code.

Thanks to CopperB for putting all together. I am sure it is a big help to many members. I will give it a try this week.

mrbiggles 04-07-2005 03:57 AM

Hi Longhorn

I was wondering whether the fancy looking edges you have on the product box is acheived by tweaking the existing CSS file or have you added some bits to it?

I have a pin stripe blue line and quite frankly it looks very plain.

Regards Adam

longhorn180 04-07-2005 05:58 AM

I changed the background and border colors in the css file. I also changed the text color too.

CopperB 04-08-2005 09:33 PM

Just wondering if anyone knows what CSS code I would change so that only the actual tab and not the entire box is a solid color?

IE: I want the main box to have no backgroung colour and just the actual tab itself (recommends, reviews etc..) to be a solid color.


Thanks

mrbiggles 04-08-2005 09:51 PM

Hello

In the tabs.css file you would have created for this mod located in the skin 1 directory, you should find the following

#tablist li a{
padding: 1px 0.5em;
margin-left: 1px;
border: 1px solid #778;
border-bottom: none;
background: #9cb9bf;
}

The above bold bit changes the tab background colour.

Now if only I could work out how to get the add to cart control buttons up the top like Long horn has, I would be completely satisfied.
Regards Adam

CopperB 04-08-2005 10:28 PM

Thanks for the reply Adam. I tried that before but it changes the entire tab "box". I only want the very top of the tabs to change color.

As an example it would be like Longhorns. His tabs are white (active) and blue (not active) yet the rest of the box remains the same color.


Quote:

Now if only I could work out how to get the add to cart control buttons up the top like Long horn has, I would be completely satisfied.

Do you mean how he has the shopping cart at the top of the page because his add to cart is still at the bottom of the product details.

Online Michael 04-09-2005 01:08 AM

PhilJ, you are a legend mate! :P A legend for being so kind to have us all share this great mod and a legend for just being a legend! Well done. I wish I had something to offer but unfortunately, being a newb, I can only take and give nothing back at the moment :( . I'll get there one day I suppose.

Anyway, really love this mod. I never knew what I needed until I saw what it could do. Works great, looks great, and hits the spot bang on! However, I am having one very minor problem and I am not sure if anyone else if affected. Recently I included the favicon.ico feature into my website which was working flawlessly. Link: http://forum.x-cart.com/viewtopic.php?t=16812&highlight=favicon I had the icon show up in the URL address window, task bar, and in the favourites menu. Now, after including this fantastic mod, when I click on one of the tabs (any tab) the icon disappears in the task bar. Like I said, minor problem but as usual I just want to get to the bottom of it. Any ideas?

longhorn180 04-09-2005 03:38 AM

CopperB, what you're looking to change are the border colors. Go back into the tabs.css file and look for these:
Code:

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #76B5F3;
}


and this:

Code:

#tabcontentcontainer{
        width: 100%;
        padding: 5px;
        border: 1px solid #CCCCCC;
        margin-left: 0;
}


just change the color to whatever you want where you find border. The #tablist dviion is the actual tab istelf and the #tabcontent container would be the division for the main box.


Adam, what controls are you talking about? Are you talking about the minicart or the tabs at the top of the page.

pengrus 04-09-2005 07:23 AM

I am thinking to implement this on my shop. Could someone share with me the benefits? Besides it looks better, does it also improves the speed? Any other benefits?

Thanks!

Bella Forma 04-09-2005 04:57 PM

I doubt there are any speed benefits as you are still loading the same amount of information you are just displaying it differently, I certainly didn't notice a speed increase.

The only benefit I can think of is the fact that it looks better, but that's a major benefit (in my mind) as instead of having a great big long page that your customers have to scroll down you can display all the information they need to see in one screen. It just makes it much more customer friendly and that means happy customers :)

pengrus 04-09-2005 05:57 PM

Thanks for explaining it to me... I agree with you that it looks better. So you think customers rather click 4 or 5 times than scrolling down once? :)

mrbiggles 04-09-2005 06:01 PM

Hi Pengrus

I like it (as a user) much better than scrolling down a long way. I seems like a lot of the larger sites prefer tabs.

I have read a few times that a basic rule of web page design is not to have a page that is too long.

Bella Forma 04-09-2005 06:09 PM

Quote:

Originally Posted by pengrus
Thanks for explaining it to me... I agree with you that it looks better. So you think customers rather click 4 or 5 times than scrolling down once? :)


Most definately!!!! Users HATE scroll bars, we are basically lazy creatures and I bet the vast majority of users won't even bother to scroll down a great big long page it's just too much effort. Much better to have a tab they can see and click on if they want to, the popularity of this mod speaks for itself :)

Online Michael 04-10-2005 03:29 AM

Ok, I've had some time to play around with this mod and nothing will change my opinion of it (it's a fantastic mod). However, anything that is good can always be better or improved upon and this is what I'm thinking:

Instead of a tab disappearing when the 'Detailed Image' tab, as an example, has no detailed image, wouldn't it be better to just disable it? The reason this would be better is simple... if a first time customer can't see this tab, they are likely to search for it and when they canБ─≥t find it they will be so jacked off and frustrated that they could possibly leave the store. But a disabled tab is more likely to indicate to the customer that no detailed image is available. No frantic searching needed.

I'm no programmer, but I canБ─≥t see this being too difficult to implement. Just substitute the link within the tab with grey coloured text (no link). I'm sure the customer would rather have this than a disappearing trick that tells them nothing at all.

I just wish I knew how to do it. I think its worth while doing, don't you?

Online Michael 04-10-2005 06:06 AM

One hour later, and I think I have a pretty good solution. This being my first code contribution to this forum, I think it's time to celebrate. \:D/

Anyway, in order to disable the 'Detailed Image' tab, as mentioned above, all I did was create an else statement and pointed the tab back to the 'Product Detail' tab, renamed the tab to "No Images" and shaded it red for good measure. Now, the code below is the code longhorn180
posted (he used a custom_product.tpl file which is also the tab method I adopted too). So here is what I did in the custom_product.tpl file relevant to 'Detailed Images':

Changed this:
[*]Product Details
{if $images ne ""} [*]More Images
{/if}

To This:
[*]Product Details
{if $images ne ""} [*]More Images
{else}[*]No Images
{/if}

So as you can see, whenever the customer clicks on "No Images", they will be sent back to the "product Detail" tab while the tab itself will glow red.

Naturally, you will need to adapt the above changes to your own tab situation (your tabs may be in a different order to mine). Should be easy to do though. If I could do it (being a newb 'n all), and trust me on this, anyone can do it!

Hope you like it.

Jerrad 04-10-2005 08:04 AM

Great one Micheal!
I surely will give this a try, one of these days (when I find the time...)

:D :D :D

jmell 04-12-2005 05:16 AM

I put it in however I still have the Detailed description in the top part of the page.
How do I remove that?
http://onlinemacs.com/product.php?productid=116&cat=109&page=1

CopperB 04-12-2005 10:30 AM

Did you also create an overview.tpl ?


Quote:

Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl

Code:

{* $Id: overview.tpl,v 1.6.2.2 2004/12/10 13:14:52 max Exp $ *}
<table width="100%" border="0">
<tr>
<td><SPAN class=>
{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{ /if}
</SPAN></td>
<td></td>
</tr>
</table>



jmell 04-12-2005 05:39 PM

Yes I put that in. Here is what it looks like.
http://onlinemacs.com/product.php?productid=116&cat=292&page=1

CopperB 04-12-2005 07:03 PM

Sorry about that jmell. I didn't notice the duplicate.

Post your product.tpl file and I can try to help you find the duplicate code.


All times are GMT -8. The time now is 09:18 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.