class for last category product on each row in a grid

[akparade]

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)

 

 

Thanks,

Adam

[akparade]

If anybody can shed some light on this, i'd be very grateful!

[rocky]

Try:

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

[neonec]

Génial Merci !

{if $smarty.foreach.products.index % 4 == 3}

[PascalVG]

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

etc.

 

For your info,

pascal

[bene82]

How can I do the same for subcategories? I need to have a specific class to the last element of a row, exactly the fifth in each row.

 

 

Any help will be appreciated

[PascalVG]

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 1.5.5.0.)

 

{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}" />

 {else}

 <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

 {/if}

 </a>

 <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>

 {/if}

 </li>

 {/foreach}

 </ul>

 <br class="clear"/>

 </div>

{/if}

 

 

Hope that does the trick,

pascal

 

 

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...

}

[Wise]

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>
					</p>
				{/if}
			</div>
			<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}
					</a>
					<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>							
					<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}						
						</div>
						{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>
								{else}
									<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>
								{/if}						
							{else}
								<a class="button exclusive" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='Details'}">{l s='View'}</a><br />
							{/if}
						{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}
						{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}
						{/if}
					</div>
			</div>
		</li>
	{/foreach}
	</ul>
	<script type="text/javascript">
	$(document).ready(function(){
	  $.ajax({
	    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='' />");
	        	$(".pid_"+id).parent().addClass("hasSubImage");
	        });        
	      }
	    }
	  });
	});
	</script>
	<!-- /Products list -->
{/if}

[PascalVG]

Wise, what PS version is this?

 

pascal