Fix variant media not changing in the quick add modal

[ludoboludo]

PR Summary:

In the quick add modal, on version 14, when you change variant it doesn't update media shown when it used to.

Why are these changes introduced?

Fixes https://github.com/Shopify/dawn/issues/3448

What approach did you take?

From what I see it's looking a mediaGalleyDestination but it can't grab any cause this.dataset.section can't be found in the new html. (recording)

With this new approach, it seems like the issue comes from the fact that we have preventDuplicatedIDs() to prevent duplicate IDs in the quick add modal by adding quickadd-. So when we do

const mediaGalleryDestination = html.querySelector(`[id^="MediaGallery-${this.dataset.section}"] ul`);

It's not finding that destination as it doesn't have a similar ID. ~We could tweak that data-section and remove the quickadd- within updateMedia(html){...} 🤷~

In the function that prevents the duplicate IDs we're setting a data attribute that keeps the original section ID. So we're using this in priority if it's present and we don't need to do the string manipulation 👍

If I do this instead it seem to fix the issue:

const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
...
const mediaGalleryDestination =
      html.querySelector(`[id^="MediaGallery-${sectionId}"] ul`);

Visual impact on existing themes

It now works when changing variant that has a feat. image

Testing steps/scenarios

• [ ] Set the feat. collection on the homepage to use quick add standard
• [ ] Then open the modal for a product with variant images like Louise slide sandal or Puppy
• [ ] Change variant to see the image updated
• [ ] Also test and make sure it still works as expected on the product page and feat. product section

Demo links

• Editor

Checklist

• [ ] Added PR summary for release notes
• [ ] Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• [ ] Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• [ ] Followed theme code principles
• [ ] Linted with Theme Check
• [ ] Tested on mobile
• [ ] Tested on multiple browsers
• [ ] Tested for accessibility

[jonpennington]

Could we perhaps use this functionality instead? It would follow similar logic used elsewhere in global.js. The problem seems to originate with how Section Rendering API now works.

const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
const mediaGallerySource = document.querySelector(`[id^="MediaGallery-${this.dataset.section}"] ul`);
const mediaGalleryDestination = html.querySelector(`[id^="MediaGallery-${sectionId}"] ul`);