Jump to content

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


DARKF3D3

Recommended Posts

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 by DARKF3D3 (see edit history)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

×
×
  • Create New...