slickUnfilter removes all the slides on mobile

pcook2 commented 3 years ago

short description of the bug / issue, provide more detail below. This is a Shopify store. https://www.uberscuuter.com/products/the-uber-scuuter-lite-gt?preview_theme_id=83332563023

When you visit the product page from mobile devices, choose Color variants (Black and White) for a few times. (Switch between different ones). All the thumbnails are removed from the slider.

For your information, here is code snippet about what happens when color is selected.

      $('[name="color"]').change(function() {
        $('.product-single__thumbnails').slick('slickUnfilter');
        $('[data-color').parents('[data-slick-index]').removeClass('slick-filtered');
        var thisVal =  $(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/-$/, '').replace(/^-/, '');;
        var index = $('[data-color="'+ thisVal +'"]').parents('[data-slick-index]').attr('data-slick-index');
        var $colorDatas = $('[data-color="'+ thisVal +'"]');
        $colorDatas.each(function(){
          $(this).parents('[data-slick-index]').addClass('slick-filtered');
        })
        $('.product-single__thumbnails').slick('slickFilter','.slick-filtered');
      });

====================================================================

https://www.uberscuuter.com/products/the-uber-scuuter-lite-gt?preview_theme_id=83332563023

====================================================================

Steps to reproduce the problem

Visit this page from mobile: https://www.uberscuuter.com/products/the-uber-scuuter-lite-gt?preview_theme_id=83332563023
Click "White" from color options, click "Black" again. Click "White" again. Then, the thumbnails are all gone.

====================================================================

What is the expected behaviour?

The thumbnail slider should remain there when choosing color variant. ...

====================================================================

What is observed behaviour?

When you switch between Black and White for a few times, it is removing all the thumbnails from slick slider. ...

====================================================================

More Details

Which browsers/versions does it happen on? Most browsers. Tested on Chrome and Safari of iPhone 11.
Which jQuery/Slick version are you using? jQuery: 2.2.3 Slick: 1.8.8
Did this work before? Never worked.

pcook2 commented 3 years ago

I tried to revert Slick to 1.7.1, but no luck.

tylerfurry commented 3 years ago

I am having a similar issue where on the responsive breakpoints all the slides disappear on unfilter. I see this was an issue back in 2015 but @kenwheeler resolved it. However, sounds like we are experiencing a similar same problem again. Here is my code. Working on an old site that is not es6 sorry ;(

` var initPassSlick = function(selector) {

  selector.slick({
    infinite: false,
    dots: true,
    slidesToShow: 2.75,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1920,
        settings: {
          slidesToShow: 2.5,
          slidesToScroll: 1, 
        }
      },
      {
        breakpoint: 1441,
        settings: {
          slidesToShow: 2.25,
          slidesToScroll: 1, 
        }
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 1.5,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 920,
        settings: {
          slidesToShow: 1.25,
          slidesToScroll: 1
        }
      }
    ]
  })
  .on('setPosition', function (event, slick) {
    slick.$slides.css('height', slick.$slideTrack.height() + 'px');
  })
  selector.slick('slickFilter','[data-age-group="Adult"]');
};

initPassSlick($('#slick-init-1'));
initPassSlick($('#slick-init-2'));

var initAgeFilter = function(selectorBtn, selectorSlick) {
  selectorBtn.on('click', function(){
    $(this).siblings().find('.pass-filter-btn').removeClass('js-active');

    var $button = $(this).find('.pass-filter-btn'),
        ageGroup = $button.data('age-group');

    $button.addClass('js-active');
    selectorSlick.slick('slickUnfilter');
    selectorSlick.slick('slickFilter', '[data-age-group="+'ageGroup'+"]');

  }); 
};

initAgeFilter($('#pass-filter-jhole-passes > .js-pass-filter-btn'), $('#slick-init-1'));
initAgeFilter($('#pass-filter-multi-resort > .js-pass-filter-btn'), $('#slick-init-2'));`

I can confirm that the selectorSlick.slick('slickUnfilter'); removes all the slides on responsive. This happens only when you interact with the carousel first. This is currently happening on this page. https://www.jacksonhole.com/season-pass.html. However, I may have to refactor to use something else so it might not be there for too many more days.

Steps to reproduce:

view on a responsive breakpoint
scroll slide show to right
toggle filter
all slides disappear

Also I am using the CDN links for the CSS and JS. v1.8.1

Anyway @kenwheeler we love your work and have seen you speak a few times. If you have time to helps me out that would be awesome. Thanks.

tylerfurry commented 3 years ago

I figured it out. If I reset the slide index to 0 before triggering the unfilter and filter it seems to be working just fine.

selectorSlick.slick('slickGoTo', 0, false); -> then filter

kenwheeler / slick