Jump to content

Products layout in subcategories


Recommended Posts

Hi,

I posted a message about an hour ago, and I can't find it anywhere... :gulp:
I forgot to give it a title, maybe that's got to do with it not showing up anywhere.
Anyway, sorry if it appears twice, here it is again !:

In my subcategory pages, I want to have my products side by side in a line (maybe 4 products on a line), and not one product under the other as it is now.
I know this topic has been discussed already, but I can't find the thread again now that I need it!

I've spent most of the afternoon on this, and I'm still as stuck as when I started... :long:

Can anybody help please?

Thanks

Pascale :)

Link to comment
Share on other sites

Overwrite the following code in your global.css file should be about line 1500, you will need to edit the colours to match your theme as this is not the default theme.

You will also have to disable the add to cart in your product-list.tpl file.



/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
   background: #FFF;
   border: solid 1px #555;
   padding: 4px;
   height:220px;
   clear:both;
   margin-bottom:0.3em;
   float: left;
   width: 29%;
   height: auto;
   margin-right: 8px;
   clear: none; 
   margin-left:4px;
}
ul#product_list li a {
   text-decoration:none;
   color:#000;
}

ul#product_list a.product_img_link{
   border: solid 1px #d0d3d8;
   float:left;
   margin-right:0.6em;
   margin-left:15px;
   margin-top:30px;
}
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px;}
ul#product_list li .new{
   background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
   border:1px solid #488C40;
   color:white;
   font-size:0.6em;
   font-weight:bold;
   margin:0pt 1em 0pt 0pt;
   padding:0pt 0.4em;
   text-transform:;
   vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; display:none}
ul#product_list li div.center_block{
   float:left;
   width:100%;
}
ul#product_list li div.right_block{
   float:left;
   text-align:center;
   margin-left:2em;
   margin-top:0.5em;
   display:inline;
}
ul#product_list li .discount{
   color:#da0f00;
   text-transform:;
   font-weight:bold;
   display: block;
}
ul#product_list li .on_sale{
   color:#da0f00;
   text-transform:;
   font-weight:bold;
   display: block;
}
ul#product_list li .reduction {
   display: block;
   margin-bottom: 0.3em;
}
ul#product_list li .price{
   display: block;
   font-size: 170%;
   margin-bottom: 0.2em;
}
ul#product_list li span.availability{
   color:#000;
   font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

Hi, i change product-list.tpl like higher and I have one problem. if there products is so many that they do not fill the last line the button next/back are in this line and not under. I apologize for my English and ask for the help. http://images39.fotosik.pl/82/16fa41e7a4159a55med.jpg - it looks like this

/* pagination.tpl */
div.pagination { margin: 1em 0; }
ul.pagination {
list-style: none;
float: left;
}
ul.pagination li {
display: inline;
float: left;
margin-right: 0.3em;
}
ul.pagination li, ul.pagination a, ul.pagination span {
font-weight: bold;
color: #374853;
}
ul.pagination a, ul.pagination span {
border: 1px solid #888;
padding: 0em 0.4em;
display: block;
line-height: 17px;
background: #bdc2c9 url('../img/pagination_bg.gif') repeat-x top right;
}
ul.pagination a { text-decoration: none; }
ul.pagination li.current span {
background-color: #595a5e;
background-image: url('../img/pagination-bg-current.gif');
color: white;
border: 1px solid #595a5e;
}
ul.pagination li.truncate {
padding: 0.3em;
background: none;
}
#pagination_previous a, #pagination_previous span, #pagination_next a, #pagination_next span {
background-image: url('../img/pagination-prevnext-bg.gif');
border: none;
line-height: 19px;
border-color: #d0d1d5;
border-style: solid;
border-width: 0 1px;
}
#pagination_previous {
background: transparent url('../img/pagination-prev-border.gif') no-repeat top left;
padding-left: 6px;
}
#pagination_previous a, #pagination_previous span {
border-left: none;
}
#pagination_next {
background: transparent url('../img/pagination-next-border.gif') no-repeat top right;
padding-right: 6px;
}
#pagination_next a, #pagination_next span { border-right: none; }
li.disabled span {
color: #888;
background-color: #f1f2f4;
}

form.pagination { text-align: right; }
form.pagination label {
line-height: 1.4em;
vertical-align: bottom;
float:right;
margin-left: 0.3em;

}
form.pagination select { float:right; }
form.pagination select option{
font-size: 0.9em;
padding-right: 1em;
}
form.pagination input{ float:right; }

6027_GHUQhrsKA96XhuyeWvKY_t

Link to comment
Share on other sites

  • 1 month later...

For aegir:
i have the same problme, for resolve it i add a






before {/if}

i found another bug whit the product in sale or lower price... i resolve it too... i put all my product-list.tpl:

>
{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}




{if $product.new == 1}{l s='new'}{/if}{$product.name|truncate:35|escape:'htmlall':'UTF-8'}

{$product.description_short|strip_tags:'UTF-8'|truncate:360}


               {if $product.on_sale}

{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}

{l s='Price lowered!'}
               {else}



               {/if}

{convertPrice price=$product.price}
{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}
{l s='View'}




   {/foreach}
</ul>
<br><br><br><br><br>   <!-- /Products list --><br>{/if



the problem now for me is to change the number of the product display from 10, 20, 30 to 9, 18, 27...

idea?

sorry for my bad english!

best regard

Simone

Link to comment
Share on other sites

Hay Guys, i have another working solution. Why dont we utilize the grid layout from featured product module ? This layout its exactly what we need, and its also support ajax function add to cart. Examine product-list.tpl and .tpl file in module folder. Sorry i cant attach file because i'm using phone.
Thanks.

Link to comment
Share on other sites

For aegir:
i have the same problme, for resolve it i add a





before {/if}

i found another bug whit the product in sale or lower price... i resolve it too... i put all my product-list.tpl:

>
{if isset($products)}
   <!-- Products list -->
</pre>
<ul>
   {foreach from=$products item=product name=products}




{if $product.new == 1}{l s='new'}{/if}{$product.name|truncate:35|escape:'htmlall':'UTF-8'}

{$product.description_short|strip_tags:'UTF-8'|truncate:360}


               {if $product.on_sale}

{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product.reduction_from))}

{l s='Price lowered!'}
               {else}



               {/if}

{convertPrice price=$product.price}
{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}
{l s='View'}




   {/foreach}
</ul>
<br><br><br><br><br>   <!-- /Products list --><br>{/if



the problem now for me is to change the number of the product display from 10, 20, 30 to 9, 18, 27...

idea?

sorry for my bad english!

best regard

Simone



Which file that I've to add before {/if ?





Link to comment
Share on other sites

  • 2 months later...
  • 2 months later...
  • 2 years later...

Overwrite the following code in your global.css file should be about line 1500, you will need to edit the colours to match your theme as this is not the default theme.

You will also have to disable the add to cart in your product-list.tpl file.

/* product-list.tpl */
ul#product_list{ margin-top:2em; list-style-type:none; }
ul#product_list li {
background: #FFF;
border: solid 1px #555;
padding: 4px;
height:220px;
clear:both;
margin-bottom:0.3em;
float: left;
width: 29%;
height: auto;
margin-right: 8px;
clear: none;
margin-left:4px;
}
ul#product_list li a {
text-decoration:none;
color:#000;
}
ul#product_list a.product_img_link{
border: solid 1px #d0d3d8;
float:left;
margin-right:0.6em;
margin-left:15px;
margin-top:30px;
}
ul#product_list li h3{ margin:0.4em 0; width:160px;padding-bottom:2px;height:10px;}
ul#product_list li .new{
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #488C40;
color:white;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
text-transform:;
vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; display:none}
ul#product_list li div.center_block{
float:left;
width:100%;
}
ul#product_list li div.right_block{
float:left;
text-align:center;
margin-left:2em;
margin-top:0.5em;
display:inline;
}
ul#product_list li .discount{
color:#da0f00;
text-transform:;
font-weight:bold;
display: block;
}
ul#product_list li .on_sale{
color:#da0f00;
text-transform:;
font-weight:bold;
display: block;
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em;
}
ul#product_list li .price{
display: block;
font-size: 170%;
margin-bottom: 0.2em;
}
ul#product_list li span.availability{
color:#000;
font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }

Hello,

I tried to follow your instructions, but in my global. css I didn't find any indications to product list... I tried to insert your code the same, but it didn't resolve the problem. Please let me know how can I do. Thank you

Link to comment
Share on other sites

  • 5 years later...

Hi,

 

I am using PS 1.7.2, When I click on the next button at the bottom of the site it does not go to the top of the next page.  Why I have gone into pagination.tpl but cannot seem to fix the error.  Can some one help me with this I have searched and found nothing, maybe not searched for the right thing!  this is the closest I have come to a solution.

 

thanks in advance Craig.

Link to comment
Share on other sites

Hi guys,

 

I have a similar problem I have already asked about.  When my products load in page its great, when you reach the bottom of the page and click next.  It then loads the next page but at the botoom instead of the top!  WHY?  I am looking through various code and cannot see an obvious issue.  Has anyone else had this issue?  How do I fix this issue?  Its not major but I would like it to load to the top of the next page.  thanks in advance,

 

Craig.

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...