Column Layout Grid v2.x Support

I am so excited about this plug in.

I just installed the current Column layout grid on 1.5.5f. I ran sql from tools, I can see it in my admin.

I uploaded includes/languages/english/extra_definitions/YOUR_TEMPLATE/column_layout_grid_defines.php into my_template folder
I added this to the bottom of the css page
.centerBoxContentsProducts { padding: 1em 0; }

In admin:

Product Listing - Layout Style columns
Product Listing - Columns Per Row 4
Product Listing - Layout Style - Customer Control 0
Product Listing - Show Sorter for Columns Layout 0

https://www.uesakausa.com/index.php?main_page=index&cPath=1_5

cleared cache and it still is in rows. Any ideas where I may have goofed?

Thanks in advance for your help.

MaxBodine:

I am so excited about this plug in.

I just installed the current Column layout grid on 1.5.5f. I ran sql from tools, I can see it in my admin.

I uploaded includes/languages/english/extra_definitions/YOUR_TEMPLATE/column_layout_grid_defines.php into my_template folder
I added this to the bottom of the css page
.centerBoxContentsProducts { padding: 1em 0; }

In admin:

Product Listing - Layout Style columns
Product Listing - Columns Per Row 4
Product Listing - Layout Style - Customer Control 0
Product Listing - Show Sorter for Columns Layout 0

https://www.uesakausa.com/index.php?main_page=index&cPath=1_5

cleared cache and it still is in rows. Any ideas where I may have goofed?

Thanks in advance for your help.

I would assume that the file doing the work - includes/modules/YOUR_TEMPLATE/product_listing.php is not seeing or using the database switches/flags.

And/Or **

includes/templates/YOUR_TEMPLATE/tpl_modules_product_listing.php** isn't publishing what may or may not have been found in the previously mentioned product_listing.php.

Another common problem is the new files aren't overwritten on the server, all FTP software has timeout - memory problems natively. So be sure that the new merged version is in your template folder on the server.

THANK YOU twitchtoo for the quick response!

FTP bleep was the issue, missed some files.

Now looking at this I would like to move all the text under the images.

https://www.uesakausa.com/index.php?main_page=index&cPath=1_5

I searched for itemTitle and it brought up
temp/product_listing.php
temp/templates/tpl_modules_products_all_listing.php
temp/templates/tpl_modules_products_featured_listing.php
temp/templates/tpl_modules_products_new_listing.php
templates/responsive_classic/templates/tpl_modules_products_all_listing.php
/responsive_classic/templates/tpl_modules_products_featured_listing.php
templates/responsive_classic/templates/tpl_modules_products_new_listing.php

Opened the first one and found several break statements. I am assuming I would need to put a break or p tag in the $lc_text definitions...? First I don't know if that is the solutions and second there are so many of them I am worried if I put them in all of them I am creating a can of worms.

It is responsive and I feel there has to be a better option.

Any ideas?

Thanks in advance for any help!

MaxBodine:

THANK YOU twitchtoo for the quick response!

FTP bleep was the issue, missed some files.

Now looking at this I would like to move all the text under the images.

https://www.uesakausa.com/index.php?main_page=index&cPath=1_5

I searched for itemTitle and it brought up
temp/product_listing.php
temp/templates/tpl_modules_products_all_listing.php
temp/templates/tpl_modules_products_featured_listing.php
temp/templates/tpl_modules_products_new_listing.php
templates/responsive_classic/templates/tpl_modules_products_all_listing.php
/responsive_classic/templates/tpl_modules_products_featured_listing.php
templates/responsive_classic/templates/tpl_modules_products_new_listing.php

Opened the first one and found several break statements. I am assuming I would need to put a break or p tag in the $lc_text definitions...? First I don't know if that is the solutions and second there are so many of them I am worried if I put them in all of them I am creating a can of worms.

It is responsive and I feel there has to be a better option.

Any ideas?

Thanks in advance for any help!

I've already done that in the Twitchtoo Code Shop Template here:
http://twitchtoo.com/tR_codeSHOP/index.php?main_page=index&cPath=2

It's done with CSS only.

In FireFox you can right click and View Code
Then click the .css links for the newest version.

Make yourself a file and compare it to your own. There are a lot of little changes to remove the floats and center everything so that it looks and works the same on all platforms/devices.

I continue to install new modules and make minor changes to the code shop so the live site always has the newest stable version.

Or, you could email me and I could send you a zip of the css folder :)

When unzipping the file i get Includes and Your Template in the same level, am i missing something?

MaxBodine:

Now looking at this I would like to move all the text under the images.

I don't believe you need to make file changes.

In Admin > Configuration > Product Listing > Display Product Name - the value corresponds to the postion. I'm pretty sure this used to be explained in the comments, no more though. From memory, valid entries are 0,1,2,3 you can also apply these to the other elements to be displayed. Experiment with them to see their effect. I suspect that, depending on the values of the other elements, Display Product Name = 2 will place the name directly below the image.

Edit: just looked at your link and you seem to have resolved the issue.

Although I often forget, like now, I do sometimes find that the Zen Cart Wiki is a useful source of information. An explanation of how to control the appearance of the Product Listing pages can be found on this wiki page

Is there a clear instruction on how to install this addon?

TamyA:

Is there a clear instruction on how to install this addon?

Yes they are included in the install package - ColumnGridLayout_for_155f-instructions.txt

You should see the /includes folder, install instructions and the GNU license in the Zen Cart Plugin - Download Latest

As per this post and follow up:
https://www.zen-cart.com/showthread.php?219735-Responsive-Classic-%28built-in-to-Zen-Cart-v1-5-5%29-Support-Thread&p=1348505#post1348505

To correct the problem of product listing *alignment *issues on mobile/responsive landscape view after installing this **CGL for 1.55f the following change will be added to the future release I would advise you to make the change to your site now:
In your CSS template specific files change the height: 100%; **for all instances of .list-image to **max-height: 100%; **(especially the responsive_mobile.css)

As a result of CSS updates with the product listing and other ZC admin settings you may see the categories listed in a column that does not adhere to the parent display block CSS.

To fix this we can remove the inline php - css styling injection here:

includes/modules/YOUR_TEMPLATE/category_row.php

line 39
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' '** . 'style="width:' . $col_width . '%;"',**

changes to this:
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' '** ,**

Using responsive_classic template.

**Note: **If your *custom *template relied on the hard code this may or may not be a 'fix' for you.

twitchtoo:

As a result of CSS updates with the product listing and other ZC admin settings you may see the categories listed in a column that does not adhere to the parent display block CSS.

To fix this we can remove the inline php - css styling injection here:

includes/modules/YOUR_TEMPLATE/category_row.php

line 39
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' '** . 'style="width:' . $col_width . '%;"',**

changes to this:
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' '** ,**

Using responsive_classic template.

**Note: **If your *custom *template relied on the hard code this may or may not be a 'fix' for you.I fought this for several days and still got in-line styling no matter what combination of changes I made to anything dealing with categoryListBoxContents. Don't know if your solution above works with strictly categories. Not to that point yet.

However, when the listing is of sub-categories, it just won't work. No matter what you do in category_row.php or product_listing.php, the inline styling still creates a problem. The layout was fine in most portrait scenarios, but the inline height call made landscape into a Salvador Dali-like mess.

What finally worked for me was actually a very simple change. One I found only after backing out of all the changes to css and files.

In the responsive_mobile.css stylesheet, There's a line that deals with center-boxes. You can search for .categoryListBoxContents for the line number in your template's version. Ours is line 45 (should be 39 with unmodified responsive_classic) and ended with..., div.categoryListBoxContents {width:48%!important;height:auto;margin:0;padding:10px 0;}Changing it to the folllowing fixed the layout problem.```
..., div.categoryListBoxContents {width:48%!important;height:auto!important;margin:0;padding:10px 0;}

Now, all looks good for mobile and tablet in both portrait and landscape.

HTH

If anyone is having a problem with the **sort buttons **displaying *incorrectly *in grid/list - I now have the fix for the Responsive Classic 1.55f template!

Included is a development warning from Redoc:
**includes/templates/YOUR_TEMPLATE/templates/tpl_modules_product_listing.php
**```php

<?php // bof Column Layout Grid /** * load the list_box_content template to display the products */ if ($product_listing_layout_style == 'columns') { if (PRODUCT_LISTING_GRID_SORT) { echo "\n" . '<div id="' . 'gridSorter' . 'cat' . $cPath . 'List' . '"' . ' class="tabTable"' . '>' . /*PRODUCT_LISTING_GRID_SORT_TEXT .*/ ''; echo '<div class="productListing-rowheading">' ; for ($col=0;$col<sizeof($grid_sort);$col++) { if ($grid_sort[$col]['text']) echo $grid_sort[$col]['text'] . "\n"; } echo '</div>' . "\n"; } require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); } else {// (PRODUCT_LISTING_LAYOUT_STYLE == 'rows') require($template->get_template_dir('tpl_tabular_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_tabular_display.php'); } // Redoc Note: If you are seeing duplicate sort heading buttons, check admin > configuration > product listing > review sort order of all columns in your list - there can be NO conflicts! // eof Column Layout Grid ?>

**Redoc Note:** If you are seeing duplicate sort heading buttons, check ***Admin > Configuration > Product Listing >*** review sort order of  all columns in your list - there can be **NO conflicts!

**This bugfix has been be added to the next release of Twitch Column Grid Layout for Product Listing I'll have it submitted shortly... :)

Little things...
includes/templates/YOUR_TEMPLATE/CSS/stylesheet.css

make this:
.prod-list-wrap{text-align:center;padding:.8em .6em;clear:both;height:40px;}

look more like this:
.prod-list-wrap{text-align:center;padding:.8em .6em;clear:both;height:5em;}

Now prev/next page and *displaying 1 of ... *will have more room, less chance for overlap

Has any one tried this plugin with ZenCart 1.5.6?

jodean:

Has any one tried this plugin with ZenCart 1.5.6?

Yes, I just installed it on 1.5.6a and it works. A couple of points to consider. Although the steps to edit the files are pretty clear there are a lot of manual replacing/editing. I suggest making backups of each file before editing.

Second, the layout is not easy either. I'm looking for a clean grid of products for a 'Gallery' page and after installing the plugin I have the grid view that I seek. But now I am digging into the templates and the CSS to get just the look and feel.

Perhaps someone in the forum can help? Here is my site. www.paintingbarn.com

If you go to the Gallery page you can see that I'm trying to display a clean page with just thumbnails for each painting/product. The New products page look is what I want for this category. No '...more info' buttons, just clean blocks with the picture and the title.

I'm assuming that I will need to create an 'if' block in the 'product_listing.php' file for this category. In that block I will direct the browser to use the 'tpl_products_new_default.php' for the layout.

Thanks in advance!

SliderCO:

Yes, I just installed it on 1.5.6a and it works. A couple of points to consider. Although the steps to edit the files are pretty clear there are a lot of manual replacing/editing. I suggest making backups of each file before editing.

Second, the layout is not easy either. I'm looking for a clean grid of products for a 'Gallery' page and after installing the plugin I have the grid view that I seek. But now I am digging into the templates and the CSS to get just the look and feel.

Perhaps someone in the forum can help? Here is my site. www.paintingbarn.com

If you go to the Gallery page you can see that I'm trying to display a clean page with just thumbnails for each painting/product. The New products page look is what I want for this category. No '...more info' buttons, just clean blocks with the picture and the title.

I'm assuming that I will need to create an 'if' block in the 'product_listing.php' file for this category. In that block I will direct the browser to use the 'tpl_products_new_default.php' for the layout.

Thanks in advance!

You're right about the clumsy nature of the display, considering that there are both hard coded switches that can be on or off in admin and potentially hard coded module additions to the product listing... there is work to be done with any template out of the box.

These sites consider changing the CSS, instead of the hard code to accomplish a clean product listing display using column layout grid.

Bluu Gnome Gear
https://www.bg-gear.com/store/index.php?main_page=index&cPath=1

Edmonton Grocer
https://edmontongrocer.com/shop/

Sheldrake Automotive
http://sheldrakeautomotive.com/shop/index.php?main_page=index&cPath=3_117_6_19

German Wholesale Parts
http://germanwholesaleparts.ca/

Once the product listing is mastered you can review the new products, featured products and so on (preferred) or direct them to use the product listing page (existing features and future upgrades will need to interact correctly with a one page listing output method)

For pointers simply look at the source stylesheet.css and related files available in your web browser. You can copy the stylesheets into your own site and if the settings are similar for each display item -*** you will see the display cleaned up for a proper gallery :clap:***

I'm using Zen Cart 1.5.6a

When I have the Buy it Now button.. works great.. but if I change it to Add to Cart with Multiples.. the Add to Cart button is not adding to the cart. It just acts like it is.

I'm going to keep looking for the error, but any one have this happen?

Thanks!

brian70809:

I'm using Zen Cart 1.5.6a

When I have the Buy it Now button.. works great.. but if I change it to Add to Cart with Multiples.. the Add to Cart button is not adding to the cart. It just acts like it is.

I'm going to keep looking for the error, but any one have this happen?

Thanks!

I have narrowed it down to HTTPS vs HTTP.. I think there is a syntax error here?

product_listing.php

// qty box with add to cart button
            if (PRODUCT_LIST_PRICE_BUY_NOW == '2' && $listing->fields['products_qty_box_status'] != 0) {
              $lc_button= '<div class="cart-add">' . zen_draw_form('cart_quantity', zen_href_link($_GET['main_page'], 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></div>';
            } else {
              $lc_button = '<div class="cart-add"><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></div>';
            }

brian70809:

I have narrowed it down to HTTPS vs HTTP.. I think there is a syntax error here?

product_listing.php

// qty box with add to cart button
if (PRODUCT_LIST_PRICE_BUY_NOW == '2' && $listing->fields['products_qty_box_status'] != 0) {
$lc_button= '<div class="cart-add">' . zen_draw_form('cart_quantity', zen_href_link($_GET['main_page'], 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></div>';
} else {
$lc_button = '<div class="cart-add"><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></div>';
}

Fixed the problem..  HTTPS needed to be set to TRUE and saved properly with config write permissions set to allow.. sorry for the hassle!