Skip to content

Move both thumbnail selection classes together when swiping - #226

Draft
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/thumb-selected-class-pair-33782
Draft

Move both thumbnail selection classes together when swiping#226
boo-code wants to merge 1 commit into
PrestaShop:developfrom
boo-code:fix/thumb-selected-class-pair-33782

Conversation

@boo-code

@boo-code boo-code commented Sep 2, 2026

Copy link
Copy Markdown
Contributor
Questions Answers
Description? The default thumbnail is rendered with two classes, selected and js-thumb-selected (product-cover-thumbnails.tpl:74), and themeSelectors.product.selected is '.selected, .js-thumb-selected' — it matches either. swipe() removed only selected from the outgoing thumbnail, so that thumbnail kept js-thumb-selected and carried on matching the selector.

Every later swipe therefore read a set of thumbnails instead of one, called .closest().next() on all of them and marked each result selected. That is both reported symptoms: the highlight spreads across the strip, and stepping through the images stops working part way.
Type? bug fix
BC breaks? no
Deprecations? no
Fixed ticket? Fixes PrestaShop/PrestaShop#33782
Sponsor company -
How to test? Open a product with four or more images on a touch device or with device emulation, and swipe the cover sideways repeatedly. Before this change a second and third thumbnail light up and the cover stops following the swipes; after, exactly one thumbnail is highlighted and the cover advances through every image.

Measured

The two lines that change are pure class handling, so the mechanism was measured directly: the markup
product-cover-thumbnails.tpl emits for a four-image product, the selectors from selectors.js
verbatim, and the same .closest() / .next() walk swipe() performs, run three times.

                    matched by themeSelectors.product.selected   visibly highlighted   thumbnails
shipped   swipe 1                    2                                   1              1,2
          swipe 2                    3                                   2              1,2,3
          swipe 3                    4                                   3              1,2,3,4

with fix  swipe 1                    1                                   1              2
          swipe 2                    1                                   1              3
          swipe 3                    1                                   1              4

The left column is the defect: the matched set grows by one on every swipe, because each outgoing
thumbnail keeps js-thumb-selected. The right-hand run advances one image at a time, which is the
intended behaviour.

Scope

Only the class pair is touched. js-thumb-selected has exactly three references in the theme — the
selector, the template, and these two lines — so nothing else depends on it being left behind:

_dev/js/selectors.js:51                                 selected: '.selected, .js-thumb-selected'
templates/catalog/_partials/product-cover-thumbnails.tpl:74   default thumb gets both
_dev/js/product.js:43-44                                the swap (this change)

The click handler above shares the same swipe() function, so it is fixed by the same two lines.

Checks

npx eslint -c .eslintrc.js js/product.js exits 0. assets/ is gitignored in this repository, so no
rebuilt bundle belongs in the diff.

Verification limit

Measured on the real markup and selectors with the real DOM operations, not by swiping on a device — the
touch gesture is delivered by jquery.touchSwipe, which only decides when swipe() is called, not
what it does. The class bookkeeping inside it is what was wrong and what is measured above.

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Abnormal behavior of the mobile version of the product image slider in the product subpage

1 participant