Jump to content

Changing The Number Of products Shown Per Row

Basement1995

By Basement1995
in Core developers

 Share

Recommended Posts

vekia Apprentice

vekia

Posted
Posted

about what part of website you're talking? featured products? (i don't think so)

 

open product_list.css file and decrease width param in:

.grid li {
width: 210px;
float: left;
margin: 20px 30px 0 0;
border-top: 0px solid #e5e5e5;
padding-top: 20px;
}

decrease it to 130px;

 

add there also this:

.grid li img {width:130px; height:auto;}
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

i suggested to use these styles i pasted above.

 

in http://basementdesignerclothing.com/themes/tendance/css/product_list.css

in line 42 you've got: 

.grid li {width:130px;height:auto;} float:left;margin:20px 30px 0 0; border-top:0px solid #e5e5e5; padding-top:20px;}

change it to:

.grid li {
width: 130px;
float: left;
margin: 20px 30px 0 0;
border-top: 0px solid #e5e5e5;
padding-top: 20px;
}

below this, add also new style:

.grid li img {width:130px; height:auto;}
  • Like 1
Link to comment
Share on other sites
  • 1 month later...
alexgarzon Newbie

alexgarzon

Posted
Posted

Hello Vekia, I've trying to do something similar with the default theme.

I already changed the number of columns, but I also need to know how can I modify the number of columns in the FEATURED PRODUCTS    module, cause making a margin only in a predefined number of columns, even though I increase the width of the div.

 

prestashop.jpg

Link to comment
Share on other sites
alexgarzon Newbie

alexgarzon

Posted
Posted

http://mypresta.eu/en/art/tips-and-tricks/how-to-move-image-slider-module-from-home-to-top-in-prestashop.html

 

Hey Vekia, I found that, and I have questions:
 

Is good, but the problem comes when you try to update PrestaShop, it will overwrite the file again, you will lose the change, I wonder if there is a way to make that kind of change, but only affecting the theme files.
 
Thanks again!  
Link to comment
Share on other sites
  • 2 weeks later...
alexgarzon Newbie

alexgarzon

Posted
Posted (edited)

Hey, it's me again, I've been making a lot of changes all over the css files, of modules and theme, and now I don't understand why if I have the homefeatured.tpl file as you said, with a 4 in the right place, I'm getting this result. As you can see there, the module is printing 5 items per row, driving me crazy, I don't know if there is an other place where I have to set the margin or padding, cause as you obviously know, it prints different classes depending on the parameters in the .tpl file...

 

error-foro.jpg

 

I really need your help,  :unsure: I've seen that you have the right answer always! jeje

Edited by alexgarzon (see edit history)
Link to comment
Share on other sites
alexgarzon Newbie

alexgarzon

Posted
Posted

What I need is really simple, I just want to have 4 items per row, and the possibility to have as many rows as the client want, without to destroy the design, you know what I mean... What makes me really  :blink: is that I don't see any change when I increase the number in the tpl file.

  • Like 1
Link to comment
Share on other sites
  • 4 weeks later...
rmiho Newbie

rmiho

Posted
Posted

Hi Vekia,

 

I was trying something similar but not for homefeatured, I am trying for the products displayed in categories.

 

currently it shows 3 products. each block is 31% . I reduced this it 20% and made some space after 3 products. However this doesnt not bring the next products in first row

 

Any clue?

 

thanks in advance.

Link to comment
Share on other sites
rmiho Newbie

rmiho

Posted
Posted (edited)

without url i can't help because you use non-default solution.

 

Hi

 

you can reach to server if you can add the below entry to your local host file.

 

xyz

 

once you connected, click on bags category from the menu

 

Let me know if any issues.

 

Thank you

 

Regards

Edited by rmiho (see edit history)
Link to comment
Share on other sites
rmiho Newbie

rmiho

Posted
Posted

hey I think I figured it out. I had to  make 2 changes. 1 change span4 to span2 in product-list.tpl and the other thing changed was from 3 to 4 in the below.

 

  </div>
                {if $product@iteration%4==0||$smarty.foreach.products.last}
                </div>

 

Thanks any way.
 

Link to comment
Share on other sites
  • 4 months later...
taniacr Rookie

taniacr

Posted
Posted

Is it me or in the new default template, in the file modules/homefeatured/homefeatured.tpl, the code {assign var='nbItemsPerLine' value=4} doesn't exist?

 

All i've got is this:

{counter name=active_ul assign=active_ul}
{if isset($products) && $products}
	{include file="$tpl_dir./product-list.tpl" class='homefeatured tab-pane' id='homefeatured' active=$active_ul}
    
{else}
<ul id="homefeatured" class="homefeatured tab-pane{if isset($active_ul) && $active_ul == 1} active{/if}">
	<li class="alert alert-info">{l s='No featured products at this time.' mod='homefeatured'}</li>
</ul>
{/if}

Solution resides in editing the CSS then right?

Link to comment
Share on other sites
defuzed Newbie

defuzed

Posted
Posted

Hey taniacr,

by new default template do you mean the 1.6 default bootstrap template?

if you mean that one, it's actually pretty simple since the homefeatured.tpl just loads the product-list.tpl.

 

in product-list.tpl there is line 49 (i cropped out a long list of not really relevant code):

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-6 col-md-4{else} col-xs-12 col-sm-4 col-md-3{/if}[snip irrelevant code]">

if you are familiar with the bootstrap grid ( http://getbootstrap.com/css/#grid ) you probably know what to do. If not just edit the "col-" classes to what you like. For example if on medium and large screens you want 3 columns change "col-md-3" to "col-md-4".

 

Hope this helps!

  • Like 1
Link to comment
Share on other sites
defuzed Newbie

defuzed

Posted
Posted

glad i could help :)

 

just an afterthought since i haven't changed anything in product-list.tpl myself. There might be some additional stylings related to classes that i cropped out of line 49 (like "last-in-line" etc.) that might remove margins or whatever. These classes depend on the nbItemsPerLine smarty variables at the top of product-list.tpl. You might need to change these values too if some margins or anything else looks funny when there are multiple lines in homefeatured block.

 

Yes bootstrap is awesome and i'm really glad prestashop switched to using it for v1.6!

Link to comment
Share on other sites
  • 1 year later...
  • 3 months later...
Anaa Rookie

Anaa

Posted
Posted

Dear Vekia & All,


 


First of all thank you so much for posting very helpful topic's.


 


I am newbie on PS.I have been changed the number of products shown per row on my PS for howefeatured and categories.Everything works fine but there is ONE problem comes ...


 Vekia I need your help. Do you know solution for this problem .....


 


Problem is lost BUTTON of 2 side of products of Same category and Customers who bought this product also bought:


 


This 2 module shows all products whatever they have...(example shows 100 products ..)


Before there were 2 button side of suggested products .....(something like a scroll button for 2 side of products ..if i click on button next products shows....)but now lost....shows many products....Please see the image ..Please help me ..


 


 


here is the link....


http://www.luxurydiamondjewelry.com/home/13-18k-gold-blue-stone-square-rhinestone-earrings-necklace-jewelry-set.html


 


Regards


Anaa

Link to comment
Share on other sites
Anaa Rookie

Anaa

Posted
Posted

Dear All,

 

I have changed the display 4 products per row (categories )and then lost the Previous and Next Scroll button of Same category.....

 

Any idea? Why happens ?

 

I made changes as below:

 

  1. global.css: 854 ...col-md-4 {

    width: 23.33333%; }              changed to 23.3333%

 

2.  product-list.tpl

     {if isset($products) && $products}
    {*define number of products per line in other page for desktop*}
    {if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=4}     was 3
        {assign var='nbItemsPerLineTablet' value=3}  was 2
        {assign var='nbItemsPerLineMobile' value=3}  was 3
    {else}
        {assign var='nbItemsPerLine' value=5}  was 4
        {assign var='nbItemsPerLineTablet' value=4}  was 3
        {assign var='nbItemsPerLineMobile' value=2}   was 2
    {/if}
 

3. global.css:851

    col-md-3 {

    width 25%    changed to width 20%

 

After those changes lost Scroll button of (2 side button of Previous & Next ) Same category ....

Same category display all of product of current category......many products ....

 

Is there any idea ? Looks I over do something......Please help me....How to fix this problems?

link is:

http://www.luxurydiamondjewelry.com/home/31-blue-opal-rhinestone-crystal-link-braclet-bangle-18k-rose-gold-.html

 

 

Regards

Anaa post-995228-0-03608300-1443942706_thumb.png

Link to comment
Share on other sites
defuzed Newbie

defuzed

Posted
Posted

The link you provided isn't working, it'S gonna be hard to help you without being able to inspect the actual page...

As a side note you should NOT change width settings of "col-md-" classes, i can't really tell what you are trying to do since 

global.css: 854 ...col-md-4 {
    width: 23.33333%; }              changed to 23.3333%

doesn't really make sense, but judding from the next "changed to 20%" if you need bootstrap columns to fit 5 elements you will have to add the following to global.css

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

and then use the col-md-15 class in you templates.

 

Anyway please provide a working link.

Link to comment
Share on other sites
Anaa Rookie

Anaa

Posted
Posted

Hi Defuzed,

 

Thank you so much for your reply. I would like do to as:

 

1. Homepage products tabs display 5 products per row..

2. Categories pages display 4 products per row.....

 

here is the link.....http://s582691779.onlinehome.us/3-women

 

I made changes on PS as below:

 

  1. global.css: 854 ...col-md-4 {

    width: 33.33333%; }              changed to 23.3333% 

 

2.  product-list.tpl

     {if isset($products) && $products}
    {*define number of products per line in other page for desktop*}
    {if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=4}     was 3
        {assign var='nbItemsPerLineTablet' value=3}  was 2
        {assign var='nbItemsPerLineMobile' value=3}  was 3
    {else}
        {assign var='nbItemsPerLine' value=5}  was 4
        {assign var='nbItemsPerLineTablet' value=4}  was 3
        {assign var='nbItemsPerLineMobile' value=2}   was 2
    {/if}
 

3. global.css:851

    col-md-3 {

    width 25%    changed to width 20%

 

Also zoom function does not work on product page (view lalger).  If I , force to click on image ....only single image display and DO not  have Previous and Next scroll button....

 

After those changes lost Scroll button of (2 side button of Previous & Next ) Same category ....

Same category display all of product of current category......many products ....

 

 

Looks I did many wrong .....

 

Regards

Anaa

Link to comment
Share on other sites
defuzed Newbie

defuzed

Posted
Posted (edited)

hm are you using some kind of theme? I don't recall some sort of scrolling option being a prestashop default but i could be mistaken, anyway i can't help you with them not being there and nothing in the source indicating the presence of the scroll buttons... 

 

I think the best way would be if you just revert everything to the way it was, then tell me what you want to achieve and i'll have a look at that. In the current state it's just too much guessing...

 

*edit* also, if you are using a theme, please attach the relevant templates (product-list.tpl etc.) as attachments since they will probably be modified

Edited by defuzed (see edit history)
Link to comment
Share on other sites
Anaa Rookie

Anaa

Posted
Posted (edited)

Hi defuzed ..

 

Yesterday was my birthday.....no work.....

 

 

I am using prestashop default theme, (version 1.6.1.1. ) and try to changing some basic thing....Generally I want to change default theme  like this way...

 

1. Homepage products tabs display 5 products per row..See 1st- image=---(attachment name is homepage products tabs-5 products)

 

 

2. Categories pages display 4 products per row.....see 2nd image (name as categories page show-4 products per row..)

 

 

I made  changes on global.css and product-list.tpl .....but after the changes ......View larger function does not work out...on the product page .(.see image 3rd attachment)  Also you can see on this link..http://s582691779.onlinehome.us/tshirts/1-faded-short-sleeves-tshirt.html

 

.Click on the image you will see image displaying 800X800px ..very big size...post-995228-0-30954900-1444273415_thumb.pngpost-995228-0-30954900-1444273415_thumb.png

 

I crached my website so doing everything from beginning...here is the link,

http://www.luxurydiamondjewelry.com/

 

Can you help me to modify above changes.....Those attachment images I just live edit and get screenshot......

 

 

 

 

 

post-995228-0-13783100-1444273472_thumb.png

post-995228-0-47240700-1444273852_thumb.png

Edited by Anaa (see edit history)
Link to comment
Share on other sites
defuzed Newbie

defuzed

Posted
Posted

Ok, like i said in previous posts don't just mess with classes in global.css, unless you are sure they only affect one specific element. The changes you desire are fairly straightforward with a little understanding of the bootstrap grid system and how prestashop applies it. I'll walk you through it:

 

1. The bootstrap grid doesn't provide a 5 item column, so you will have to add that functionality yourself. I already provided this code in an above post but for completeness sakes i'll post it again

.col-xs-15,
  .col-sm-15,
  .col-md-15,
  .col-lg-15 {
      position: relative;
      min-height: 1px;
      padding-right: 10px;
      padding-left: 10px;
  }
  .col-xs-15 {
      width: 20%;
      float: left;
  }
  @media (min-width: 768px) {
  .col-sm-15 {
          width: 20%;
          float: left;
      }
  }
  @media (min-width: 992px) {
      .col-md-15 {
          width: 20%;
          float: left;
      }
  }
  @media (min-width: 1200px) {
      .col-lg-15 {
          width: 20%;
          float: left;
      }
  }

(original source iirc is : http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/ )

 

add this at the end of your global.css.

 

2. Now you just have to play around a little with product-list.tpl.

{if isset($products) && $products}
	{*define number of products per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'} {* this is category page *}
		{assign var='nbItemsPerLine' value=4} {* was 3 *}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=5} {* was 4 *}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}
	{*define numbers of product per line in other page for tablet*}
	{assign var='nbLi' value=$products|@count}
	{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
	{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index'} col-xs-12 col-sm-4 col-md-15{else if $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if} {* cut off here since the rest stays the same - This is where you change the bootstrap grid classes so for index change to col-md-15 (5 columns) and category change to col-md-3 (4 columns)*}

that should work, good luck

Link to comment
Share on other sites
Anaa Rookie

Anaa

Posted
Posted

Dear defuzed,

 

Thank you so much for modification. I deleted all database and install Prestashop again..... :-(

 

Now everything works fine...Prev and Next scroll button's appear and working very well..

 

Under the Product Page :

Customers who bought this product also bought:   & 14 other products in the same category:

This 2 columns also displaying Prev and Next scroll button....See 1 st -attachment

 

Products image displaying on his own  frame with Prev and Next button (view larger function on the product image) see 2nd attachment...

 

 

Thank you so much and I appreciate... :-)

 

Another question ? I would like to  re-size some  buttons as add to cart ,more,in stock, and content price etc....and also padding ..... Do I need to add new code on each relative files or just need little number changing? let me know please

 

Regards

Anaa

 

 

 

 

 

 

 

 

 

 

 

 

 

post-995228-0-98167000-1444406958_thumb.png

post-995228-0-60803300-1444407038_thumb.png

Link to comment
Share on other sites
  • 7 months later...
jjryeste Newbie

jjryeste

Posted
Posted

Hello is possible , edit productlist-css only in one category, for example

.grid li category->id_category == 94

width: 130px;
float: left;
margin: 20px 30px 0 0;
border-top: 0px solid #e5e5e5;
padding-top: 20px;
}

 

Thank you

Link to comment
Share on other sites
  • 1 year later...

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
 Share
Go to topic listing
×
×
  • Create New...