[SOLVED] get smaller product boxes?

[blazern]

How do I get smaller product boxes when I click on a category, I want at least 4-5 product boxes in each row.

Edited June 12, 2014 by blazern (see edit history)

[dioniz]

In product-list.tpl find this code:

{if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=3}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=3}
{else}

Change to

{if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=4}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=3}
{else}

or numbers that suits you

[Tirips]

Great, that was the next line on my Prestashop todo list

checked

[Tirips]

Great, that was the next line on my Prestashop todo list

checked

Unchecked, it doesn't work...

[dioniz]

Forgot to say that you need to change this also:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if} ...

to

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if} ...

[blazern]

 

Forgot to say that you need to change this also:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if} ...

to

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if} ...

What does this code do ?

 

However, it worked...but if I choose list products instead of grid, everything looks messy. Is there a chance to fix or deactivate it?

[Tirips]

Definitely checked

Thanks a lot

[dioniz]

This last code changes 3 columns to 4 columns.

Now to fix list open js/global.js and find this:

if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');

and change to:

if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-3').addClass('col-xs-12');

and find:

else
    {
        $('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');

change to:

else
    {
        $('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-3');

[Tirips]

With your firt solution, I succeed in 6 products per line :

 

 {assign var='nbItemsPerLine' value=6}
<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-2{/if}

 

sorry, I don't know how to paste in a frame...

[dioniz]

To paste as code select text and click on <> button

 

Now in global.js change md-4 to md-2 and you will fix list

[blazern]

To paste as code select text and click on <> button

 

Now in global.js change md-4 to md-2 and you will fix list

Oh, thank you 6 in a row is way better than 3 

[dioniz]

You are welcome

Please mark your topic as solved

Click on edit button, then click full editor, there on first post you can edit the topic title and add solved.

[Tirips]

Thanks for :

- the product per line tuto,

- the code paste tuto.

 

I may abuse, but you may have a solution for my question on the forum : disable the quantity in the cart ...