Product carousels no longer adjust to smaller displays on 'Similar' and 'New Products'

[itsViney]

Expected behavior

As with the 'Featured' and 'Top Products' carousels on the home page and as they did in previous versions of Cornerstone, the 'Similar Products' carousel on the product page and the 'New Products' carousel on the home page should adapt properly to smaller displays.

I believe this issue was introduced in 2.6.0. These carousels behaved as expected in previous versions.

Actual behavior

Unlike the other carousels, these two always display 5 columns of product cards, causing them to text to overlap and thumbnails becoming too small to be of use when views on narrow screens such as mobile devices. Other carousels automatically wrap if the cards' width goes below ~200px. The 'Similar Products' and 'New Products' carousels should do the same

Steps to reproduce behavior

1. Configure productpage_similar_by_views_count and homepage_top_products_column_count to display at least 5 products.
2. Resize the browser window below ~650px
3. Observe the behaviour of the 'Similar Products' and 'New Products' carousels

[HikeOn]

Hi, The issue got resolved for us after we replaced

data-slick='{ "dots": true, "infinite": false, "mobileFirst": true, "slidesToShow": {{ columns }}, "slidesToScroll": 3
}'

with

data-slick='{ "dots": true, "infinite": false, "mobileFirst": true, "slidesToShow": 2, "slidesToScroll": 2, "responsive": [ { "breakpoint": 1260, "settings": { "slidesToScroll": 3, "slidesToShow": {{ columns }} } }, { "breakpoint": 800, "settings": { "slidesToScroll": 3, "slidesToShow": 5 } }, { "breakpoint": 550, "settings": { "slidesToScroll": 3, "slidesToShow": 3 } } ] }'

in /templates/components/products/carousel.html

And we didn't face any issues related to browser.

Note: Cornerstone theme version - 2.6.0 IOS version - 12.1 Safari version -12

[itsViney]

Thanks @HikeOn . Yep, that fixed it for me too. 👍

[Ubersmake]

Hi @itsViney and @HikeOn . Thanks for writing and commenting on this issue. We're working on a better carousel solution for Cornerstone. I'd like to keep this issue open until we do.

For context, this is related to https://github.com/bigcommerce/cornerstone/pull/1389 and https://github.com/bigcommerce/cornerstone/pull/1371. #1371 was released with Cornerstone 2.5.2, and reflects what's happening in this ticket, which @HikeOn caught: https://github.com/bigcommerce/cornerstone/pull/1371/files#diff-339911808b202005e03163613b83868aL6

1389, which as of this comment hasn't been released yet, is only a band-aid fix for word wrap issues.

[PeteyRev]

@Ubersmake I would recommend glide if you are looking for a plugin solution - be happy to make a pr.

[carsonreinke]

@Ubersmake please also consider modifying to use img[srcset] also to make Google Lighthouse happy.