131 lines
4.2 KiB
Smarty
131 lines
4.2 KiB
Smarty
<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, 'medium')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" />
|
|
</div>
|
|
<div class="info_sellers">
|
|
<p class="price">{$product.price}</p>
|
|
<p class="price_info">
|
|
<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>3) {
|
|
|
|
// adjust css
|
|
frame.css({
|
|
'overflow': 'hidden',
|
|
'margin-left':'40px',
|
|
'width':'800px'
|
|
});
|
|
|
|
list_items.find('li').css({
|
|
'width':'267px'
|
|
});
|
|
|
|
// 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
|
|
list_items.width(nb_items * item_width + margin_width*2);
|
|
|
|
// add navigation arrows
|
|
frame.append('<div class="ico_prev"></div><div class="ico_next"></div>');
|
|
|
|
frame.find('.ico_prev')
|
|
.css({
|
|
'position':'absolute',
|
|
'left':'-10px',
|
|
'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':'+='+item_width*state_scroll.step}, animation_options);
|
|
state_scroll.cpt_item -= state_scroll.step;
|
|
}
|
|
});
|
|
|
|
frame.find('.ico_next')
|
|
.css({
|
|
'position':'absolute',
|
|
'right':'10px',
|
|
'top':'100px',
|
|
'z-index':'10'
|
|
})
|
|
.hover(function(ev) {
|
|
$(ev.target).css('cursor', 'pointer');
|
|
})
|
|
.click(function(ev){
|
|
if (state_scroll.cpt_item<(state_scroll.nb_items-state_scroll.step)) {
|
|
list_items.animate({'left':'-='+item_width*state_scroll.step}, animation_options);
|
|
state_scroll.cpt_item += state_scroll.step;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
{/literal}
|
|
</script>
|