CSS Buttons Wrapping in Product List

bfar2009 · **Joined:** Sat Jul 11, 2009 9:21 pm **Posts:** 50

It's driving me crazy and no matter where I look in the files, I can't figure out why the BUY NOW button is wrapping when you use SHOP BY PRICE or PRODUCT LISTING in rows. I'm using the CSS buttons with the default settings from 6.4.1a in the CRE63_ATS template. I want to have the template as a fixed width (around 974-978px for 1024x768 screens) but then the button "wraps". It only works right when I set the template to 100%, which I don't want to use as the pic looks funny on wider screens (too much white space between them and the infoboxes are too far to the sides, etc.)

Anyone else run into this button problem? I've tested it IE8, Chrome and Firefox 3.6 and it does it in all three...

Help!
Kelly
http://booksforallreasons.us

TheLango · **Joined:** Sun Nov 29, 2009 10:57 am **Posts:** 348

Hi,
It s because the cell's that make up the table listing have no "width" parameters set, so in effect they are dynamic in width, unfortunately, css buttons need either a cell big enough or a style width set.

To resolve, open your product_listing.php file. either in your template includes/modules folder or templates/default/modules.

You will see, 3 sets of case switches, ( case 'PRODUCT_LIST_MODEL':) your only concerned with the first two sets, these are the headers for the listings.

As you have 4 headings on your site, Image, Name, Price and Buy now, you can set these widths as follows:

The first one you come across is case 'PRODUCT_LIST_NAME':
Replace this

Code:

        case 'PRODUCT_LIST_NAME':
          $lc_text = TABLE_HEADING_PRODUCTS;
          $lc_align = '';
          break;

with

Code:

        case 'PRODUCT_LIST_NAME':
          $lc_text = TABLE_HEADING_PRODUCTS;
          $lc_align = '';
          $lc_params = 'width="45%" class="productListing-heading"';
          break;

Note the $lc_params, and the width is set to % and you must add the class. you can change this for a pixel width or a % width.

Do this for the other three listings you have in your header,

Code:

       case 'PRODUCT_LIST_PRICE':
          $lc_text = TABLE_HEADING_PRICE;
          $lc_align = 'right';
          $lc_params = 'width="15%" class="productListing-heading"';
          break;

        case 'PRODUCT_LIST_IMAGE':
          $lc_text = TABLE_HEADING_IMAGE;
          $lc_align = 'center';
          $lc_params = 'width="25%" class="productListing-heading"';
          break;

        case 'PRODUCT_LIST_BUY_NOW':
          $lc_text = TABLE_HEADING_BUY_NOW;
          $lc_align = 'center';
          $lc_params = 'width="15%" class="productListing-heading"';
          break;

Do this in both sets of switches.. the first is for upcoming_products the second for all else.

Next find the following, its right after the second set, only change this one, there is another after the third set you dont need to do.

Code:

    $list_box_contents[0][] = array('align' => $lc_align,
                                    'params' => 'class="productListing-heading"'',
                                    'text' => '&nbsp;' . $lc_text . '&nbsp;');

and replace with

Code:

    $list_box_contents[0][] = array('align' => $lc_align,
                                    'params' => $lc_params,
                                    'text' => '&nbsp;' . $lc_text . '&nbsp;');

Note, if you add extra fields to display in Admin, you will need to amend the above to suit.

This should sort your problem out, just play around with the sizes to suit you best.

bfar2009 · **Joined:** Sat Jul 11, 2009 9:21 pm **Posts:** 50

Wonderful - that fixed it! Thanks so much. (That was driving me batsh*t to say the least...)

Kelly

CRE Loaded Community

CSS Buttons Wrapping in Product List

Who is online

Main Menu

Login

Top Listing

Members Online

Follow Us on Twitter

CRE Loaded Community Chat hosted by CRE Loaded.