[SOLVED] Product list: showing always full line of products

[DARKF3D3]

I'm trying to fix a things that ruin layout of my website.

On products list, in category and especially home page (new products module, featured...) when you switch on different resolution some product go to a new line, with result that you have a line with less products of the other lines.

 

For example (image attached):

My website at full width have 4 products per line, so i set my module to show multiple of 4 products, in this way i always have full lines.

The problem is that when I use smaller screen themes put 3 products per line, so there's 1 or 2 products showed in a new line.

 

 

There's a way to cut the new line that are not full of products?

Edited August 27, 2014 by DARKF3D3 (see edit history)

[NemoPS]

Hi!

i can't see any attachment, is your site the one of your signature?

[DARKF3D3]

No, it's a new theme for PS1.6 I'm testing before making the upgrade.

I updated the post with the image.

[NemoPS]

Did you clone any block to get second row? if so, check if the first  one's last element has some special css, or class, and compare it with the 4th one of the second block

[DARKF3D3]

I simply change the value of the number of products showed from the module option.

I wondering if there's a way to hide products of a row i the row its not complete.

[NemoPS]

Ah, so it's the default featured product block? Anyway try and inspect the fourth element, then the 8th, see if they have any differece in the css properties panel. Or, you can share the site url if it's live

[DARKF3D3]

Unfortunatelly actually I'm testing it on local (I'm trying to make it accessible also via internet).

 

But I think the same things is visible on home of prestashop demo:

http://demo.prestashop.com/

 

Home featured products (7 products showed):

At full width theres 4 first line - 3 second line

Half resolution 3 first line - 3 second line - 1 third line

 

I would like to not show the last uncompleted line, so the second at full resolution and the third when there's 3 products per line.

[NemoPS]

Hm, but the demo seems to be showing lines correctly, it's simply only displaying 7 products so we cannot exactly tell if it's broken (my local one is not)

 

Also, notice the fourth element's classes

 

 

ajax_block_product col-xs-12 col-sm-4 col-md-3 last-in-line first-item-of-tablet-line last-item-of-mobile-line

 

 

As you cn see there are references to the last element of the line (on multiple devices)

[DARKF3D3]

Yes, maybe I haven't explained well (my english it's not the best).

I'm not tolding that product-list file has a problem, I'm asking if there's a way to hide the last line if has not the maxium number of element possible, because it ruin my layout on some resolution and i don't like to have a lot of empty space.

For example in the image attached to my first post i wouldn't like to show the second line with only one products.

[NemoPS]

ahhh! I see!

 

yes you can, but I am not good in math so...uhm.

 

You need to check the number of products. If division by 4 (or your line number) is 0, show all, otherwise stop at the last number you can divide by 4. Noww to wrap it up in coding terms...ugh, my math skills suck but it must be in the main foreach loop, so like if $smarty.foreach.foreachname.iteration%0 == 0 && the sum of this iteration + the number of items per line doesn't exist, break it

[DARKF3D3]

Ok thanks, I'll look if i find a way to do that.

 

In meanwhile any other help welcome! 

[DARKF3D3]

Hi Nemo, thanks to your tips I fixed the problem of the uncomplete lines.

 

If someone is interested i can share my code.

[Andri Satria]

Hi Nemo, thanks to your tips I fixed the problem of the uncomplete lines.

 

If someone is interested i can share my code.

 

hi there im interest to see you code.

can you share here ?

[DARKF3D3]

Ok, I copy here my modify (note that my code it's customized because on desktop i use 5 products per line).

 

On product-list.tpl fin the line (it's between line 40-50):

<li class="ajax_block_product col-xs-6 col-sm-3 col-md-25{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

and change to:

{if $page_name == 'index'}
<li class="ajax_block_product col-xs-6 col-sm-3 col-md-25{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}{if (($smarty.foreach.products.total == 10) && (($smarty.foreach.products.iteration == 10) || ($smarty.foreach.products.iteration == 9)))} nascosto{/if}{if (($smarty.foreach.products.total == 5) && ($smarty.foreach.products.iteration == 5))} nascosto{/if}">
{else}
<li class="ajax_block_product col-xs-6 col-sm-3 col-md-25{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
{/if}

And in global.css add:

.nascosto { display: none; }

I try to explain it:

 

Since I need this need this modify working only on home I added:

  {if $page_name == 'index'}

    here i put my custom <li> code

  {else}

    here's the original <li> code

  {/if}

 

The difference between the 2 <li> it's that on my custom <li> i added:

{if (($smarty.foreach.products.total == 10) && (($smarty.foreach.products.iteration == 10) || ($smarty.foreach.products.iteration == 9)))} nascosto{/if}{if (($smarty.foreach.products.total == 5) && ($smarty.foreach.products.iteration == 5))} nascosto{/if}

Changing the value on this code let you decide which products hide.