.png.022b5452a8f28f552bc9430097a16da2.png)
Hello
I'm trying to use owl carousel to display attributes color in the product page.
Everything works except the animation of the carousel that after having selected a color, returns to the first slide.
So for example, if there are 10 colors and the carousel shows them in groups of 5 and I select the color in seventh position, the color remains selected (it also updates the associated image and the relative price as normally happens), but the carousel returns to the first group of 5
After selecting a color from the combination, there is a Prestashop javascript event that resets the position on the color that is in the first position of the carousel. It only scrolls to the first position but the selection is not reset
Has anyone tried this change and can you help me?
Thanks in advance
The original code of product variants is:
<div class="product-variants">
{foreach from=$groups key=id_attribute_group item=group}
{if !empty($group.attributes)}
<div class="clearfix product-variants-item">
<span class="control-label">{$group.name}</span>
{if $group.group_type == 'select'}
<select
class="form-control form-control-select"
id="group_{$id_attribute_group}"
data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
{/foreach}
</select>
{elseif $group.group_type == 'color'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span
{if $group_attribute.html_color_code && !$group_attribute.texture}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
{if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
><span class="sr-only">{$group_attribute.name}</span></span>
</label>
</li>
{/foreach}
</ul>
And the new code is
<div class="product-variants">
{foreach from=$groups key=id_attribute_group item=group}
{if !empty($group.attributes)}
<div class="clearfix product-variants-item">
<span class="control-label">{$group.name}</span>
{if $group.group_type == 'select'}
<select
class="form-control form-control-select"
id="group_{$id_attribute_group}"
data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
{/foreach}
</select>
{elseif $group.group_type == 'color'}
<div class="owl-row hide-loading"> <!-- Aggiunto 1 -->
<ul id="group_{$id_attribute_group}" class="owl-carousel owl-theme owl-loaded"> <!-- Aggiunto 2 Intera classe -->
{foreach from=$group.attributes key=id_attribute item=group_attribute name=mypLoop}<!-- Aggiunto 3 name=mypLoop -->
<li class="float-xs-left input-container item active{if $smarty.foreach.mypLoop.index == 0} first{/if}"><!-- Aggiunto 4 Integrata la classe da item in poi -->
<label>
<input id="{$id_attribute}" class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span
{if $group_attribute.html_color_code && !$group_attribute.texture}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
{if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
></span><span class="sr-only">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
</div> <!-- Aggiunto 1 -->
<script type="text/javascript">
products_list_functions.push(
function(){
if($('ul#group_{$id_attribute_group}').parents('.tab-pane').length)
{
if(!$('ul#group_{$id_attribute_group}').parents('.tab-pane').hasClass('active'))
{
var width_owl_active_tab = $('ul#group_{$id_attribute_group}').parents('.tab-pane').siblings('.active').find('.owl-carousel').width();
$('ul#group_{$id_attribute_group}').width(width_owl_active_tab);
}
}
$('ul#group_{$id_attribute_group}').owlCarousel({
{if isset($IS_RTL) && $IS_RTL}
direction:'rtl',
{else}
direction:'ltr',
{/if}
items : 5,
stageOuterClass:'product-variants-item',
itemsCustom : false,
itemsDesktop : [1500, 5],
itemsDesktopSmall : [992, 4],
itemsTablet : [768, 3],
itemsTabletSmall : false,
itemsMobile : [480, 2],
singleItem : false, // true : show only 1 item
itemsScaleUp : false,
slideSpeed : 200, // change speed when drag and drop a item
paginationSpeed :800, // change speed when go next page
autoPlay : false, // time to show each item
stopOnHover : false,
navigation : true,
navigationText : ["‹", "›"],
scrollPerPage :false,
responsive :true,
pagination : false,
paginationNumbers : false,
addClassActive : true,
mouseDrag : true,
touchDrag : true,
afterInit: OwlLoaded,
afterAction : SetOwlCarouselFirstLast,
});
}
);
$('ul#group_{$id_attribute_group}').owlCarousel({
stageOuterClass:'product-variants-item',
items : 5,
itemsCustom : false,
itemsDesktop : [1500, 5],
itemsDesktopSmall : [992, 4],
itemsTablet : [768, 3],
itemsTabletSmall : false,
itemsMobile : [480, 2],
singleItem : false, // true : show only 1 item
itemsScaleUp : false,
slideSpeed : 200, // change speed when drag and drop a item
paginationSpeed :800, // change speed when go next page
autoPlay : false, // time to show each item
stopOnHover : false,
navigation : true,
navigationText : ["‹", "›"],
scrollPerPage :false,
responsive :true,
pagination : false,
paginationNumbers : false,
addClassActive : true,
mouseDrag : true,
touchDrag : true,
afterInit: OwlLoaded,
afterAction : SetOwlCarouselFirstLast,
});
function OwlLoaded(el){
el.removeClass('owl-loading').addClass('owl-loaded').parents('.owl-row').addClass('hide-loading');
if ($(el).parents('.tab-pane').length && !$(el).parents('.tab-pane').hasClass('active'))
el.width('100%');
};
</script>