Show attributes color with owl carousel SOLVED

[nicola10]

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 : ["&lsaquo;", "&rsaquo;"],
	        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 : ["&lsaquo;", "&rsaquo;"],
	        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>

 

 

Edited October 26, 2019 by nicola10
highlight code difference (see edit history)

[nicola10]

I try the following code but It doesn't works:

	var coloreselez = $(this).attr('.input-color:checked');
$('.input-color').click(function(){
   var owlNumber = $('.owl').find('[.input-color="' + coloreselez + '"]').index();
   carousel.trigger('owl.input-color', owlNumber)
});
	

[nicola10]

the following code works but It's reset after combinations area loaded:

	      $(document).on('click', '.owl-item', function(){
            n = $(this).index();
            console.log(n)
            $('.owl-wrapper').trigger('owl.goTo', n);
      });
	

[nicola10]

The following code works partialy (at the first selection doesn't works). :

 

With goTo

$(document).on('click', '.owl-item', function(){
            n = $(this).index();
            console.log(n)
prestashop.on('updatedProduct',function() {
            $('.owl-wrapper').trigger('owl.goTo', n);
      });
      });
      

Or with jumpTo

$(document).on('click', '.owl-item', function(){
            n = $(this).index();
            console.log(n)
prestashop.on('updatedProduct',function() {
            $('.owl-wrapper').trigger('owl.jumpTo', n);
      });
      });
      

[nicola10]

I solved inserting the previous function inside the OwlLoaded function

	  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%');
	
$(document).on('click', '.owl-item', function(){
            n = $(this).index();
            console.log(n)
prestashop.on('updatedProduct',function() {
            $('.owl-wrapper').trigger('owl.jumpTo', n);
      });
      });
	        
  };
	

 

SOLVED