Jump to content

class for last category product on each row in a grid


Recommended Posts

Hey guys,


I'm making the products in each category show in a 4-per-row grid and I can't figure out how to give just the 4th, 8th, 12th etc (last item on each row of products) a class... instead of the alternate class that is showing now using the original code (modified slightly):


<li class="ajax_block_product {if $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 4}item{else}right_margin_fix item{/if}">


Anyone know how I can achieve this? It's so I can have the furthest left and furthest right on each row tight to the edges with custom CSS.


I've attached what I have so far in a screenshot (the 1st, 5th, 9th will have the class - whereas, I want the 4th, 8th, 12th etc to have the class)






Link to comment
Share on other sites

  • 1 year later...

For those who want to know why the above solution works:

in original code, products.index starts at 0,1,2,3,4

so first item: 0 mod 4 = 0 (so first item was marked as 'right edge')

2nd item: 1 mod 4 (is 1)

3rd item: 2 mod 4 (is 2)

4th item : 3 mod 4 (is 3) (--> above given solution compares to == 3, so correctly marked as right edge)

5th item: 4 mod 4 = 0 (marked as 'right edge')


Of course we want 4th , 8th ,12th marked as right edge, so either above solution ( compare to ==3) works (see red comment)


other, more transparent option is to just add 1 to index to make it start at 1 instead of 0:

{if ($smarty.foreach.products.index+1) % 4}

which gives:

1st item: 1 mod 4 (is 1)

2nd item: 2 mod 4 (is 2)

3rd item: 3 mod 4 (is 3)

4th item : 4 mod 4 (correctly marked as 'right edge')

5th item: 5 mod 4 = 1



For your info,


Link to comment
Share on other sites

  • 3 months later...

Hi bene,


Edit file themes/<your theme folder>/category.tpl   (Make backup first!)

Try to locate code that looks like this (Code snippet from PS


{if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
 <h3>{l s='Subcategories'}</h3>
 <ul class="inline_list">
 {foreach from=$subcategories item=subcategory name=subcat}
 <li class="clearfix{if ($smarty.foreach.subcat.index + 1) % 5 == 0} last_subcategory_row_item{/if}">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title=" {$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
 {if $subcategory.id_image}
 <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html'}" alt=""  width="{$mediumSize.width}" height="{$mediumSize.height}" />
 <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}"  class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {if $subcategory.description}
 <p class="cat_desc">{$subcategory.description}</p>
 <br class="clear"/>
Hope that does the trick,
Oh, and then the css code:
add to themes/{your theme folder>/css/category.css: (just add at the end)
ul.inline_list .last_subcategory_row_item {
whatever code you need to make it nice...
Link to comment
Share on other sites

  • 1 year later...

Pascal, could you please help me to do 3 products in a row (now its 4)?

Here is my product-list.tpl

Thanks in advance

{if isset($products)}
	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
			<div class="left_block">
				{if isset($comparator_max_item) && $comparator_max_item}
					<p class="compare">
						<input type="checkbox" class="checkbox comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
						<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
			<div class="center_block">				
					<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
						<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_alysum')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}"  />
						<span class="subimage-container pid_{$product.id_product}"></span>
						{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
					<div class="product-info">
						<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:30:'...'}</a></h3>
						<div class="product_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</div>	
					<div class="right_block">						
						{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}						
						<div class="content_price">
							{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{if $product.specific_prices}<span class="display-reduction">{if $product.specific_prices.reduction_type == "percentage"}-{$product.specific_prices.reduction*100}%{elseif $product.specific_prices.reduction_type == "amount"}-{convertPrice price=$product.specific_prices.reduction}{/if}</span><span class="old-price">{convertPrice price=$product.price_without_reduction}</span>{/if}{/if}						
						{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
							{if ($product.allow_oosp || $product.quantity > 0)}
								{if isset($static_token)}
									<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
									<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
								<a class="button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Details'}">{l s='View'}</a><br />
						{elseif ($product.id_product_attribute != 0)}
							<a class="button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Details'}">{l s='View'}</a><br/><br/>
						{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
						{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
						{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
	<script type="text/javascript">
	    type: 'POST',
	    url: baseDir+'modules/themesettings/ajax.php',
	    data: 'id={foreach from=$products item=p name=prd}{$p['id_product']}{if $smarty.foreach.prd.last}{else},{/if}{/foreach}&lang_id={$cookie->id_lang}',
	    success: function(result){
	      if (result == '0')
	        console.log('no data')
	      } else {                          
	        var pData = JSON.parse ( result );
	        $.each(pData, function (id) {
	        	$(".pid_"+id).append("<img src='"+pData[id]+"' alt='' />");
	<!-- /Products list -->

Link to comment
Share on other sites

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
  • Create New...