Slick Media Display on Commerce Product Variations not working correctly

Thank you.

> On initial load... the main image appears correctly. ...loaded by AJAX and the main image does not load...
Sounds like an unfortunate JavaScript regression, hardly PHP, then.

Please help narrow down and reply by exact numbers till I have time to debug it properly:

1. Is it D11, or less? See D11 compat issues and its workaround.
2. Uninstall BigPipe a mo. Clear caches, including pressing F5 or CTRL/CMD + Shipt + R to clear browser caches. Some browsers are stubborn by caches, especially AJAX contents. Any difference?
3. Verify the supported Slick library 1.6-1.8.0, see project home for fake/ misleading 1.8.0.
4. If using Accessible Slick, revert to original Slick.

Additional PHP checklists, might be unrelated, just to be sure:

1. Is it EleveateZoom Plus? Or plain Slick?
2. At Slick 2.x, did you enable "Use theme Blazy" option at Blazy UI /admin/config/media/blazy_ui? If disabled, try enabling it at 2.x, and see if that causes it.
3. I don't know how you setup your Slick -- Vanilla, Responsive Image, etc. Try minimal setups without Vanilla, without Responsive Image. Any difference?

Patches are welcome if any.

1. It's D10.3.6 and Commerce 8.x-2.40. I haven't tested on D11 with Commerce 3.
2. I'll come back to you on BigPipe but I had tried clearing both Drupal Caches and Browser caches and it made no difference
3. Slick Library v1.8.0 (and not the half baked v1.8.1)
4. Not using accessible Slick - just original version

1. Plain Slick
2. Use Theme Blazy is not an option on Blazy 3. However, it is enabled on the version that works (Blazy 2 with Slick 2)
3. I have the options set-up in Slick and the Display Settings for the image in the Product Variations as per the attached images. I haven't used the Responsive options in Slick but I am using Responsive Image Styles.

If I use the Vanilla option in the Manage Display options of the Product Variations image, then the image does work correctly when you change variations but I obviously don't get the option of displaying thumbnails/navigation.

OK, would love to hear about BigPipe. It is the safest to (un-)install without any issues.

If uninstalling BigPipe fixes it, try the following before we work any further.

One more debug, on the troubled page:

• Press CTRL/CMD + U, or right click on the page > View page source.
• Press CTRL/CMD + F, and type bio.ajax or bio.ajax.min.js.

With or without BigPipe, check out its exact location, whether in standalone script tag, or included in the script JSON section.

If not exist, or inside JSON section (meaning mixed up), it might be the cause.
If exist as standalone, it might be 3.x JS regression.

If not exist, to put the blazy AJAX library there, whichever easier:

• Create a single block of empty view, enable Use AJAX on Views UI RHS under Advanced.
• Implement hook_blazy_settings_alter:
  https://git.drupalcode.org/project/blazy/-/blob/3.0.11/blazy.api.php?ref...
  $blazies->set('use.ajax', TRUE);
  More condition is in the blazies.field section of the $blazies object.
• Include it in your theme with proper scope: blazy/bio.ajax

OK, did some testing as per your instructions.

• BigPipe installed issue is there. Big pipe not installed - works perfectly.
• Checked page source (with JS Aggregation off) and neither bio.ajax nor bio.ajax.min.js are there (with either BigPipe installed or not)
• Added a Views block which has Use Ajax enabled to the product page and the images work perfectly (with either BigPipe installed or not)
• Just to note, even with the Views block with Ajax on the product page and the images are working, neither bio.ajax nor bio.ajax.min.js exist I the page source.

Hope that helps

Very helpful debug, thank you.

Two underlying issues I can think of without seeing it directly in a laptop:

1. Missing to include bio.ajax as proven by the addition of views AJAX block then it works. The bio.ajax is there, not sure how and if escaped in JSON format, but it must be there since that should trigger the library inclusion.
2. The only change between 2.x and 3.x is 3.x tries to be aware of BigPipe, but there is one tiny glitch I haven't figured it out, yet, that is the anomaly of Drupal.attachBehaviors and Drupal.detachBehaviors specufic to AJAX in BigPipe environment. While the current 3.x works for normal Views AJAX and Infinite scroll like IO pager and VIS, it might still miss with this particular non-views AJAX:
   https://git.drupalcode.org/project/blazy/-/blob/3.0.11/js/src/plugin/bla...
   This might explain the regression, and that is why I still keep the issue open:
   📌 Compatibility with BigPipe Postponed

However given Views AJAX it works, it should be the easier solution than pursuing such anomaly.

Till further fixes, you can use such a workaround if that works for you with BigPipe.

Patches are welcome in Blazy for better bio.ajax inclusion, then we can close this. FYI, I avoided harsh all-or-nothing inclusion like Responsive image AJAX which is similar workaround to bio.ajax, and prefer softer approach per usage basics, but it apparently creates issues and challenges. Maybe we should exclude admin pages to be less harsh, or just fix per usage as before, and add awareness to variation AJAX.

Should be fixed here.

Automatically closed - issue fixed for 2 weeks with no activity.