Flexible product listing CSS Issue

[Empire]

I am in the the process of setting up a new Zen Cart site (v1.3.8a) and am having a problem getting the product listing page to look the way I want it to.

I have installed the "Flexible product listing" add on set to display the products in rows so I can have better control with the layout and have got it close to where I want it but am having some issues with the price and add to cart sections not centering vertically. I am pretty sure it is a CSS issue but am not sure what I need to change.

You can see the site here http://www.gracoworld.com/index.php?...ndex&cPath=1_5

Any help would be greatly appreciated.

[kobra]

I would add some transparent space to the top of your image
Yeah not css nor eloquent but will get it done

[Empire]

Thanks for the reply Kobra I just gave that a shot but it actually just pushed everything down and the price is still sitting to high anyway. If you or anyone else has any other ideas I would be glad to here them.

[niccol]

Well, it is partly a css issue.

Things that are a bit unusual in this bit of the layout are:

1. We are in a table. The vertical align of the cells is at it's default which is align vertically to the center. Changing this is very possible and involves a bit of a code edit. In tpl_tabular_display.php find the line that has the <tr> tag and chang it to something like:

<tr valign=top <?php echo $r_params; ?>>

Evidently that will line all the table cells to the top. At least it gives you something to work off.

2. I was going to make another point but having looked at your source code it turns out it was wrong!

Emulating valign:center in css is notoriously problematic. It is much easier to change the vertical alignment to top and then work with margins to put the elements where you want them to be.

Nik

[kobra]

This is not fully straight forward and you should start following this display starting with the tpl_modules_product_listing.php file which also references tpl_tabular_display.php.
It appears that you have already touched this display as it is not as a default would be

[niccol]

OK . I will clarify in my next post. Food first!

[kdb04d]

It actually looks like a html issue to me the price, form quantity and the amount are in the same <td class="listingPriceCell"> each should have their own then they will center themselves on their own

[Empire]

I did make some changes to the product_listing.php file in 'includes/modules/my_custom_template"

The file as it looks now

    $product_contents = array(); // Used For Column Layout (Grid Layout) Add on module
    $flex_skips = 0; //reset flag for reducing # of columns
	$prev_cell_text = '';
    for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
      $lc_align = '';
      $lc_text = '';
      switch ($column_list[$col]) {
        case 'PRODUCT_LIST_MODEL':
        $lc_text = '<div class="listingModel">' . $listing->fields['products_model'] . '</div>';
		$lc_class = 'listingModelCell';
        break;
        case 'PRODUCT_LIST_NAME':
        $lc_text .= '<h3 class="itemTitle">' . $listing->fields['products_name'] . '</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>';
		$lc_class = 'listingNameCell';
        break;
        case 'PRODUCT_LIST_MANUFACTURER':
        $lc_text .= '<div class="listingManufacturer"><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>' . '</div>';
		$lc_class = 'listingManufacturerCell';
        break;
        case 'PRODUCT_LIST_PRICE':
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '';
        $lc_text .= '<div class="listingPrice">' . $lc_price . '</div>';
		$lc_class = 'listingPriceCell';
        $lc_button = '';

        // more info in place of buy now
        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']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? $_GET['cPath'] : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&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" />' . 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>';
            }
          }
        }

and how it looked before

    $product_contents = array(); // Used For Column Layout (Grid Layout) Add on module
    $flex_skips = 0; //reset flag for reducing # of columns
	$prev_cell_text = '';
    for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
      $lc_align = '';
      $lc_text = '';
      switch ($column_list[$col]) {
        case 'PRODUCT_LIST_MODEL':
        $lc_text = '<div class="listingModel">' . $listing->fields['products_model'] . '</div>';
		$lc_class = 'listingModelCell';
        break;
        case 'PRODUCT_LIST_NAME':
        $lc_text .= '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_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>';
		$lc_class = 'listingNameCell';
        break;
        case 'PRODUCT_LIST_MANUFACTURER':
        $lc_text .= '<div class="listingManufacturer"><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>' . '</div>';
		$lc_class = 'listingManufacturerCell';
        break;
        case 'PRODUCT_LIST_PRICE':
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
        $lc_text .= '<div class="listingPrice">' . $lc_price . '</div>';
		$lc_class = 'listingPriceCell';
        $lc_button = '';

        // more info in place of buy now
        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']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? $_GET['cPath'] : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&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>';
            }
          }
        }

[Empire]

I agree with you kdb04d but unfortunately I do not know what files I need to edit to make the changes.

[niccol]

Yes, I can see that you made some edits to product-listing.php. That is why I had to shut my mouth about my second point. You had already solved it perfectly

The issue with tables is that they take some of the alignment away from the css. A table will default to valign:center which means that the contents of a table cell are vertically centered. Which is fine except that it means that you loose some control over the vertical positioning of elements within the cells. This is pretty well documented.

In some cases it really isn't a problem. With a single line of text in each cell it looks fine. When things get more intricate with divs and images that have heights the results are sometimes unsatisfactory and adjusting the top and bottom margins of the elements contained with the cells doesn't always achieve the desired effect.

One solution to this is to set the valign of the table cells to align to the top of the cell. The advantage of this is that elements then align within the cells in the same way as they would inside a containing <div>. If you are used to styling within divs then this is comforting.

What you loose is the ability to align thing centrally vertically but this usually just means that you have an equally elegant layout but without vertical centering.

What I suggested in the earlier post is editing tpl_tabular_display.php to set the vertical align of all <tr> tags to be valign:top; . This means that every <td> has its contents aligned to the top of the cell. Then the individual elements in the cell can be aligned exactly as if the table cell was a div.

It should be noted that this will apply to all the cells in ALL of zen Cart that use this file as a template. ( I think that this is all of the tables but couldn't swear to it. ) If this is a problem then there is a fairly easy solution to only apply it on one page but that is for another post.

So, how does one give the <tr> tags a valign:top; ?

You need to edit the tpl_tabular_display.php. Preferably the override version of it. You will find it in includes / templates / YOUR TEMPLATE / common / . If it doesn't exist create it by copying the same file from template_default.

On a default version of this file without any previous edits you will find that line 26 reads :

  <tr <?php echo $r_params; ?>>

You need to edit this to read:

  <tr valign=top <?php echo $r_params; ?>>

Save it. Upload it.

Now all the tables in Zen Cart have a valign:top and you can position the elements within the cells using css to style the margins and padding. Although I'd try and stick with margin because of IE6.

Hope that makes more sense.

Nik


ps putting a colored border around individual elements often helps to see what is what. Also the web deleoper add on for firefox is great for this.