New Products page list vertically

Jeffrmarks · November 29, 2015

I know that I can adjust the number of items per line and size, etc, but is there a way to just get one item per line with a description besides the image of the product?

Thanks

"

Jeff

♥Tsimi · November 30, 2015

@@Jeffrmarks

Hi Jeff

What osCommerce version do you use?

Which New Products are you talking about? The ones one the start page?

Jeffrmarks · December 2, 2015

2.3.4

Yes, the ones on the start page.

♥Tsimi · December 2, 2015

@@Jeffrmarks

The "normal" osC? Not the Bootstrap responsive version?

So you would like to have a list view instead of a grid view? Right?

♥Tsimi · December 2, 2015

@@Jeffrmarks

Hi Jeff

I don't know if you use the responsive osC version or not but here is the code for the "normal" osC 2.3.4

It is quick and dirty. The language definition (READ MORE) belongs inside the english.php and the css styles belong inside a css file. I also left the uncommented code inside it so you can see what was not needed.

Backup your original ../includes/modules/new_products.php file first. Then copy&paste the below code into it.

<?php define('READ_MORE', ' ...read more'); ?>
<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

  if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
    $new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, pd.products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  } else {
    $new_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, pd.products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and c.parent_id = '" . (int)$new_products_category_id . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  }

  $num_new_products = tep_db_num_rows($new_products_query);

  if ($num_new_products > 0) {
/*    $counter = 0;
    $col = 0;
*/
    $new_prods_content = '<table border="0" width="100%" cellspacing="0" cellpadding="2">';
    while ($new_products = tep_db_fetch_array($new_products_query)) {
//    $counter++;

//      if ($col === 0) {
        $new_prods_content .= '<tr>';
//      }

      $new_prods_content .= '<td style="border-bottom:solid 1px #ccc;">
								<div class="outer">
									<div id="x">
										<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>
									</div>
									<div id="y">
										<span class="name-font"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></span>
										<span class="price-font">' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</span><br /><br />
								    	' . $new_products['products_description'] . '
									</div>
								</div>
							 </td>';

//      $col ++;

//      if (($col > 2) || ($counter == $num_new_products)) {
        $new_prods_content .= '</tr>';

//        $col = 0;
      }
//    }

    $new_prods_content .= '</table>';
?>

  <h2><?php echo sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')); ?></h2>

  <div class="contentText">
    <?php echo $new_prods_content; ?>
  </div>

<?php
  }
?>
<style>
.price-font {
 float: right;
 color: #000000;
 font-size: 18px; 
}	
.name-font {
 font-size: 14px;
 font-weight: bolder; 
}	
.outer {
	padding: 10px 0 10px 0;
}
#x {
	display: inline-block;
}
#y {
	width: 82%;
	vertical-align: top;
	display: inline-block;
}		
</style>

Jeffrmarks · December 3, 2015

Yes, it is the normal, and this looks great! Thank you so much!

Jeffrmarks · December 3, 2015

I had a couple of quick questions.

1) Is there a way to alternate the image so that the first product's image is on the right and the next on the left?

2) Is there a way to limit the text shown on the page to only 100 characters or 40 words or ?

Thanks again for all this help.

Jeff

♥Tsimi · December 3, 2015

@@Jeffrmarks

Hi Jeff

1.) I don't know what you mean exactly by that. The only page I can imagine that has more then 1 image is the product_info.php page.

2.) Yes that is possible.

Jeffrmarks · December 4, 2015

I like the one product per line aspect of this new design. It's close to what the client currently has.

I just thought the design was a bit plain, and wondered if the first product's image could appear right-justified and the second product's image could be left-justified, etc. Just vary the format slightly.

Could you point me to how to cut the number of words/characters?

Thanks so much.

♥Tsimi · December 4, 2015

@@Jeffrmarks

Regarding the description.
If you are using the code I posted above.

FIND

  if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
    $new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, pd.products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  } else {
    $new_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, pd.products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and c.parent_id = '" . (int)$new_products_category_id . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  }

REPLACE WITH

  if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
    $new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, SUBSTRING_INDEX(pd.products_description, ' ', '" . DESCRIPTION_LENGHT . "') as products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  } else {
    $new_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, SUBSTRING_INDEX(pd.products_description, ' ', '" . DESCRIPTION_LENGHT . "') as products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and c.parent_id = '" . (int)$new_products_category_id . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  }

FIND

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

ADD ABOVE IT (*here you can change the length of the description.)

<?php define('DESCRIPTION_LENGHT', '20'); ?>

FIND

' . $new_products['products_description'] . '

REPLACE WITH

' . strip_tags($new_products['products_description'], '<br>') . '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . READ_MORE . '</a>

Just make sure you still have the READ_MORE language definition.

Regarding your first question. It seems like I am not fully awake yet (still morning over here) to understand what you mean with that image thing. There is only 1 image per product in the listing not more, right?

♥Tsimi · December 4, 2015

@@Jeffrmarks

(w00t) Now I know what you meant with the images one left then right then again left and so on.... Yes that might be possible. How? I have no idea.

♥Tsimi · December 4, 2015

@@Jeffrmarks

Try this

<?php define('READ_MORE', ' ...read more'); ?>
<?php define('DESCRIPTION_LENGHT', '20'); ?>
<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

  if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
    $new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, SUBSTRING_INDEX(pd.products_description, ' ', '" . DESCRIPTION_LENGHT . "') as products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  } else {
    $new_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, pd.products_name, SUBSTRING_INDEX(pd.products_description, ' ', '" . DESCRIPTION_LENGHT . "') as products_description, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and c.parent_id = '" . (int)$new_products_category_id . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
  }

  $num_new_products = tep_db_num_rows($new_products_query);

  if ($num_new_products > 0) {
	    
	$new_prods_content = '  <div class="NewProductsList">' .	
    $new_prods_content .= '<table border="0" width="100%" cellspacing="0" cellpadding="2">';
    while ($new_products = tep_db_fetch_array($new_products_query)) {
        
		$new_prods_content .= '<tr>';
		
      $new_prods_content .= '<td style="border-bottom:solid 1px #ccc;">
								<div class="outer">
									<div id="x">
										<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>
									</div>
									<div id="y">
										<span class="name-font"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></span>
										<span class="price-font">' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</span><br /><br />
										' . strip_tags($new_products['products_description'], '<br>') . '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . READ_MORE . '</a>
									</div>
								</div>
							 </td>';
							 
        $new_prods_content .= '</tr>';
    } 
    $new_prods_content .= '</table>';
    $new_prods_content .= '</div>';
?>

  <h2><?php echo sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')); ?></h2>

  <div class="contentText">
    <?php echo $new_prods_content; ?>
  </div>

<?php
  }
?>
<style>
.price-font {
 float: right;
 color: #000000;
 font-size: 18px; 
}	
.name-font {
 font-size: 14px;
 font-weight: bolder; 
}	
.outer {
	padding: 10px;
}
#x {
	display: inline-block;
}
#y {
	width: 82%;
	vertical-align: top;
	display: inline-block;
}		
.NewProductsList tr.alt td #x {
  float: right;
}
.NewProductsList tr.alt td {
  background-color: #ecf6fc;
}
</style>
<script type="text/javascript">
$('.NewProductsList tr:nth-child(even)').addClass('alt');
</script>

Jeffrmarks · December 4, 2015

Wow, thanks so much! That helps a lot

Jeffrmarks · December 7, 2015

I did have another question (sorry!)

Is there a way to pull the title and price next to the image rather than under it? I was just thinking of removing some of the white space around the product image.

Thanks!!

New Products page list vertically

Recommended Posts

Jeffrmarks

♥Tsimi

Jeffrmarks

♥Tsimi

♥Tsimi

Jeffrmarks

Jeffrmarks

♥Tsimi

Jeffrmarks

♥Tsimi

♥Tsimi

♥Tsimi

Jeffrmarks

Jeffrmarks

Archived

Browse

Activity