Snaf

**rbarbour** · 3 Nov 2013, 12:18 AM

Originally Posted by DivaVocals

So I finally have hit a snag using SNAF.. I've always preferred this module of the Column Product Listings mod because Column Product Listing module only converts the category product listing into grid listings, whereas SNAF covers ALL products listings including the Specials, Feature, and New Products listings..

The issue I've run into with SNAF is the tables used to create the grids.. It looks like code that drive this are in these files:
includes/templates/custom_template/common/tpl_columnar_display.php
includes/templates/custom_template/common/tpl_tabular_display.php

I need to convert the tables to a CSS grid like the one used for the category listings in the Column Product Listings mod. Otherwise this mod will be a bit of a bear to deal with in responsive templates..

I've been staring at the code in these two files hoping to "figure it out", but I am waving the white flag and admitting that I haven't a CLUE here.. Hoping that if not niccol, that some kind community member can help me with the changes I need to make..

I prefer flexible product listing over both but that is here nor there.

I have converted the tables for you (done previously):

PHP Code:


<?php
/**
 * Common Template - tpl_tabular_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_tabular_display.php 3957 2006-07-13 07:27:06Z drbyte $
 */

//print_r($list_box_contents);
  $cell_scope = (!isset($cell_scope) || empty($cell_scope)) ? 'col' : $cell_scope;
  $cell_title = (!isset($cell_title) || empty($cell_title)) ? 'list' : $cell_title;

?>
<div width="100%" id="<?php echo 'cat' . $cPath . 'Table'; ?>" class="tabTable">
<?php
  for($row=1; $row<sizeof($list_box_contents); $row++) {
    $r_params = "";
    $c_params = "";
    if (isset($list_box_contents[$row]['params'])) $r_params .= ' ' . $list_box_contents[$row]['params'];
?>
  <div <?php echo $r_params; ?>>
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $c_params = "";
      $cell_type = ($row==0) ? 'div' : 'div';
      if (isset($list_box_contents[$row][$col]['params'])) $c_params .= ' ' . $list_box_contents[$row][$col]['params'];
      if (isset($list_box_contents[$row][$col]['align']) && $list_box_contents[$row][$col]['align'] != '') $c_params .= ' align="' . $list_box_contents[$row][$col]['align'] . '"';
      if ($cell_type=='div') $c_params .= ' scope="' . $cell_scope . '" id="' . $cell_title . 'Cell' . $row . '-' . $col.'"';
      if (isset($list_box_contents[$row][$col]['text'])) {
?>
   <?php echo '<' . $cell_type . $c_params . '>'; ?><?php echo $list_box_contents[$row][$col]['text'] ?><?php echo '</' . $cell_type . '>'  . "\n"; ?>

<?php
      }
    }
?>
<br class="clearBoth" />
  </div>

<?php
  }
?> 
</div>

This requires additional css to make work. I do not have a clean version but you can check the source code out here: www[.]zcadditions[.]com/9172013/index.php?main_page=index&cPath=12_13

**DivaVocals** · 3 Nov 2013, 04:24 AM

I appreciate the hand.. I prefer SNAF because while I know (based on the author) that "Flexible Product Listing" is very well written, my understanding is that "Flexible Product Listing" only applies a grid layout option to the product category listings. SNAF on the other hand also allows me to apply a grid layout to the Specials, New Products, All Products, and Featured Product listings as well.

That said, not sure if the change to the includes/templates/custom_template/common/tpl_tabular_display.php alone will work with SNAF.

SNAF makes modifications to both of these files:
includes/templates/custom_template/common/tpl_columnar_display.php
includes/templates/custom_template/common/tpl_tabular_display.php

Your posted edit to the includes/templates/custom_template/common/tpl_tabular_display.php is based on the default version.. the SNAF version of this file only makes one small edit to this file.. I've combined it with your edits and this is the result (SNAF changes are highlighted in red):

Code:

<?php
/**
 * Common Template - tpl_tabular_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_tabular_display.php 3957 2006-07-13 07:27:06Z drbyte $
 */

//print_r($list_box_contents);
  $cell_scope = (!isset($cell_scope) || empty($cell_scope)) ? 'col' : $cell_scope;
  $cell_title = (!isset($cell_title) || empty($cell_title)) ? 'list' : $cell_title;

?>
<div width="100%" id="<?php echo 'cat' . $cPath . 'Table'; ?>" class="tabTable">
<?php
  for($row=1; $row<sizeof($list_box_contents); $row++) {
    $r_params = "";
    $c_params = "";
    if (isset($list_box_contents[$row]['params'])) $r_params .= ' ' . $list_box_contents[$row]['params'];
?>
  <div <?php echo $r_params; ?>>
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $c_params = "";
      $cell_type = ($row==0) ? 'div' : 'div';

if ($current_listing_style == 'columns') $cell_type = 'td'; /*SNAF CHANGES*/
      if (isset($list_box_contents[$row][$col]['params'])) $c_params .= ' ' . $list_box_contents[$row][$col]['params'];
      if (isset($list_box_contents[$row][$col]['align']) &&  $list_box_contents[$row][$col]['align'] != '') $c_params .= ' align="' .  $list_box_contents[$row][$col]['align'] . '"';
      if ($cell_type=='div') $c_params .= ' scope="' . $cell_scope . '" id="' . $cell_title . 'Cell' . $row . '-' . $col.'"';
      if (isset($list_box_contents[$row][$col]['text'])) {
?>
   <?php echo '<' . $cell_type . $c_params . '>'; ?><?php  echo $list_box_contents[$row][$col]['text'] ?><?php echo '</' .  $cell_type . '>'  . "\n"; ?>

<?php
      }
    }
?>
<br class="clearBoth" />
  </div>

<?php
  }
?> 
</div>

I'm assuming that logically, this change should look like this to work with your edits:

Code:

if ($current_listing_style == 'columns') $cell_type = 'div'; /*SNAF CHANGES*/

However the listing grids for Specials, New Products, All Products, and Featured Product listings in SNAF comes from the changes to the includes/templates/custom_template/common/tpl_columnar_display.php file. This is the file with the major SNAF changes, and it's the one I'm unsure of how to convert..

Code:

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
  <div class="centerBoxWrapperContents">
<table width="100%" align="center" cellpadding="1" cellspacing="15" border="0">

<?php
if (is_array($list_box_contents) > 0 ) {

$MaxCol=0;
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
<tr>
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     $r_params = str_replace(" back", "", $r_params);
     $r_params = str_replace("50", "100", $r_params);
     $r_params = str_replace("33", "100", $r_params);
     
     // bof: Replace all widths with 100% for Column Divider Pro
     $startpos = strpos($r_params, "width:");
     if ($startpos != false) {
        $endpos = strpos($r_params, ";", $startpos);
        $res = substr($r_params, $startpos, ($endpos - $startpos ));
        $r_params = str_replace($res, "width:100%", $r_params);
     }
     // eof: Replace all widths with 100% for Column Divider Pro
     
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php 
    echo '<td width="'. (intval($col_width) - 0.5) .'%" align="center" valign="top"><div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div></td>' . "\n";
     ?>
    <?php if ($row == 0 && $col < (sizeof($list_box_contents[$row]) - 1)) {
            echo '<td class="vDotLine" rowspan="' . ((sizeof($list_box_contents))*2) . '"></td>' . "\n";
              $MaxCol += 1;
          }

      }
    }
?>

</tr>

<?php 
    if ($row < (sizeof($list_box_contents)-1)) {?>
<tr>
    <?php    for($col=0;$col<($MaxCol + 1);$col++) {
      echo '<td class="hDotLine"></td>';
    } ?>
</tr>
<?php    }
    ?>


<?php
  }
}
?>
</table>
 </div>

Originally Posted by rbarbour

I prefer flexible product listing over both but that is here nor there.

I have converted the tables for you (done previously):

This requires additional css to make work. I do not have a clean version but you can check the source code out here: www[.]zcadditions[.]com/9172013/index.php?main_page=index&cPath=12_13

**DivaVocals** · 3 Nov 2013, 06:35 AM

So I've made some progress, but I'm not quite there yet.. I have incorporated the Column Divider Pro module with SNAF, and the column dividers are not behaving EXACTLY as they should with the CSS tables and I'm puzzled how to fix it.. The horizontal dividers is repeated 4 times, and I cannot get the vertical dividers to work just on the between the inner cells.. (my current edit only displays them on the left -- I commented out the code which is supposed to display it between cells because it didn't work) You can see my progress here:
http://eitestsite(dot)eyeitalia(dot)...e=products_all

Here's my modified includes/templates/custom_template/common/tpl_columnar_display.php file and the CSS to support my changes:
Supporting CSS

Code:

.vDotLine
{
    background-color: transparent;
    background-image: url(../images/delim_v.gif);
    background-repeat: repeat-y;
    background-attachment: scroll;
    width: 20px;
    /*font-size: 1px;*/
}

.hDotLine
{
    background-image: url(../images/delim_v.gif);
    padding:1px 0;
}

.tabTable {display: table;padding-left: 20px;/*font-size: 8pt;*/}
.trRow {display: table-row;}
.tdContent {display: table-cell;padding: 5px 8px;}

tpl_columnar_display.php changes

Code:

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
  <div class="centerBoxWrapperContents">
<div class="tabTable">

<?php
if (is_array($list_box_contents) > 0 ) {

$MaxCol=0;
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
<div class="trRow">
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     $r_params = str_replace(" back", "", $r_params);
     $r_params = str_replace("50", "100", $r_params);
     $r_params = str_replace("33", "100", $r_params);
     
     // bof: Replace all widths with 100% for Column Divider Pro
     $startpos = strpos($r_params, "width:");
     if ($startpos != false) {
        $endpos = strpos($r_params, ";", $startpos);
        $res = substr($r_params, $startpos, ($endpos - $startpos ));
        $r_params = str_replace($res, "width:100%", $r_params);
     }
     // eof: Replace all widths with 100% for Column Divider Pro
     
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php 
    echo '<div class="tdContent vDotLine" style="width:'. (intval($col_width) - 0.5) .'%">' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n";
     ?>
    <?php if ($row == 0 && $col < (sizeof($list_box_contents[$row]) - 1)) {
//            echo '<div class="tdContent vDotLine"></div>' . "\n";
              $MaxCol += 1;
          }

      }
    }
?>

</div> <!--end trRow-->

<?php 
    if ($row < (sizeof($list_box_contents)-1)) {?>
<div class="trRow">
    <?php    for($col=0;$col<($MaxCol + 1);$col++) {
      echo '<div class="tdContent hDotLine"></div>';
    } ?>
</div> <!--end trRow-->
<?php    }
    ?>


<?php
  }
}
?>
</div> <!--end table-->
 </div>

Originally Posted by DivaVocals

I appreciate the hand.. I prefer SNAF because while I know (based on the author) that "Flexible Product Listing" is very well written, my understanding is that "Flexible Product Listing" only applies a grid layout option to the product category listings. SNAF on the other hand also allows me to apply a grid layout to the Specials, New Products, All Products, and Featured Product listings as well.

That said, not sure if the change to the includes/templates/custom_template/common/tpl_tabular_display.php alone will work with SNAF.

SNAF makes modifications to both of these files:
includes/templates/custom_template/common/tpl_columnar_display.php
includes/templates/custom_template/common/tpl_tabular_display.php

Your posted edit to the includes/templates/custom_template/common/tpl_tabular_display.php is based on the default version.. the SNAF version of this file only makes one small edit to this file.. I've combined it with your edits and this is the result (SNAF changes are highlighted in red):

Code:

<?php
/**
 * Common Template - tpl_tabular_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_tabular_display.php 3957 2006-07-13 07:27:06Z drbyte $
 */

//print_r($list_box_contents);
  $cell_scope = (!isset($cell_scope) || empty($cell_scope)) ? 'col' : $cell_scope;
  $cell_title = (!isset($cell_title) || empty($cell_title)) ? 'list' : $cell_title;

?>
<div width="100%" id="<?php echo 'cat' . $cPath . 'Table'; ?>" class="tabTable">
<?php
  for($row=1; $row<sizeof($list_box_contents); $row++) {
    $r_params = "";
    $c_params = "";
    if (isset($list_box_contents[$row]['params'])) $r_params .= ' ' . $list_box_contents[$row]['params'];
?>
  <div <?php echo $r_params; ?>>
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $c_params = "";
      $cell_type = ($row==0) ? 'div' : 'div';

if ($current_listing_style == 'columns') $cell_type = 'td'; /*SNAF CHANGES*/
      if (isset($list_box_contents[$row][$col]['params'])) $c_params .= ' ' . $list_box_contents[$row][$col]['params'];
      if (isset($list_box_contents[$row][$col]['align']) &&  $list_box_contents[$row][$col]['align'] != '') $c_params .= ' align="' .  $list_box_contents[$row][$col]['align'] . '"';
      if ($cell_type=='div') $c_params .= ' scope="' . $cell_scope . '" id="' . $cell_title . 'Cell' . $row . '-' . $col.'"';
      if (isset($list_box_contents[$row][$col]['text'])) {
?>
   <?php echo '<' . $cell_type . $c_params . '>'; ?><?php  echo $list_box_contents[$row][$col]['text'] ?><?php echo '</' .  $cell_type . '>'  . "\n"; ?>

<?php
      }
    }
?>
<br class="clearBoth" />
  </div>

<?php
  }
?> 
</div>

I'm assuming that logically, this change should look like this to work with your edits:

Code:

if ($current_listing_style == 'columns') $cell_type = 'div'; /*SNAF CHANGES*/

However the listing grids for Specials, New Products, All Products, and Featured Product listings in SNAF comes from the changes to the includes/templates/custom_template/common/tpl_columnar_display.php file. This is the file with the major SNAF changes, and it's the one I'm unsure of how to convert..

Code:

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
  <div class="centerBoxWrapperContents">
<table width="100%" align="center" cellpadding="1" cellspacing="15" border="0">

<?php
if (is_array($list_box_contents) > 0 ) {

$MaxCol=0;
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
<tr>
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     $r_params = str_replace(" back", "", $r_params);
     $r_params = str_replace("50", "100", $r_params);
     $r_params = str_replace("33", "100", $r_params);
     
     // bof: Replace all widths with 100% for Column Divider Pro
     $startpos = strpos($r_params, "width:");
     if ($startpos != false) {
        $endpos = strpos($r_params, ";", $startpos);
        $res = substr($r_params, $startpos, ($endpos - $startpos ));
        $r_params = str_replace($res, "width:100%", $r_params);
     }
     // eof: Replace all widths with 100% for Column Divider Pro
     
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php 
    echo '<td width="'. (intval($col_width) - 0.5) .'%" align="center" valign="top"><div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div></td>' . "\n";
     ?>
    <?php if ($row == 0 && $col < (sizeof($list_box_contents[$row]) - 1)) {
            echo '<td class="vDotLine" rowspan="' . ((sizeof($list_box_contents))*2) . '"></td>' . "\n";
              $MaxCol += 1;
          }

      }
    }
?>

</tr>

<?php 
    if ($row < (sizeof($list_box_contents)-1)) {?>
<tr>
    <?php    for($col=0;$col<($MaxCol + 1);$col++) {
      echo '<td class="hDotLine"></td>';
    } ?>
</tr>
<?php    }
    ?>


<?php
  }
}
?>
</table>
 </div>

**DivaVocals** · 3 Nov 2013, 07:31 AM

Whoops.. my bad.. it looks like all the changes I'm trying to work out are related to the Column Divider Pro module not SNAF.. let me move this to the right place..

Originally Posted by DivaVocals

So I've made some progress, but I'm not quite there yet.. I have incorporated the Column Divider Pro module with SNAF, and the column dividers are not behaving EXACTLY as they should with the CSS tables and I'm puzzled how to fix it.. The horizontal dividers is repeated 4 times, and I cannot get the vertical dividers to work just on the between the inner cells.. (my current edit only displays them on the left -- I commented out the code which is supposed to display it between cells because it didn't work) You can see my progress here:
http://eitestsite(dot)eyeitalia(dot)...e=products_all

Here's my modified includes/templates/custom_template/common/tpl_columnar_display.php file and the CSS to support my changes:
Supporting CSS

Code:

.vDotLine
{
    background-color: transparent;
    background-image: url(../images/delim_v.gif);
    background-repeat: repeat-y;
    background-attachment: scroll;
    width: 20px;
    /*font-size: 1px;*/
}

.hDotLine
{
    background-image: url(../images/delim_v.gif);
    padding:1px 0;
}

.tabTable {display: table;padding-left: 20px;/*font-size: 8pt;*/}
.trRow {display: table-row;}
.tdContent {display: table-cell;padding: 5px 8px;}

tpl_columnar_display.php changes

Code:

<?php
/**
 * Common Template - tpl_columnar_display.php
 *
 * This file is used for generating tabular output where needed, based on the supplied array of table-cell contents.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_columnar_display.php 3157 2006-03-10 23:24:22Z drbyte $
 */

?>
<?php
  if ($title) {
  ?>
<?php echo $title; ?>
<?php
 }
 ?>
  <div class="centerBoxWrapperContents">
<div class="tabTable">

<?php
if (is_array($list_box_contents) > 0 ) {

$MaxCol=0;
 for($row=0;$row<sizeof($list_box_contents);$row++) {
    $params = "";
    //if (isset($list_box_contents[$row]['params'])) $params .= ' ' . $list_box_contents[$row]['params'];
?>
<div class="trRow">
<?php
    for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
      $r_params = "";
      if (isset($list_box_contents[$row][$col]['params'])) $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
     $r_params = str_replace(" back", "", $r_params);
     $r_params = str_replace("50", "100", $r_params);
     $r_params = str_replace("33", "100", $r_params);
     
     // bof: Replace all widths with 100% for Column Divider Pro
     $startpos = strpos($r_params, "width:");
     if ($startpos != false) {
        $endpos = strpos($r_params, ";", $startpos);
        $res = substr($r_params, $startpos, ($endpos - $startpos ));
        $r_params = str_replace($res, "width:100%", $r_params);
     }
     // eof: Replace all widths with 100% for Column Divider Pro
     
     if (isset($list_box_contents[$row][$col]['text'])) {
?>
    <?php 
    echo '<div class="tdContent vDotLine" style="width:'. (intval($col_width) - 0.5) .'%">' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n";
     ?>
    <?php if ($row == 0 && $col < (sizeof($list_box_contents[$row]) - 1)) {
//            echo '<div class="tdContent vDotLine"></div>' . "\n";
              $MaxCol += 1;
          }

      }
    }
?>

</div> <!--end trRow-->

<?php 
    if ($row < (sizeof($list_box_contents)-1)) {?>
<div class="trRow">
    <?php    for($col=0;$col<($MaxCol + 1);$col++) {
      echo '<div class="tdContent hDotLine"></div>';
    } ?>
</div> <!--end trRow-->
<?php    }
    ?>


<?php
  }
}
?>
</div> <!--end table-->
 </div>

**DivaVocals** · 3 Nov 2013, 08:55 AM

Okay.. so for now I'm dropping CDP stuff for now.. Too much work for very little gain.. If I figured it out later then so be it and I will share that revelation if I do..

In the meantime I've got one last thing to work through with SNAF. Column views work JUST fine.. Rows views do not.

So looking at my example: http://eitestsite(dot)eyeitalia(dot)...e=products_all

If you use the button on the listing page to switch the view to rows, things are not laying out correctly..

So far I made this change:

Code:

.productListing-data, .productListing-heading {
    padding: .5em 0;
    display: table-cell;
}

This as least fixed it so that things would at least line up in rows.. But I am stumped how I would go about fixing the spacing issues.. I get I may have to add more classes and IDs, but I am confused/stumped which files to edit..

**niccol** · 3 Nov 2013, 11:25 AM

Originally Posted by DivaVocals

So far I made this change:

Code:

.productListing-data, .productListing-heading {
    padding: .5em 0;
    display: table-cell;
}

Instead of table-cell try float:left;

You may need to do more than that and add further classses but try that first.

**DivaVocals** · 3 Nov 2013, 03:22 PM

Originally Posted by niccol

Instead of table-cell try float:left;

You may need to do more than that and add further classses but try that first.

Nick you are a doll..

Okay so that at least got things to things to align vertically.. But the spacing is still wrong, and I do know that I need to add more classes/IDs to help fix things up, but I'm still quite clueless where.. I have been using the developers toolkit to help narrow things down, but I am nowhere close to finding the "right" files..

**DivaVocals** · 3 Nov 2013, 03:42 PM

Originally Posted by DivaVocals

Nick you are a doll..

Okay so that at least got things to things to align vertically.. But the spacing is still wrong, and I do know that I need to add more classes/IDs to help fix things up, but I'm still quite clueless where.. I have been using the developers toolkit to help narrow things down, but I am nowhere close to finding the "right" files..

Spoke too soon.. float:left; only worked on some rows.. not all..

**DivaVocals** · 3 Nov 2013, 05:40 PM

Okay.. still plugging away at this.. Still have had NO LUCK in fixing the look of the rows view.. I know I could make it work by using the following:

display: table;
display: table-row;
display: table-cell;

I know I need to add additional containers so that I can add the required classes/IDs to use these two elements:

display: table;
display: table-row;

Just don't know where/how to accomplish this.. Everything points back to a change that needs to be made in the includes/modules/YOUR_TEMPLATE/product_listing.php file.. Just have no clue WHAT I need to change.. **sigh**

============================================

In the meantime I've run across something else that I STUMPED how to execute..

So in Configuration > Product Listing

I changed the sort order of the displayed content to the following order:

product image (Display Product Image)
product name (Display Product Name)
price/add to cart (Display Product Price/Add to Cart)

Unfortunately the "Display Product Name" option also includes the description.. In the grid layout, I'd like to be able to to get the product name to appear above the image and the description to appear below.

Also I'd like to know how to make the "add to cart" button appear below applicable items in the listing and NOT use the top and bottom "add selected products to cart" button.. Similar to this site: https://www(dot)ckrccrawlers(dot)com/specials.html. I thought this might be an admin setting.. but darned if I know what it is..

**DivaVocals** · 3 Nov 2013, 06:38 PM

Just wanted to add one more thing.. I KNOW that this is what the HTML output and CSS needs to look like to get the rows view to align correctly.. Still cannot see how to add the parts in red..

Code:

<div class="tabTable">
<div class="trRow">
<div class="productListing-heading"> … </div>
<div class="productListing-heading"> … </div>
<div class="productListing-heading"> … </div>
 </div>

<div class="trRow">
<div class="productListing-data"> … </div>
<div class="productListing-data"> … </div>
<div class="productListing-data"> … </div>
 </div> 
</div>

Code:

.tabTable {display: table;}
.trRow {table-row;}
.productListing-data, .productListing-heading {padding: .5em 0;display: table-cell;}

Thread: Snaf

Thread Tools

Search Thread

Display

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Re: Snaf

Similar Threads

SNAF and Set number dropdown not working

styling the row layout while using snaf

SNAF not working with aBagon red template??

Posting Permissions