styling product listing pages with column layout grid

Is the debug "echo" still in? It's not possible to tell from the output which process is generating the tables seen on the page.

Is the debug "echo" still in? It's not possible to tell from the output which process is generating the tables seen on the page.

Now I see ordinary prices on every product... and no tables anywhere...

At this moment I have the code we started with (no _list template, etc). The only change is that I've commented out //$rows++;

It seems that it is inputting the description where the discount should be while also grouping the tables at the top. I will leave this as is for a bit so you can look at it this way.

Okay, tables at the top, and an extra instance of the product's name everywhere in the products where there should be a discount table. (The name is the last element processed before the price block, so somehow its content is getting carried over and re-inserted.)

What does the case in your file look like now?

gjh42:

Okay, tables at the top, and an extra instance of the product's name everywhere in the products where there should be a discount table. (The name is the last element processed before the price block, so somehow its content is getting carried over and re-inserted.)

What does the case in your file look like now?

	case 'PRODUCT_LIST_PRICE':
//trying ajeh code

		// $lc_align = 'right';
		$lc_price = $products_discount_type = zen_products_lookup($listing->fields['products_id'], $what_field = 'products_discount_type');
		if ($products_discount_type != 0) {
		//$rows++;
		$products_id_current = (int)$listing->fields['products_id'];
		$quantityDiscounts = array();
		$products_discount_type_from = zen_products_lookup($listing->fields['products_id'], $what_field = 'products_discount_type_from');
		require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_PRODUCTS_QUANTITY_DISCOUNTS));
		require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php');
		}
		else
		{ $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';

		$lc_align = 'right';
		$lc_text = $lc_price;}

//ending ajeh code
//        $lc_text =   ' MSRP ' . $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']), '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>';
            }
          }
        }
        $the_button = $lc_button;
        $products_link = '<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']) . '">' . 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 />' : '') : '');

        break;

That makes sense. The original code outputs the tables at the top, and doesn't insert the (basically empty) $lc_price in $lc_text. Thus, $lc_text still holds the last value it had, which is the name, and that is inserted where the table should go.

Now what if you use the _list file, and make sure you have the assignments right:

        $lc_price = $qdt;}
        }
        else
        { $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';

        $lc_align = 'right';}//end braces here
        $lc_text = $lc_price;

//ending ajeh code 

BTW, I was refreshing the page for the last few posts, and didn't realize that there were new posts going on the next page due to number wrapping while I was refreshing the original:)

Just noticed a typo in my previous post.

$lc_price = $qdt;}

should not have the }

$lc_price = $qdt;

Uh oh....I think we have a winner......:cheers:> gjh42:

    $lc_price = $qdt;}
    }
    else
    { $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';

    $lc_align = 'right';}//end braces here
    $lc_text = $lc_price;

//ending ajeh code

The above had an extra brace after $qdt;
I ended up with
```php
		case 'PRODUCT_LIST_PRICE':
//trying ajeh code

		// $lc_align = 'right';
		$lc_price = $products_discount_type = zen_products_lookup($listing->fields['products_id'], $what_field = 'products_discount_type');
		if ($products_discount_type != 0) {
		//$rows++;
		$products_id_current = (int)$listing->fields['products_id'];
		$quantityDiscounts = array();
		$products_discount_type_from = zen_products_lookup($listing->fields['products_id'], $what_field = 'products_discount_type_from');
		require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_PRODUCTS_QUANTITY_DISCOUNTS));
		require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts_list.php');
        $lc_price = $qdt;
        }
        else
        { $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';

        $lc_align = 'right';}//end braces here
        $lc_text = $lc_price;

//ending ajeh code

I will look over it again, but I think you got it!

Yay!! Happy to see it working right at last. Now just a little styling on the tables so they don't look so old-fashioned:)

Playing with styling... add to your stylesheet

#productQuantityDiscounts table {margin: auto; border: 3px groove #aaddee;}
#productQuantityDiscounts table td {border: 1px inset #bbbbdd; background: #eeeeff;}
#productQuantityDiscounts table tr:first-child>td {border: none; background: #bbccdd;}

Adjust to taste and have fun:)

Or maybe this:

#productQuantityDiscounts table {margin: auto; border:1px solid #8899aa; border-radius: 4px; box-shadow: 2px 2px 3px #88bbcc;}
#productQuantityDiscounts table td {border:1px inset #bbbbdd; border-radius: 2px; background: #eeeeff;}
#productQuantityDiscounts table tr:first-child>td {border:none; background: #bbccdd;}

Anyone attempting to do this please note my observation when trying to replicate this on live site:

It seems as though you also have to have the original tpl_modules_products_quantity_discounts.php saved in the same custom folder as tpl_modules_products_quantity_discounts_list.php to get this to work.

Yes I will hop on the styling in about 5-10 minutes. At minimum I need to center the table, but I've got something important to take care of first ;)

Is this mod in the plugin section?

How is it different from column_layout_grid_2_3_1?

Which mod are you referring to? Several have been discussed in this thread; Flexible Product Listing is now available in Plugins, and that version is based on Column Layout Grid v2.3.1.

I was asking about, "Flexible Product Listing". Would you please point it to me. I can't find it.

Can the "Flexible Product Listing" be insatalled on top of the the column_layout_grid_2_3_1, or column_layout_grid_2_3_1 should be removed. Thanks for your response,

How do I add boxes around the products? So each product is inside a box instead of nothing as it is now.... http://www.pbmarkers.co.nz/index.php?main_page=index&cPath=26_4

You don't appear to be using any version of Column Grid on that site. However, you can turn the divided rows into boxes by adding to your stylesheet```
.productListing-data:first-child {border-left: 1px solid #000000;}
.productListing-data:last-child {border-right: 1px solid #000000;}

I have installed to column add on module but did not like it since there's no boxes around the products. It looks like everything is packed together and text overriding itself.

Is there a way to get boxes around the products when in column mode, as that would look better than the rows with boxes around them.

I did like the code you pasted for me tho, there is boxes around the coulmn's now, cheers for that

Of course you can put boxes around the products in grid mode. It would start like

.centerBoxContentsProducts {border: 1px solid #aabbcc;}

and you would want to modify width, margins, padding, etc. to suit your layout. Seeing it live on your site would let us tell you exact rules to use. Or, you could install the Firefox Web Developer or Firebug extensions to let you see for yourself exactly what needs tweaking and try things out.