Jump to content

[SOLVED] Changing my Product Layout from list, to tiled.. Help?


Recommended Posts

Hi there!

Ok I have spent the better half of my site using the search function, and I havent had much success finding my answer..:)

So if someone could please help, I would be most grateful!

Basically, my current product layout scree has all the items listed down in rows.... like so:

list.jpg

And I want it to be pretty much like this, in a tiled layout fashion..

tiled.jpg

Could someone please be kind enough to write a mini step by step process on how to do this?
Ie. What file to edit, what parameters to change, etc.

I would appreciate it A LOT!!!

Thanks again!:)
Simon

31484_1ds8DJp13ayMw7KcVtFK_t

31485_Jqyg3ojEU1eSaS7AgMYB_t

Link to comment
Share on other sites

Thanks for the reply Rocky!

I tried out the module steps at http://www.freeprestashopmodules.com but I couldnt seem to get it working properly...:(
I was reading some of the comments, and it seems that it possibly doesnt working on the latest version of PrestaShop.

I then looked at the other link, which took me to a previously discussed thread.
It is the same type of problem I am having, though the explanation to do it was pretty rough and not so clear.

I managed to get them into a column format, though all the text and buttons are wonky.
Not sure where the exact parameters are to adjust and neaten it up...

Seem to be on the right track, But i just need to neaten it up somehow. Get the text to be below the picture, and as well have the 'view' and 'add to cart' button visible.

Thanks!

See pic below as to what I mean...

31515_qKiuO3AnbW56u5GqlL16_t

Link to comment
Share on other sites

Thanks John, I will try it again..

would it be possible to keep an eye on this thread in case I need any more help?

And last question, will your module be able to give me the grid layout like the 2nd pic in the first post above?
Just a pic, mini description, availability, price and the add to cart?

Link to comment
Share on other sites

so i REPLACED the Product-list.tpl and I MODIFIED the global.css file with the new code from global.css.css

With that done, I get the following result, which differs between 2 browser i tested on. See pics.

You mentioned to also change and modify a file called 'pagination.php' in the root folder, but after doing a complete file search on the site I cant find the file.?

Cause right now, as it stands, the grid layout looks a bit wonky, and is not uniform between the 2 browsers..

How can I adjust and make it look alright, while being confident that it wont appear wonky between browsers?

Thanks man, I appreciate the help.:)

31576_ZTNFWqer2nzLTCKjwQSR_t

31577_aPN457E0Yr2UL873HtDu_t

Link to comment
Share on other sites

Ok, wow, so magically it all came right! :D

It now looks like the pic attached.

Heading in the right direction, THANKS!

Just a few Q's..

Is there a way to place the descrip right below the pic? Its floating a bit high above the pic for my liking..

And 2nd, is there a way to replace the 'View' button with a 'Add to cart' button?

Thanks again for you help.:)

31579_VaWU3GGg7ehZ5nvRYA8Y_t

Link to comment
Share on other sites

Sorry for all this double posting, but I just hope to be as clear as I can here...


So basically, I want to kind of match the layout of the pic below (from another persons site).

If you could help or assist me with how to get the right layout, that would be awesome, thanks!:)

31608_iMz9ejPRm2M2749TCPwX_t

Link to comment
Share on other sites

Yes I can, it will have to be later today as I have just finished work and now im off to bed as i have been awakr for 25 hours straight and i'm a bit tired.

The reason why the layout changed all of a sudden was probably due to prestashop caching the page.

Link to comment
Share on other sites

Cool thanks,

I replaced the file with the new one, and have gotten this result..

But i remember it was wonky at first last time as well, and sorted itself out magically in a few moments... so will let you know if it comes right.:)

But its the exact layout I want, thanks for your help!:)

By the way, where is that 'pagination.php' file that you mention? Cant seem to find it on my sites directory?

31654_ccDl51VUputvAwWOBubv_t

Link to comment
Share on other sites

ok, so I changed the .css ....

And this is what I got. A bit of mixed results.

In Chrome, nothing seems to look right, but in IE things looks good, expect for the accessories range. (I think maybe the length of the description may have something to do with that?)..

31659_DpAMTsc6bQYnhXIJiOi8_t

Link to comment
Share on other sites

Well could truncate the product title, but then with products that have long names it would cut the name off half way through.

Can you ftp to your site and go to tools/smarty/compile and delete all the files apart from index.php. Then do a ctrl+f5 refrsh and see if that makes any difference in chrome.

Link to comment
Share on other sites

Bizarre... deleted the files like you said, and even restarted my PC (not that if it would make a difference?), and it still doesnt seem to have made a difference..

I dont suppose you have Chrome on your side hey?

Regarding the text though, would it maybe be an idea to make the text a size or two smaller, and not have it bold? If you look at my first post on the first page and at the second pic... the text size for that listing is quite cool.

And do you mean that you are able to truncate text if its too long? I think with smaller text, and a truncating system, there should be enough space to describe the product enough before getting it cut off. The picture itself would do most of the talking anyways.:)

By the way, sorry to keep you busy like this... there dont seem to be that many helpful people on these boards at the moment. So I do appreciate your time and effort.:)
Thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...