Heavily modifying Product Listings Page

[madfastride]

I'm trying to change my product_listing page. I can't figure out how to do it and have looked at both the product_listing page and the tabular_display file. I'm eventually trying to get my page to look similar to this http://www.oxyfresh.com/dental/ . Right now I cut and pasted my PRODUCT_LIST_PRICE to within my PRODUCT_LIST_NAME (in my product_listing file) and then I'm using DIV and CSS to sort out the styling. I tried this with the PRODUCT_LIST_IMAGE but ran into several different problems, if I could get this solution to work this would be ideal.

Problems:
-With product images turned off in my admin -> product listing panel my images all defaulted back to the "sorry no image available" but the layout is correct. .

-With product images turned on in my admin -> product listing panel the table has two columns in my listing page and sorts out the products into the columns (one product in the left column the next in the right etc).

Any help would be nice. This is the page right now http://healthykitchenware.com/index....=index&cPath=4 as it stands.

I can post code if it's necessary...

[gjh42]

Look at the Layout of products thread (especially posts 2, 4 and 13) for some ideas on this subject.

As you have discovered, you need to have an element like image enabled in admin for it to work at all. Then you have to stop it from displaying in its regular location. As a guide, the code that runs the Gallery Category mod does this, and adjusts the output to eliminate "empty slots" in the display.

It can also be done without php code modifications using only CSS, but the necessary "adjacent sibling" selector is not supported by IE6, so efficient techniques are not yet practical to use.

Look at the Add CSS Classes for Table Columns thread (especially posts 1, 8, 11 and 21) for a way to allow addressing individual parts of the product listing. The suggestion in post 21 gives the most elegant results of all.

[madfastride]

Thanks, gjh42

So for anyone looking for a solution to something similar this is what I did... I cut and pasted the two extra pieces of PRODUCT_LIST_**** into my PRODUCT_LIST_NAME area that I wanted. I then wrapped div tags around these in order to work with them in a DIV CSS environment. This is pretty basic and is mentioned in Layout of products . Then I kept my two columns on (in the admin section) and used an ID tags to reference them (instead of the numbering system derived in the Add CSS Classes for Table Columns thread) . I changed something very similar to this bit of code in three different places in my product_listing.php page

'params' => 'class="productListing-data"', 

to look like this

'params' => 'class="productListing-data" id="'.$column_list[$col].'"', 

this gives a long but effective td tag like this for all my columns.

<td class="productListing-data" id="PRODUCT_LIST_IMAGE">

This gets away from numbering and if you go and change your admin options later will not effect the css changes you have already worked on. the ID could easily be shortened using something like rtrim().This way I used a little CSS to hide certain columns and allow my images to work properly in the PRODUCT_LIST_NAME column.

#PRODUCT_LIST_IMAGE {
display:none;
}

Thanks
E

[gjh42]

Very nice explanation of the details in one place.
Your method of making names for the individual columns is more elegant than what I did (adding e.g.
$lc_class = 'pLModel'; to each case, then making
'params' => 'class="' . $lc_class . '"',) though as you pointed out it makes a more bulky name.
One thing you should change is making the name an id. ID's are supposed to be unique on a page, and these names will be repeated multiple times, so the name should be a class.

[madfastride]

Yes I understand the ID thing but there are a couple things, and in my very limited knowledge (I'm new to web design) that make me want to go with that anyway. First of all it just makes it easier although not technically correct (LAZY) but second of all the ID tag some how overrides the ID tag already assigned to the labels in the heading part of the table. If you use a class here EX. class="productListing-heading_IMAGE" the ID overrides it and the label and therefor the entire column ends up showing up. I know having two IDs in one tag is very very sloppy and that having IDs repeated is against clean HTML but I just can't work it out right now. Although you do seem to have something else going on that I'll look at tomorrow.

[gjh42]

Make your selectors more specific and they will override the other id.
Like:

#productListing .PRODUCT_LIST_IMAGE {}

[madfastride]

Thanks,
learned a little bit of CSS today. I used an explode() to create a more usable class and then used the little bit of CSS that you showed me to set the display to none. works great.

[madfastride]

Okay so this isn't done yet. On my live site and my testing server the modification disables the "add selected products to cart" buttons. Also putting a number in the field and hitting enter no longer works. Seems to me like changing the class names or something similar ruined whatever code guides this... Any Ideas???

[gjh42]

Not knowing everything you have done, it's hard for me to comment.
If you post your product_listing.php in code tags [php] and [/php] I might be able to see what is causing the problem.

[madfastride]

So I looked at the final code output and it's really weird I can't distinguish any difference in the HTML form between the original and modified....

<?php
/**
 * product_listing module
 *
 * @package modules
 * @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: product_listing.php 4655 2006-10-02 01:02:38Z ajeh $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$show_submit = zen_run_normal();
$listing_split = new splitPageResults($listing_sql, MAX_DISPLAY_PRODUCTS_LISTING, 'p.products_id', 'page');
$how_many = 0;

$list_box_contents[0] = array('params' => 'class="productListing-rowheading"');

$zc_col_count_description = 0;
$lc_align = '';
for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
  switch ($column_list[$col]) {
    case 'PRODUCT_LIST_MODEL':
    $lc_text = TABLE_HEADING_MODEL;
    $lc_align = '';
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_NAME':
    $lc_text = TABLE_HEADING_PRODUCTS;
    $lc_align = '';
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_MANUFACTURER':
    $lc_text = TABLE_HEADING_MANUFACTURER;
    $lc_align = '';
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_PRICE':
    $lc_text = TABLE_HEADING_PRICE;
    $lc_align = 'right' . (PRODUCTS_LIST_PRICE_WIDTH > 0 ? '" width="' . PRODUCTS_LIST_PRICE_WIDTH : '');
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_QUANTITY':
    $lc_text = TABLE_HEADING_QUANTITY;
    $lc_align = 'right';
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_WEIGHT':
    $lc_text = TABLE_HEADING_WEIGHT;
    $lc_align = 'right';
    $zc_col_count_description++;
    break;
    case 'PRODUCT_LIST_IMAGE':
    $lc_text = TABLE_HEADING_IMAGE;
    $lc_align = '';
    $zc_col_count_description++;
    break;
  }

  if ( ($column_list[$col] != 'PRODUCT_LIST_IMAGE') ) {
    $lc_text = zen_create_sort_heading($_GET['sort'], $col+1, $lc_text);
  }


    $class_mod = explode("_",$column_list[$col]);
  $list_box_contents[0][$col] = array('align' => $lc_align,
                                      'params' => 'class="productListing-heading-'.$class_mod[2].'"',
                                      'text' => $lc_text );
}

if ($listing_split->number_of_rows > 0) {
  $rows = 0;
  $listing = $db->Execute($listing_split->sql_query);
  $extra_row = 0;
  while (!$listing->EOF) {
    $rows++;

    if ((($rows-$extra_row)/2) == floor(($rows-$extra_row)/2)) {
      $list_box_contents[$rows] = array('params' => 'class="productListing-even"');
    } else {
      $list_box_contents[$rows] = array('params' => 'class="productListing-odd"');
    }

    $cur_row = sizeof($list_box_contents) - 1;

    for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
      $lc_align = '';

      switch ($column_list[$col]) {
        case 'PRODUCT_LIST_MODEL':
        $lc_align = '';
        $lc_text = $listing->fields['products_model'];
        break;
        case 'PRODUCT_LIST_NAME':
        
                        if ($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $lc_text = '';
        } else {
          if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          } else {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          }
        }
        /// Eo Image
                
        
        ///Begin origonal NAME content
        
        $lc_text .= '<br />';
        $lc_align = '';
        if (isset($_GET['manufacturers_id'])) {
          $lc_text .= '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>' ;
        } else {
          $lc_text .= '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>';
        }
        
        
        ///Eo Name Content
        /////price
        
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
        $lc_align = '';
        $lc_text .=  '<div class="price">'.$lc_price;

        // more info in place of buy now
        $lc_button = '';
        if (zen_has_product_attributes($listing->fields['products_id']) or PRODUCT_LIST_PRICE_BUY_NOW == '0') {
          $lc_button = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . MORE_INFO_TEXT . '</a>';
        } else {
          if (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0) {
            if (
                // not a hide qty box product
                $listing->fields['products_qty_box_status'] != 0 &&
                // product type can be added to cart
                zen_get_products_allow_add_to_cart($listing->fields['products_id']) != 'N'
                &&
                // product is not call for price
                $listing->fields['product_is_call'] == 0
                &&
                // product is in stock or customers may add it to cart anyway
                ($listing->fields['products_quantity'] > 0 || SHOW_PRODUCTS_SOLD_OUT_IMAGE == 0) ) {
              $how_many++;
            }
            // hide quantity box
            if ($listing->fields['products_qty_box_status'] == 0) {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            } else {
              $lc_button = TEXT_PRODUCT_LISTING_MULTIPLE_ADD_TO_CART . "<input type=\"text\" name=\"products_id[" . $listing->fields['products_id'] . "]\" value=\"0\" size=\"4\" />";
            }
          } else {
// qty box with add to cart button
            if (PRODUCT_LIST_PRICE_BUY_NOW == '2' && $listing->fields['products_qty_box_status'] != 0) {
              $lc_button= zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($listing->fields['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product&products_id=' . $listing->fields['products_id']), 'post', 'enctype="multipart/form-data"') . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($listing->fields['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_draw_hidden_field('products_id', $listing->fields['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</form>';
            } else {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            }
          }
        }
        $the_button = $lc_button;
        $products_link = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . MORE_INFO_TEXT . '</a>';
        $lc_text .= '<br />' . zen_get_buy_now_button($listing->fields['products_id'], $the_button, $products_link) . '<br />' . zen_get_products_quantity_min_units_display($listing->fields['products_id']);
        $lc_text .= '<br />' . (zen_get_show_product_switch($listing->fields['products_id'], 'ALWAYS_FREE_SHIPPING_IMAGE_SWITCH') ? (zen_get_product_is_always_free_shipping($listing->fields['products_id']) ? TEXT_PRODUCT_FREE_SHIPPING_ICON . '<br />' : '') : '');
        $lc_text .= '</div>';
        //////// Eo Price
        /////////Begin Image
        

        
        
        
        
        break;
        case 'PRODUCT_LIST_MANUFACTURER':
        $lc_align = '';
        $lc_text = '<a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>';
        break;
 //     case 'PRODUCT_LIST_PRICE':

        //break;
        case 'PRODUCT_LIST_QUANTITY':
        $lc_align = 'right';
        $lc_text = $listing->fields['products_quantity'];
        break;
        case 'PRODUCT_LIST_WEIGHT':
        $lc_align = 'right';
        $lc_text = $listing->fields['products_weight'];
        break;
        //case 'PRODUCT_LIST_IMAGE':
        //$lc_align = 'center';
        if ($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $lc_text .= '';
        } else {
          if (isset($_GET['manufacturers_id'])) {
            $lc_text .= '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          } else {
            $lc_text .= '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), ($_GET['cPath'] > 0 ? 'cPath=' . $_GET['cPath'] . '&' : '') . 'products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          }
        }
        //break;
      }
    $class_mod = explode("_",$column_list[$col]);
      $list_box_contents[$rows][$col] = array('align' => $lc_align,
                                              'params' => 'class="productListing-data-'.$class_mod[2].'"',
                                              'text'  => $lc_text);
    }

    // add description and match alternating colors
    //if (PRODUCT_LIST_DESCRIPTION > 0) {
    //  $rows++;
    //  if ($extra_row == 1) {
    //    $list_box_description = "productListing-data-description-even";
    //    $extra_row=0;
    //  } else {
    //    $list_box_description = "productListing-data-description-odd";
    //    $extra_row=1;
    //  }
    //  $list_box_contents[$rows][] = array('params' => 'class="' . $list_box_description . '" colspan="' . $zc_col_count_description . '"',
    //  'text' => zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION));
    //}
    $listing->MoveNext();
  }
  $error_categories = false;
} else {
  $list_box_contents = array();

  $list_box_contents[0] = array('params' => 'class="productListing-odd"');
  $list_box_contents[0][] = array('params' => 'class="productListing-data-'.$class_mod[2].'"',
                                              'text' => TEXT_NO_PRODUCTS);

  $error_categories = true;
}

if (($how_many > 0 and $show_submit == true and $listing_split->number_of_rows > 0) and (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART == 1 or  PRODUCT_LISTING_MULTIPLE_ADD_TO_CART == 3) ) {
  $show_top_submit_button = true;
} else {
  $show_top_submit_button = false;
}
if (($how_many > 0 and $show_submit == true and $listing_split->number_of_rows > 0) and (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART >= 2) ) {
  $show_bottom_submit_button = true;
} else {
  $show_bottom_submit_button = false;
}



  if ($how_many > 0 && PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0 and $show_submit == true and $listing_split->number_of_rows > 0) {
  // bof: multiple products
    echo zen_draw_form('multiple_products_cart_quantity', zen_href_link(FILENAME_DEFAULT, zen_get_all_get_params(array('action')) . 'action=multiple_products_add_product'), 'post', 'enctype="multipart/form-data"');
  }

?>