Showing products in Table order ?

[borislav123]

Hello, people!

 

Showing products in Table order ? Is it possible in the default theme?

 

See the picture what I mean -

 

 

 

 

Here is the site - smilesbg.babayaga-store.eu

Edited March 20, 2013 by borislav123 (see edit history)

[vekia]

you are talking about cart?

if so, it is possible, you have to edit shopping-cart template files located in your template directory: themes/your_theme/shopping-cart.tpl / shopping-cart-product-line.tpl

[borislav123]

Thank you a lot!

 

But I mean products in categories, and on the index page.

[vekia]

so in this case you must edit product-list.tpl file located in your theme directory

[borislav123]

it's a simple HTML template ? So I could easily change it ?

 

Or I have to change some setting in the code?

[vekia]

it is a smarty code, it is like a html but with smarty features.

 

i think that this: http://luckyphq.com/change-list-to-grid-view-product-prestashop/ article will be helpfull for you

[borislav123]

Thank you a lot again!

 

You are so cool! :-)

[felderob]

Hi.
I am trying to make products look like grid as you describe. I have followed this article and gone into product_list.css but mine seems to be different.....pls lmk if you have any advice...
THANKS!!
http://luckyphq.com/change-list-to-grid-view-product-prestashop/ or http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html


This is what I have and this is not what the article has....not sure why



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]

without access to the store is really hard to help

please paste the url if it is possible

[felderob]

http://www.bearbottomclothing.com/

[vekia]

checked it, there is no changes in the source, for the first please turn force compilation on in your prestashop pereferences > performance tab

[felderob]

  On 7/9/2013 at 2:18 PM, vekia said:

checked it, there is no changes in the source, for the first please turn force compilation on in your prestashop pereferences > performance tab

 

Done! Not sure what that does though....

[felderob]

I change the .css file and it makes it a grid but then the .tpl makes the page not accessible.

[vekia]

i checked your website once again, now everything works fine here

grid effect appears well

[felderob]

Yes. I have made the changes to css but did custom changes to tpl....seems to be okay now

[vekia]

thanks for informations

anyway, if you've got any questions related to the "grid" view of products list - feel free to continue discussion here

 

regards