Product Listing 'PRODUCT_LIST' override

[rbarbour]

Keep in mind, I've done this but misplaced my bloody notes...

Details:

On the product listing pages using the tabular_layout (/includes/templates/template_default/common/tpl_tabular_display.php).

In the product_listing.php file (/includes/modules/product_listing.php), the columns produced per row is triggered by the admin configuration values set in (ADMIN>CONFIGURATION>PRODUCT LISTING)

Obviously if value == '0', no column appears in the row

I want to override so that if a value == '666', no column appears but the content of the column ($lc_text) does, say below the name and description.

Make sense?

[rbarbour]

Never mind, I figured it out....

[rbarbour]

I'm sure my explanation to "what" and "why" wasn't clear. I'm going to post what I did, maybe someone will see a fault in it or have a better way.

With responsive web design, tables look horrible IMO and not even Bootstrap or Foundation has a good enough fix for this, again IMO.

So if one was wanting to show all table columns (cells) on the product listing page they would set the sort order in ADMIN>CONFIGURATION>PRODUCT LISTING

Display Product Image-------------------------1
Display Product Manufacturer Name------------3
Display Product Model-------------------------4
Display Product Name-------------------------2
Display Product Price/Add to Cart--------------7
Display Product Quantity----------------------5
Display Product Weight------------------------6

The product listing table then becomes:

-----------------------------------------------------------------------
Image | Product Name | Manufacturer | Model | Quantity | Weight | Price
-----------------------------------------------------------------------

Not so easy to display nicely on a "mobile" device

So I created a functions file: recalculate_table_cells.php

<?php
/**
 *
 * @package functions
 * @copyright Copyright 2003-2011 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 NA: $Id: rbarbour zcadditions.com Modified in v1.5.4 $
 *
 */

    function zen_minus_table_cells($minus_cells) {
      global $db;

    $cvt = "select count(*) as total
            from " . TABLE_CONFIGURATION . "
            where configuration_key RLIKE 'PRODUCT_LIST_'
            and configuration_value = '666'";

    $cell_total = $db->Execute($cvt);

    $minus_cells = $cell_total->fields['total'];

    return $minus_cells;

    }

Basically counts all the configuration_key (s) that RLIKE PRODUCT_LIST_ that have a configuration_value of 666

Then in /includes/modules/product_listing.php I added my function to both the for loops:

for ($col=0, $n=sizeof($column_list); $col<$n-zen_minus_table_cells($minus_cells); $col++) { 

So to make it work, I set the sort order in ADMIN>CONFIGURATION>PRODUCT LISTING like so

Display Product Image-------------------------1
Display Product Manufacturer Name------------666
Display Product Model-------------------------666
Display Product Name-------------------------2
Display Product Price/Add to Cart--------------7
Display Product Quantity----------------------666
Display Product Weight------------------------666

The product listing table then becomes:

-----------------------------
Image | Product Name | Price
-----------------------------

It still displays the table cells in order based on the ADMIN>CONFIGURATION>PRODUCT LISTING value set except it removes the table cells with a value off 666

But now, because I want those table cells to display I simple add them below the products name/description like so:

if (PRODUCT_LIST_MODEL > 0 && zen_not_null($listing->fields['products_model'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_MODEL . ': ' . $listing->fields['products_model'];
}

if (PRODUCT_LIST_MANUFACTURER > 0 && zen_not_null($listing->fields['manufacturers_name'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_MANUFACTURER . ': ' . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>';
}

if (PRODUCT_LIST_QUANTITY > 0 && zen_not_null($listing->fields['products_quantity'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_QUANTITY . ': ' . $listing->fields['products_quantity'];
}

if (PRODUCT_LIST_WEIGHT > 0 && zen_not_null($listing->fields['products_weight'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_WEIGHT . ': ' . $listing->fields['products_weight'];
} 

Am I missing something or going about this in the wrong way? Is there an easier way?

[DivaVocals]

I'm sure my explanation to "what" and "why" wasn't clear. I'm going to post what I did, maybe someone will see a fault in it or have a better way.

With responsive web design, tables look horrible IMO and not even Bootstrap or Foundation has a good enough fix for this, again IMO.

So if one was wanting to show all table columns (cells) on the product listing page they would set the sort order in ADMIN>CONFIGURATION>PRODUCT LISTING

Display Product Image-------------------------1
Display Product Manufacturer Name------------3
Display Product Model-------------------------4
Display Product Name-------------------------2
Display Product Price/Add to Cart--------------7
Display Product Quantity----------------------5
Display Product Weight------------------------6

The product listing table then becomes:

-----------------------------------------------------------------------
Image | Product Name | Manufacturer | Model | Quantity | Weight | Price
-----------------------------------------------------------------------

Not so easy to display nicely on a "mobile" device

So I created a functions file: recalculate_table_cells.php

<?php
/**
 *
 * @package functions
 * @copyright Copyright 2003-2011 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 NA: $Id: rbarbour zcadditions.com Modified in v1.5.4 $
 *
 */

    function zen_minus_table_cells($minus_cells) {
      global $db;

    $cvt = "select count(*) as total
            from " . TABLE_CONFIGURATION . "
            where configuration_key RLIKE 'PRODUCT_LIST_'
            and configuration_value = '666'";

    $cell_total = $db->Execute($cvt);

    $minus_cells = $cell_total->fields['total'];

    return $minus_cells;

    }

Basically counts all the configuration_key (s) that RLIKE PRODUCT_LIST_ that have a configuration_value of 666

Then in /includes/modules/product_listing.php I added my function to both the for loops:

for ($col=0, $n=sizeof($column_list); $col<$n-zen_minus_table_cells($minus_cells); $col++) { 

So to make it work, I set the sort order in ADMIN>CONFIGURATION>PRODUCT LISTING like so

Display Product Image-------------------------1
Display Product Manufacturer Name------------666
Display Product Model-------------------------666
Display Product Name-------------------------2
Display Product Price/Add to Cart--------------7
Display Product Quantity----------------------666
Display Product Weight------------------------666

The product listing table then becomes:

-----------------------------
Image | Product Name | Price
-----------------------------

It still displays the table cells in order based on the ADMIN>CONFIGURATION>PRODUCT LISTING value set except it removes the table cells with a value off 666

But now, because I want those table cells to display I simple add them below the products name/description like so:

if (PRODUCT_LIST_MODEL > 0 && zen_not_null($listing->fields['products_model'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_MODEL . ': ' . $listing->fields['products_model'];
}

if (PRODUCT_LIST_MANUFACTURER > 0 && zen_not_null($listing->fields['manufacturers_name'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_MANUFACTURER . ': ' . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>';
}

if (PRODUCT_LIST_QUANTITY > 0 && zen_not_null($listing->fields['products_quantity'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_QUANTITY . ': ' . $listing->fields['products_quantity'];
}

if (PRODUCT_LIST_WEIGHT > 0 && zen_not_null($listing->fields['products_weight'])) {
        $lc_text .= '<br class="clearBoth">';
        $lc_text .= TABLE_HEADING_WEIGHT . ': ' . $listing->fields['products_weight'];
} 

Am I missing something or going about this in the wrong way? Is there an easier way?

Stumbled on this.. did this work for you?? How do you go about making this modified listing only appearing on mobile devices?? Thinking about doing something similar..

[rbarbour]

Most of the DIY components include CSS to handle the tabular layout which already stacks the rows columns

so:
-----------------------------------------------------------------------
Image | Product Name | Manufacturer | Model | Quantity | Weight | Price
-----------------------------------------------------------------------

already becomes:
--------------------
Image |
Product Name |
Manufacturer |
Model |
Quantity |
Weight |
Price
--------------------

If one was want to keep the stock layout on the default responsive version but offer up this on devices where a mobile UA was detected, you could do something like this:

if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
$c = $n -zen_minus_table_cells($minus_cells);
} else {
$c = $n;
}
for ($col=0, $n=sizeof($column_list); $col<$c; $col++) { 

Which is a good idea, allowing you to serve the stock layout on tablet and desktop devices only changing it for mobile devices. I have to admit my original thinking was to simply remove those extra columns altogether and just place the fields under the name/description cause including in the tabular layout side-by-side never looked appealing on even the desktop.

Stumbled on this.. did this work for you?? How do you go about making this modified listing only appearing on mobile devices?? Thinking about doing something similar..

[rbarbour]

To further stress on my thinking:

A table in a responsive design is going to minimize each cell as much as the content within allows it to, so as you can see even on a desktop the name/description and price cell get minimized. CSS buttons will become 2 lines looking crappy as well.

Attachment 16264

but the code I posted allows one to still display that info just in a more modern and cleaner way. IMO

Attachment 16265

[DivaVocals]

Got it.. (I think.. it's early..) will look this over and have a play at some point..