antadis/bebeboutik
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add scrolling/slide when products have more than 3 accessories

Browse Source
This commit is contained in:
Rodney Figaro 2016-09-28 12:44:25 +02:00
parent 205c04d522
commit da5a017c06
2 changed files with 133 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
modules/privatesales_similarproducts/front_similarproducts.tpl
View File

@ -39,3 +39,92 @@
</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>

49
themes/site/css/style.css
View File

@ -6769,9 +6769,15 @@ table#carrierTable tbody td {
margin-right: 0px;
}
#product #privatesales_similarproduct .slider_sales_product_footer {
border: 1px solid transparent; /* trick to get the correct height in javascript */
/*width:880px;*/
}
#product #privatesales_similarproduct ul {
list-style: none;
width:880px;
position:relative;
}
#product #privatesales_similarproduct ul li{
position: relative;
@ -6823,10 +6829,6 @@ table#carrierTable tbody td {
background: url("../img/loupe.png") no-repeat center center;
}
#product #privatesales_similarproduct .slider_sales_product_footer {
border: 1px solid transparent; /* trick to get the correct height in javascript */
}
#product #privatesales_similarproduct ul li:after{
content: '';
display: block;
@ -6835,7 +6837,7 @@ table#carrierTable tbody td {
#product #privatesales_similarproduct ul li .similar_product {
background-color: #fff;
width:246.667px;
width:244.667px;
padding:10px;
}
#product #privatesales_similarproduct ul li .img_sellers,
@ -6910,3 +6912,40 @@ table#carrierTable tbody td {
#product #privatesales_similarproduct ul li .info_sellers .price_info .amount{
color: #4F4E9A;
}
/* ============= SLIDER ====================*/
/*
#product #privatesales_similarproduct .flex-direction-nav {
position: inherit;
}
#product #privatesales_similarproduct .flex-control-nav{
display: none;
}
*/
#product #privatesales_similarproduct .ico_prev,
#product #privatesales_similarproduct .ico_next {
top: -80px;
border-radius: 50%;
width: 50px;
height: 50px;
content: '';
background: #fff;
color: transparent;
opacity: 1;
-moz-box-shadow: 0px 0px 5px 1px #cccccc;
-webkit-box-shadow: 0px 0px 5px 1px #CCC;
-ms-box-shadow:: 0px 0px 5px 1px #cccccc;
-o-box-shadow: 0px 0px 5px 1px #cccccc;
box-shadow: 0px 0px 5px 1px #CCC;
}
#product #privatesales_similarproduct .ico_prev{
background: url("../img/arrow_blue_left.png") no-repeat center center #fff;
}
#product #privatesales_similarproduct .ico_next{
background: url("../img/arrow_blue_right.png") no-repeat center center #fff;
}
#product #privatesales_similarproduct .ico_prev:before,
#product #privatesales_similarproduct .ico_next:before{
display: none;
}