Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 02-23-2010 20:02:37

Design_Wholesale
Member
From: England!
Registered: 11-21-2008
Posts: 1104
Website

Floating Product Listings - Flow Text AROUND The Image!

This submission is for anyone who does not like the traditional product listing displays that place your image on one side of your product listing, leaving it hanging with a big white space under it, and has been put together as an alternative for the default format type of listing (although it would actually be better to make it a seperate type of listing and to keep the default format for those more simplistic listings with very little in the way of description or other content).

This has also been modified slightly to give a price at the top of the listing and to display the Email A Friend (or, rather, Tell Someone About This Item!) button at the top of the listing. - Modify according to requirements and tweak content according to taste (or lack of smile ) ...

Additionally, it does validate (XML 1.0 strict), and works OK (on our webstore, at least) with the Email A Friend form (ie: the layout does not come apart when entered into the Email A Friend form):

Code:

<?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);
$usethumb = $this->globals('khxc_settings.' . $app . '.imguseprodthumb');
$imgwidthth = $this->globals('khxc_settings.' . $app . '.imgsizeprodlgth');

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'];
$desc_has_tags = $this->has_tags($proddesc);

if (empty($proddesc)) {

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

} // End of if statement.

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

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

$imglistlg  = $proddisp['imglg'];

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

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

if (empty($imgwidth)) {$imgwidth = 200;}
$count   = 0;
$multilg = 0;
foreach ($imglistlg as $num => $name) {
    if ($count == 0) { $lgimname = $name; }

    $count++;
} // End of foreach statement.
if ($count > 1) {
  // We have multi large images.
  $multilg = 1;
      
} // End of if statement.
if (($multilg) && ($usethumb)) {
    $imgtag   .= '<script type="text/javascript">' . $eol;
    $imgtag   .= '<!--' . $eol;
    $imgtag   .= 'if(document.images) { // create an array of prodImages' . $eol;
    $imgtag   .= 'document.prodImages = new Array();' . $eol;

}
foreach ($imglistlg as $num => $img) {

     if (($multilg) && ($usethumb)) {
         $imgurl   = 'media/' . $app . '/prodlg/' . $img;
        $imgtag   .= 'document.prodImages[' . $num . '] = new Image();' . $eol;
        $imgtag   .= 'document.prodImages[' . $num . '].src = "' . $imgurl . '";' . $eol;
        $imgtag   .= 'document.prodImages[' . $num . '].pop = "' . $imgurl . '";' . $eol;
      } else {
          $imgurl   = 'media/' . $app . '/prodlg/' . $img;

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

      } // End of if statement.

} // End of foreach statement.
if (($multilg) && ($usethumb)) {
    $imgtag   .= '//-->' . $eol;
    $imgtag   .= '}' . $eol;
    $imgtag   .= '</script>' . $eol;
    $imgurl   = 'media/' . $app . '/prodlg/' . $lgimname;

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

} // End of if statement.

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

$showxl  = 0;

$imglistxlg = $proddisp['imgxl'];

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

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

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

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

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

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

     foreach ($imglistxlg 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.
if (($multilg) && ($usethumb)) {
    $imgtag   .= '<p>';
     foreach ($imglistlg as $num => $name) {
        $imgurl   = 'media/' . $app . '/prodlg/' . $name;
        $imgtag   .= '<img src=\'' . $imgurl . '\' onmouseover="var x=document.getElementById(\'prodImage\'); x.src=document.prodImages[' . $num . '].src;" width="' . $imgwidthth . '" alt="' . $prodname . '" />';
    } // End of foreach statement.
    $imgtag   .= '</p>';

} // 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">
<div style="float: left; margin: 0 5px 5px 0;">
<?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']));

     } // End of if statement.

     print '</div>' . $eol;

} // End of if statement.

?>
</div>

<?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)) {

     if ($emailfr) {

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

          print '<p style="margin-left: 20px;"><a href="' . $link_emailf . '" title="Tell Someone About This Item!" ';
          print 'class="khxc_hrefbutton">Tell Someone About This Item!</a></p>';

     } // End of if statement.

} // End of if statement.

?>

<br />
<p style="font-size: small; font-weight: bold; color: black;">
<?php print $prodname; ?>
</p>

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

<?php print $proddesc; ?>

<br style="clear: both;"></br>
<br></br>

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

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

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

<?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.

?>

Last edited by Design_Wholesale (02-23-2010 20:03:35)

Offline

 

#2 11-19-2010 06:08:12

robprotronica
Member
Registered: 12-16-2008
Posts: 106

Re: Floating Product Listings - Flow Text AROUND The Image!

Thanks John,

This works really well for me.

Rob

Offline

 

#3 11-20-2010 14:33:48

Design_Wholesale
Member
From: England!
Registered: 11-21-2008
Posts: 1104
Website

Re: Floating Product Listings - Flow Text AROUND The Image!

No problem. - I try to keep these posts updated with the 'latest version', but just let me know if you find any glitches.

Offline

 

Board footer