From c4e6217cae7236e640b75688d16f10c11c9160ab Mon Sep 17 00:00:00 2001 From: Audrius Date: Wed, 2 Sep 2026 12:09:46 +0200 Subject: [PATCH] Move both thumbnail selection classes together when swiping The default thumbnail is rendered with "selected" and "js-thumb-selected", and themeSelectors.product.selected matches either of them. Swiping removed only "selected" from the old thumbnail, so it kept "js-thumb-selected" and went on matching that selector. The next swipe therefore read a set of thumbnails rather than one, took .closest().next() on all of them and marked every result selected, so the highlight spread across the strip and stepping through the images stopped working part way. Counting the matched thumbnails over three swipes of a four image product, before and after: shipped 2, 3, 4 matched 1, 2, 3 highlighted fixed 1, 1, 1 matched 1, 1, 1 highlighted, advancing 2, 3, 4 See PrestaShop/PrestaShop#33782 --- _dev/js/product.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/_dev/js/product.js b/_dev/js/product.js index 67decd8c..6de12ffe 100644 --- a/_dev/js/product.js +++ b/_dev/js/product.js @@ -36,9 +36,12 @@ $(document).ready(() => { const swipe = (selectedThumb, thumbParent) => { const newSelectedThumb = thumbParent.find(prestashop.themeSelectors.product.thumb); - // Swap active classes on thumbnail - selectedThumb.removeClass('selected'); - newSelectedThumb.addClass('selected'); + // Swap active classes on thumbnail. Both have to move together: "selected" carries the + // styling and "js-thumb-selected" is what themeSelectors.product.selected looks for, so + // dropping only one of them leaves the previous thumbnail matching that selector and the + // next swipe acts on a growing set of thumbnails. + selectedThumb.removeClass('selected js-thumb-selected'); + newSelectedThumb.addClass('selected js-thumb-selected'); // Update sources of both cover and modal cover modalProductCover.prop('src', newSelectedThumb.data('image-large-src'));