Editing product listing

[THETMZ]

Hi everyone,

I was using Search tool in this forum but was unable to find the answer..
I have couple of questions about product listing.

Q1:
I am using a column_layout_grid_for_product_listing_1.3.8 mod.
It works ok but I can't find how can I change the sequence of fields that are shown in each product box.

Now I have:
IMG
Product name
Price
Add to cart.

Where can I change it to be:
Product name
IMG
Price
Add to cart.

Q2:
I have this sample layout. Now when I click add cart or on product image or on product name - it takes me to "read more" section of a particular product.



I would love to make the whole "square" clickable (i will use JS onmouseover to change it's color) and it should be the same link as if you clicked on product name.

THANK YOU IN ADVANCE.

[kuroi]

You would have to edit the module file that comes with the mod. There's a long line of code towards the bottom that prepares all the contents of each box and pops it into an array ready for outputting elsewhere.

You can tweak this to both change to the order of the data and wrap a link around the entire box.

[gjh42]

1: You can change the layout order in the same place as with the standard listing: admin > Configuration > Product Listing.

2: Making the whole square a link will require some code modification in /includes/modules/your_template/product_listing.php.
You will have to open the link with the first element in the product and close it with the last, and eliminate the other links in the middle. I started doing this, but there are so many complications that it's not a task to perform in a little text window, and I'm not sure it's feasible without eliminating some functions.

Mmmm okay, maybe it is allowable to leave the links inside the listing and wrap another one around the whole box... never tried that.

There is an alternative: a sneaky CSS method which will expand the coverage of one link to cover the whole square, without touching the code at all.
Add this to the bottom of your stylesheet:

.productListing-data h3 {position: relative;}
h3.itemTitle a {position: absolute; width: 400px; height: 100px; top: -5px; left: -150px;}
.listingDescription {padding-top: 2em;}

This takes the title link out of the normal flow of the document, expands it to whatever dimensions you specify, and positions it relative to where the title would normally appear. Since the title is out of the flow and not occupying space for itself, we give the description some top padding to make room for it.

You will have to tweak the numbers to make it fit your situation. (I don't have Column Grid.)
For the hover color, you don't need to use javascript. You can change the background and/or text color of the expanded link with this:

h3.itemTitle a:hover {color: #33ff99; background-color: #ff99bb;}

The text color works fine, but unfortunately, the background color will cover everything else. A trial of z-index on elements didn't work, but some more tweaking may be able to resolve this.

[kuroi]

Oops yes. Glenn is right. For product_listings do as he says (I've been spending too much time working on the front page listings boxes and it's turned my brain to mush)