Jump to content
nicola10

Show attributes color with owl carousel SOLVED

Recommended Posts

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 by nicola10
highlight code difference (see edit history)

Share this post


Link to post
Share on other sites

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)
});
	

Share this post


Link to post
Share on other sites

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);
      });
	

Share this post


Link to post
Share on other sites

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);
      });
      });
      

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More