Number of Latest Products

[Claudia M]

Is there a way to show a different amount of latestest products for the small screen and for large. I currently show 9 but I want to show 2 side by side on the small screen but that would leave 1 by itself. Thanks in advance!

[bsmither]

Interesting. This would be a mashup of Smarty (where the page is rendered on the server), with Foundation (where the page is styled in the browser).

Smarty loops through the array of products creating the list, and Foundation draws the grid from the list.

I assume you are already using small-block-grid-2, so that leaves having Smarty restrict the count of the list to a total divisible by two. But how would Smarty know what the size is of the viewport that is going to be showing the page?

It can't.

So, we must try to convince Foundation to hide the last row if the last row is not complete. (This is what you are wanting, correct?)

That is going to be an interesting exercise.

[Claudia M]

Yes that would work fine

[bsmither]

Well, this turned out to be very interesting.

In Foundation, your list of Latest Products panels are probably gridded according to:

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" data-equalizer>

That is, you have changed the number of panels shown on the small viewport from one to two.

Without getting into the dirty details, make the follow edit:

From:

{if $LATEST_PRODUCTS}
<div id="content_latest_products">

To:

{if $LATEST_PRODUCTS}
<style>
/* Kill single element on the last row for small-2 and large-3 viewports */
#content_latest_products .small-block-grid-2 > li:nth-child(1):nth-last-child(1),
#content_latest_products .small-block-grid-2 > li:nth-child(1):nth-last-child(2n+1) ~ li:last-child,

#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(1),
#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+1) ~ li:last-child {
	display: none;
}
/* Kill 2 elements on the last row for large-3 viewports */
#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(2),
#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(2) ~ li,
#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+2) ~ li:last-child,
#content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+2) ~ li:nth-last-child(2) {
	display: none;
}
</style>
<div id="content_latest_products">

You have made changes to the skin template, so you may need to have CubeCart clear its cache.

[Claudia M]

Wow Brian!!! Thank you for this!  I'll implement it and let you know how it does.

The small view looks great - no extra product. But on my laptop the last product is also gone.  It is only showing 8 products instead of 9..  I cleared the cache