Product Listing layout config.

[v.kirk]

i will make this as simple as possible,

my product listing layout currently looks like this...



i want it to look like this....



how would i do that?

[kuroi]

You would create a copy of the product_listing.php file in modules/YOUR_TEMPLATE_NAME directory and edit the layout to that which you want. It's not that difficult, but would require some basic php and CSS skills.

[v.kirk]

ok, i have some basic knowledge with both, i have some web development tools that may even make it easier... idk yet

any other replies are still helpful

[v.kirk]

what parts of it would i change? would it have to be a complete remake? or does anybody already have a code that looks like how i want it?

[kuroi]

It's not a complete remake. More of a tweak in the relevant places. You would probably just leave the MySQL code that extracts info from the database alone and much of the rest of the file would remain as is, so you only really need to concentrate on amending the code that outputs each products details, cutting it down to the info you want and displaying it in a column format. You will find similar code in modules/feature_products.php which already does this.

[Ajeh]

You might peek in the Downloads and find the:

Column Layout Grid for Product Listing

I believe this is in the Other Modules ...

[bryanljtj]

On the product info page I have a picture of the item, then below it I have the price, description and then two attributes, size and color.

How can I move the size and color attributes drop down to the right of the picture? I know it is in a CSS, just not sure which one and what I would change in it.

Thanks in advanced.

Bryan

[gjh42]

Travellers -
/includes/modules/your_template/product_listing.php (the Column Grid version) is where the width of the product display is set. You can find this section

  // Used for Column Layout (Grid Layout) add on module
  $column = 0;    
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 0.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
    }
  }
  // Used for Column Layout (Grid Layout) add on module 

and change as desired (either reduce the 100 or increase the 0.5). This will not by itself give spacing between the products, but it will allow margins to be safely added in the stylesheet.

Another way to get clearance for the description is to add it to the stylesheet. Giving a margin or padding to the whole product will expand the space occupied and cause layout problems, but margins/padding for internal parts of the product will not do this.

h3.itemTitle {margin: 0 0.5em;}/*add this if the product names need clearance*/
.listingDescription {margin: 0 0.5em;}

Adjust the 0.5em as desired for horizontal clearance.

Bryan -
Your question relates to the product info page, not the product listing page. Post this in a new thread, with a link to your site, to get proper attention for it.

[travellers]

Travellers -

Another way to get clearance for the description is to add it to the stylesheet. Giving a margin or padding to the whole product will expand the space occupied and cause layout problems, but margins/padding for internal parts of the product will not do this.

h3.itemTitle {margin: 0 0.5em;}/*add this if the product names need clearance*/
.listingDescription {margin: 0 0.5em;}

Adjust the 0.5em as desired for horizontal clearance.

This did exactly the job required and has tidied up the index perfectly - I'm extremely grateful, gjh. I didn't do the first bit of your reply though, because I'm afraid I didn't understand what you were saying! As long as I haven't introduced a problem elsewhere that I've not found yet, I'm happy with that, but if I did need to do both parts, I'll have to come back and have another go at following what you were getting at in part A!

[gjh42]

Glad it worked for you. You don't need to edit the PHP file if the stylesheet change does what you need.