bebeboutik/modules/privatesales_similarproducts/front_similarproducts.tpl

<div id="privatesales_similarproduct">
    {if $ps_other_products|@count > 0}
    	<div class='slider_sales_product_footer'>
	        <ul>
	    	{foreach from=$ps_other_products item=product}
	    		<li>

	                <div class="hover-slide">
	                    <a onclick="showExpressCart(event); return false;" class="add-to-cart ajax_add_to_cart_product_footer_button" rel="{$product.id_product}" href="" title="{l s='Add to cart' mod='privatesales_similarproducts'}"></a>
	                    <a class="see-product" href="{$product.link}" target="_blank" title="{l s='See this product' mod='privatesales_similarproducts'}"></a>
	                </div>
	                <div class="product_added product_added_{$product.id_product}">
	                    <p>{l s='Product added to your cart' mod='privatesales_similarproducts'}</p>
	                </div>

					<div class="similar_product">
					<div class="product_sellers_label">
	                    <span class="product_link_sellers">{$product.name}</span>
	                </div>
	    			<div class="img_sellers">
	                	<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'mini_carre')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />
	            	</div>
	            	<div class="info_sellers">
	                    {* <p class="price"></p> *}
	                    <p class="price_info">
	                    	<span class="price">{$product.price}</span>
	                        <span class="old_price">{convertPrice price=$product.price_without_reduction}</span>
	                        {if $product.specific_prices.reduction_type =='percentage'}
	                            {assign var="reduc_value" value=$product.specific_prices.reduction * 100}
	                            <span class="percentage">(-{$reduc_value|intval}%)</span>
	                        {elseif $product.specific_prices.reduction_type == 'amount'}
	                            <span class="amount">(-{$product.specific_prices.reduction|number_format:2:",":"."}€)</span>
	                        {/if}
	                    </p>
	                </div>
	            	</div>
	            </li>
	    	{/foreach}
	    	</ul>
    	</div>
    {/if}
</div>
<script>
{literal}
$(document).ready(function(){
	var frame = $('#privatesales_similarproduct .slider_sales_product_footer');
	var list_items = frame.find('ul');
	var nb_items = list_items.find('li').length;

	if (nb_items>6) {

		// adjust css
		frame.css({
			'overflow': 'hidden',
			'margin-left':'51px',
			'width':'800px',
		});
		list_items.css({
			'padding-left':'10px',
		});
		list_items.find('li').css({
			'width':'252px',
			'margin-left':'0px',
		});
		list_items.find('li').find('.similar_product').css({
			'width':'auto',
		});
		// prepare parameters
		var animation_options = {
			'duration':500,
			'esaing': 'linear'
		};
		var state_scroll = {
			'nb_items': nb_items,
			'cpt_item' : 0,
			'step': 2
		}

		var item = $(list_items.find('li')[0]);
		var item_width = 0;
		var margin_width;

		// outWidth is supposed to include margin... However sometimes only margin width is return...
		if (item.outerWidth(true) < item.outerWidth(false)) {
			item_width = item.outerWidth(false);
			margin_width = item.outerWidth(true);
			item_width += margin_width;
		}
		else {
			item_width = item.outerWidth(true);
			margin_width = 0;
		}

		// add the margin with the new width to ensure the listitem width is large enough (ul has margin right and left of 10px)
		list_items.width(nb_items * item_width + margin_width*2 + 10);

		// add navigation arrows
		frame.append('<div class="ico_prev"></div><div class="ico_next"></div>');

		frame.find('.ico_prev')
			.css({
				'position':'absolute',
				'left':'0px',
				'top':'100px',
				'z-index':'10'
			})
			.hover(function(ev) {
				$(ev.target).css('cursor', 'pointer');
			})
			.click(function(ev){
				if (state_scroll.cpt_item>0) {
					list_items.animate({'left':'+='+(10+item_width*state_scroll.step)}, animation_options);
					state_scroll.cpt_item -= state_scroll.step;
				}
			});

		frame.find('.ico_next')
			.css({
				'position':'absolute',
				'right':'0px',
				'top':'100px',
				'z-index':'10'
			})
			.hover(function(ev) {
				$(ev.target).css('cursor', 'pointer');
			})
			.click(function(ev){
				console.log(item_width*state_scroll.step);
				if (state_scroll.cpt_item<(state_scroll.nb_items-state_scroll.step)) {
					list_items.animate({'left':'-='+(10+item_width*state_scroll.step)}, animation_options);
					state_scroll.cpt_item += state_scroll.step;
				}
			});
	}
});
{/literal}
</script>