Changing the layout of products

[thebesttimi]

Hi,

 

Im new to prestashop and I downloaded the free default theme and I was wondering how do I change the layout of how the items display. I wanted to add more items but display them horizontally that way I can fit more items on a page without having to scroll so much.....I hope I make sense...I'd appreciate any help pleasee! Thank you

[Paulito]

Good morning

 

Read this tutorial to see if it helps you

 

http://mypresta.eu/en/art/tag/grid/

 

Paul

[thebesttimi]

Thank you sooo much for the quick response. Im trying to open  /themes/default/product-list.tpl. in my file manager but it just doesnt let me open it.

[vekia]

hello

 

what you mean by 

 

 

but it just doesnt let me open it.

what kind of file manager you use? what you see instead of file contents?

[thebesttimi]

It worked!! Thank you soooo much!!! Bless you

[thebesttimi]

Is there a way I can take the grey shadow out when my mouse is on the product.? and I dont think the add to cart link is working coz when I add to cart it doesnt do anything

[ruslan1984]

Hi to all!

thebesttimi is right, the "add to cart" works but it adds products after a delay, how can this be fixed? Can it be done as it does by default, when image like moves to the cart?

Thank you in advance for your answers. 

Edited November 5, 2013 by ruslan1984 (see edit history)

[vekia]

hello

 

can you share url to your website? (both ruslan and thebesttimi please)

[ruslan1984]

Hi Vekia, 

 

Unfortunately, I can't. I'm doing this locally, before going online. 

Any other thoughts how to fix that? 

Currently I removed the button "add to cart", left only "details":)

[vekia]

you probably haven't got animation, am i right? this is main case i think, that's why you think that it works a bit longer

[ruslan1984]

I assume I have animation as the regular "add to cart" animation works just as before, and now having changed the layout, the products which I add to the cart via changed layout option,  appear in the cart only when I refresh the page or go to another page of the website. 

 

Unfortunately, I can't provide a URL, as I'm working on the website locally, before going live. 

Any other advices? 

Appreciate any assistance. 

[ruslan1984]

How can I apply the same effect to the featured products on the home page?

 

I use version 1.5.6.0 default theme, I tried solutions from this thread: http://www.prestashop.com/forums/topic/284736-solved-how-to-change-design-of-new-products-block-on-homepage/?hl=%2Bnew+%2Bproducts&do=findComment&comment=1442160

 

but everything is awry

 

Thank you in advance

Edited November 6, 2013 by ruslan1984 (see edit history)

[ruslan1984]

I've figured it out, silly me, sorry guys

[paymon12]

hi there i need the grid code for my site as im no good on coding it needs to be so i can just copy and past it in my tpl 

cheers 

[Paulito]

Good morning

 

You want "grid style" for category pages?

 

or something else

 

Paul

[paymon12]

paul  i have list style at the min so yeah grid is what im after cheers

[Paulito]

Hello again

 

Their are two great Tutorials you can read below:

 

http://nemops.com/grid-display-prestashop-1-5/

 

http://mypresta.eu/en/art/tag/grid/

 

Both are easy to implement

 

just check that they are suitable for your ps version, I use ps 1.5.5 and they work for me

 

Hope this helps

 

Paul

[vekia]

tutorials mentioned by Paulito is a kind of copy paste

[paymon12]

im also using this code to hide my sub cats but will this code for the grids un hide my sub cats

ul#product_list {

list-style-type: none

}

#product_list li {

margin-bottom: 14px;

padding: 12px 8px;

border: 1px solid #eee;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px

}

#product_list li a {

color: #374853;

text-decoration: none

}

 

#product_list li .left_block {

float:left;

padding-top:58px;

width:15px

}

#product_list li .left_block  .compare label {display:none;}

 

#product_list li p.compare input {

vertical-align: text-bottom

}

 

#product_list li .center_block {

   float: left;

padding:0 7px;

   width: 342px;/* 356 */

border-right:1px dotted #ccc

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

margin-right: 14px;

border: 1px solid #ccc

}

#product_list a.product_img_link img {

display: block;

vertical-align: bottom

}

#product_list li span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff;

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform:rotate(45deg);

background-color: #990000;

transform: rotate(45deg); 

-ms-transform: rotate(45deg); /* Newer browsers */

}

 

.ie8 #product_list li span.new{top:111px;right:0;width:94%}

.ie7 #product_list li span.new {top:111px;right:0;width:94%}

#product_list li h3 {

padding:0 0 10px 0;

font-size:13px;

color:#000

}

#product_list li a {

color: #000;

text-decoration: none;

}

 

#product_list li p.product_desc {

overflow: hidden;

padding:0;

line-height:16px;

}

#product_list li p.product_desc,

#product_list li p.product_desc a {

color:#666;

}

 

#product_list li .right_block {

position:relative;

   float: left;

   width: 145px;

   text-align: right

}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

position:absolute;

top:0;

right:0;

display: inline-block;

font-weight: bold;

padding: 1px 5px;

font-size: 10px;

color: #fff;

text-transform: uppercase;

background: none repeat scroll 0 0 #9B0000

}

#product_list li .online_only {

margin:0 0 10px 0

}

#product_list li .content_price {

margin:26px 0 15px 0;

}

#product_list li .price {

display: block;

margin-bottom: 15px;

font-weight:bold;

font-size: 18px;

color:#990000

}

#product_list li span.availability {

color: #488C40

}

#product_list li .ajax_add_to_cart_button {

padding-left: 20px

}

#product_list li .ajax_add_to_cart_button span {

display: block;

position: absolute;

top: -1px;

left: -12px;

height: 26px;

width: 26px;

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

}

#product_list li .lnk_view {

display: block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

#product_list li .lnk_view:hover {text-decoration:underline}

[vekia]

if it is possible please share url to your website, it will be much easier to help then,

[paymon12]

i don't have many items listed yet as still working on site but url is http://www.elboutique.co.uk

[vekia]

i still see default product list

[paymon12]

i will try this again 

[paymon12]

iv'e tryed them code a few times now and nothing is happening ???

[paymon12]

http://www.elboutique.co/index.php?id_category=3&controller=category&id_lang=1  something wrong with code 

[paymon12]

anyone know how to sort this gird code out 

[vekia]

still the same, no changes.

 

please turn on force compilation and turn off cache

[paymon12]

hi vekia when i used that coding my item messed up.. but I uploaded my back tpl, and .css 

 

what do you mean Turn on Force ?? im really new to all this so really need to be as simple as can be with me and step by steps are needed 

[paymon12]

odd ive some how fixed it cheers for trying help tho 

[vekia]

hello

 

i can confirm, it works now

but you haven't got cart animation now.

what to do?

 

open ajax-cart.js located in modules/blockcart/ directory

 

add additional one parent();  to this code:
 

// add the picture to the cart

var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img');

[paymon12]

ajax-cart.js i cant open that file ? any tips

[vekia]

why you can't open it? what you see when you're trying to edit this file?

[paymon12]

i get this pop up when i try and edit that .js file 

 

 

 

windows Script host

 

line           664

char:        1

Error        'document' is undefined

Code       800A1391

Source:   Microsoft JScript runtime error  

[vekia]

you need to open this file in some text editor, not to double click on it. if you just double click on this file, windows will try to execute the js code. it will not work.

[paymon12]

yes i can now edited that so when number like do i need to edit 

[paymon12]

ok iv'e found the line i needed to edit. can you no look and see if it looks right cheers 

[vekia]

hello

 

you've got wrong code now, take a look:

var $element = $(callerElement).parent();parent().find('a.product_image img,a.product_img_link img');

use this:

var $element = $(callerElement).parent().parent().parent().find('a.product_image img,a.product_img_link img');

will work well then

[paymon12]

i have put in this code var $element = $(callerElement).parent()..parent().parent().find('a.product_image img,a.product_img_link img');

and now i have no affect of item going to the shopping cart... but when you click on add to cart it take me straight to shopping cart summery  

[vekia]

hello

 

are you sure that you pasted this code:

var $element = $(callerElement).parent().parent().parent().find('a.product_image img,a.product_img_link img');

i see doubled dot in your code

[paymon12]

yeah thats working great now cheers  

[paymon12]

hi sorry i just have one more thing to ask is how do i edit this   

[vekia]

thank you for confirmaton

i can confirm, tested your website once again and everything works well now

many thanks for your patience

 

with regards,

Milos