Kryptronic Software Support Forum

Hi John and thanks for your reply.

I am familiar with tabber and various other tabbed scripts.  Could you briefly describe how you have it set up on your site?  Do you paste all of the HTML code necessary for the tabs in your product's description area?

Thanks.

Hi John,

Wonder if you can help. I cant seem to get the above working.
I have downloaded tabber.js, opened the file, selected everything and pasted that into my zipskin\scripts.js right at the bottom of the file.
I then downloaded example.css and done the same thing to the all.css.

I then added your above code to my custom file as below.

<?php 

// +--
// | Get variables we need to draw this display.
// +--

$app      = $this->globals('khxc.app');
$ns       = $this->globals('khxc.namespace');
$eol      = $this->globals('khxc.eol');
$proddisp = $this->globals('ecom.prod_proddetail');
$xid      = $proddisp['id'];
$id       = $this->xhtml_encode($xid);

if ($ns == 'addcart') {$ns = 'prodshow';}

$this->globals('ecom.prod_proddisp',$proddisp);
$this->globals('ecom.prod_priceinfo',$proddisp['khxc.priceinfo']);

// +--
// | Create the product name and description.
// +--

$prodname  = $this->xhtml_encode($proddisp['name']);
$proddesc  = $proddisp['desclong'];
$hastags   = $proddisp['deschastags'];

if (empty($proddesc)) {

     $proddesc = $proddisp['descshort'];
     $hastags  = 0;

} // End of if statement.

if (empty($hastags)) {$proddesc = '<p>' . $this->xhtml_encode($proddesc) . '</p>';}

// +--
// | Create the image tag(s).
// +--

$imglist  = $proddisp['imglg'];

if (empty($imglist)) {$imglist = 'none.png';}

$imglist  = $this->make_list($imglist);
$imgwidth = $this->globals('khxc_settings.' . $app . '.imgsizeprodlg');
$imgtag   = '';

if (empty($imgwidth)) {$imgwidth = 200;}

foreach ($imglist as $num => $img) {

     $imgurl   = 'media/' . $app . '/prodlg/' . $img;

     $imgtag   .= '<img src="' . $imgurl . '" ';
     if ($imgwidth) {$imgtag .= 'width="' . $imgwidth . '" ';}
     $imgtag  .= 'alt="' . $prodname . '" />';

} // End of foreach statement.

// +--
// | Handle extra large image.
// +--

$showxl  = 0;

$imglist = $proddisp['imgxl'];

if (empty($imglist)) {$imglist = 'none.png';}

if (($imglist) && ($imglist != 'none.png') && ($ns == 'prodshow')) {

     $this->globals('khxc.load_lightbox',1);

     $showxl   = 1;
     $xlcount  = 0;
     $xlimgtag = '';
     $zlcount  = count($imglist);

     $imglist  = $this->make_list($imglist);

     if (count($imglist) == 1) {$text = 'View Larger Image';}
     else                      {$text = 'View Larger Image Slideshow';}

     foreach ($imglist as $num => $img) {

          $xlcount++;

          $xlurl  = $this->globals('khxc.url_nonssl');
          $xlurl .= '/media/' . $app . '/prodxl/' . $img;

          if ($xlcount == 1) {

               $xlimgtag .= '<p><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
               $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } else {

               $xlimgtag .= '<p class="hidden"><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
               $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } // End of if statement.

     } // End of foreach statement.

} // End of if statement.

// +--
// | Print the display.
// +--

?>

<table id="proddetail--<?php print $id; ?>" class="khxc_cptbl_det">

<tr class="khxc_cptbl_det"><td class="khxc_cptbl_det">

<table class="khxc_ghost"><tr><td class="khxc_ghost" style="width: <?php print $imgwidth; ?>px">

<?php print $imgtag; ?>

<?php 

// +--
// | Handle the extra large image tag and email a friend link.
// +--

$emailfr = $this->globals('khxc_settings.' . $app . '.emailfriend');

if ($ns != 'prodshow') {$emailfr = 0;}

if (($showxl) || ($emailfr)) {

     print '<div style="width:' . $imgwidth . 'px">' . $eol;

     if ($showxl) {print $xlimgtag;}

     if ($emailfr) {

          $link_emailf = $this->link_namespace($app,'emailfriend',array('ref' => $proddisp['id']));

          print '<p><a href="' . $link_emailf . '" title="Email a Friend" ';
          print 'class="khxc_hrefbutton">Email This Item to a Friend</a></p>';

     } // End of if statement.

     print '</div>' . $eol;

} // End of if statement.

?>

</td><td class="khxc_ghost">

<p><strong><?php print $prodname; ?></strong></p>


  <?php 

// +--
// | Print the product options if we can add the item to the 
// | shopping cart or wish list and we're on the prodshow
// | namespace.
// +--

$add_ok = 1;

if (($proddisp['useinv']) && (!($proddisp['invlevel'] > 0))) {$add_ok = 0;}
if ($proddisp['pricestatus'] == 'D') {$add_ok = 0;}

if (($ns == 'prodshow') && ($add_ok)) {

     $this->include_namespace($app,'prodshowopt',array());

} // End of if statement.

?>


<?php $this->include_file($app,'pricedisp.php');?>

<br>

<font color="#ff0000">For further options on <strong>Number of Users</strong> and <strong>Subscription Periods</strong> please scroll down to below the product description.


</p></td></tr>

</table>

</td></tr></table>


<?php print $proddesc; ?>

<p>

I then inserted the tags to the long product descritption, and nothing!

I assume java is enabled, whats the best way to check.

Cheers

Trevor

Hi John,

Not worry, I've worked it out. Me being daft and not realising that a) I needed to upload the tabber.js as a file in it's own right and b) needed to change the name of my skin directory in you code,

Cheers

Trevor

I'm not John but check your all.css file for multiple instances of h1 being declared paying close attention to the context of how it's being defined.  Since you added the tabber styling to all.css you may have ended up creating a conflict.

If using the 'tabber' solution, will the extra product data be pulled from the database? eg, is it possible to store product specification info in the db and pull it out on a 'spec' tab?

Other than this solution, is there a way of including specific types of product info separately in the database for each product? I'm going to be switching from 5.1 to 6 and this is going to be a fairly important feature.

OK thanks John, I'll take a look at that over the coming days.
Cheers,
Darren

The code line that gets the product description is close to the bottom of the detail product views, the code will work either just before or after the call for the product description, and you really only have to place it into the display you want to use it in but I did all three. If you want  to see it you can go to my site and view a product detail, I use it in almost every product but there are some that I don't have it in.

John

Cheers for the info John,
I went ahead an inserted that code into all 3, after a few noobish errors on my part i thought i had finaly got everything right. . . 
But for some reason now it is generating 2 of the tabber things . . .  one where my long description normaly is (which is fine), and another after the 'add to cart' button.
Cant think why it would duplicate things.. .

Enox

Here is a google cached page from my site http://209.85.173.132/search?q=cache:zD … &gl=us as you will be able to see it is the same as on the site. I would think that they see the actual content as one large lump of information the same as if you turn off java which just displays the inter contents of the description.

John

Last edited by dh783 (11-11-2008 18:22:02)

has any one got any ideas why my product page might be duplicating the tabber? it has generated 2 . . . one where the long description would be, and another after my 'Add to cart' Button.

Any help would be greatly appreciated.

Hi Guys,

Just tried this out and am having some problems getting the tabs to display. The tabber.js file is in the scripts folder for the skin I am using and I have added the example.css to the end of all.css

tried running this directly from the Product Long Description as follows:-


<script type="text/javascript" src="skins/KHXCMI5/scripts/tabber.js"></script>

<div class="tabber">

  <div class="tabbertab">
    <h3>Features</h3>
    Features content.
  </div>

  <div class="tabbertab">
    <h3>Specification</h3>
    Specification content.
  </div>

</div>

Instead of giving me tabs I get 2 dot points "Features" and "Specifications" as hyperlinks - (javascript:void(null) and then I get a listing of the heading followed by the respective content.

The path to the tabber.js is correct - if I mess with this I lose the "hyperlink" dot points. I have looked through the all.css file to see there is any obvious conflict but not sure if that is where I need to be looking or if something else is wrong.

any ideas?

Rob

Hi John,

Thanks for the quick reply.

tried the division tag as per your suggestion.

I still get the "dot point" tab titles only this time I only get the "Features content" followed by the "Specification content" - no repeat of the tab titles.

not sure how to tell if I need to be looking at if the script is running correctly or if it is an issue with all.css.

I have found a number of comments that say the output defaults to something like I have if the javascript is missing so maybe something is not working correctly. However, tabber is doing something since an incorrect path to the script results in the "dot point" titles disappearing.

Rob