Personalized content that relies on JavaScript libraries sometimes fails to behave as expected

fixing missing new line at end of patch

I get the following warning:

Warning: foreach() argument must be of type array|object, null given in Drupal\acquia_perz\PerzHelper::attachLibrariesForPerz() (regel 400 van /var/www/html/docroot/modules/contrib/acquia_perz/src/PerzHelper.php)

I updated the patch to fix this.

RTBC since this solved an issue for us with lazy loading of images

Needs a re-roll. Patch in #6 is missing the addition of the new files it seems.

Thanks for updating the patch. Yes the new patch is missing the 2 new files acquia_perz.libraries.yml and js/perz.js.

Incorporated the fix from #6 with the patch of #4 in a merge request.

Thanks @BramDriesen. updating patch with most recent MR for people who may prefer to use files from this issue.

This fixes the behaviour for page loads. But not while editing content in the experience editor.

Acquia support case number: 00977157

Adding Fix for JS not working properly for lazy loading images on Experience Builder

1. +++ b/js/perz.js
   @@ -0,0 +1,25 @@
   +        // Additional Fix for Experience builder
   

   Should describe what is being fixed.

2. +++ b/js/perz.js
   @@ -0,0 +1,25 @@
   +        if (typeof window.AcquiaLift !== 'undefined') {
   +          if (typeof window.AcquiaLift.executionContext !== 'undefined' && window.AcquiaLift.executionContext === "experience-builder-iframe") {
   

   Double quotes

Also, this should have been a commit to the issue fork. OR if working with patches you need to provide an interdiff to show what changed.

Updated the JS file based on the last patch and updated the code remarks. Still need to test this.

Static patch uploaded based on the latest rebased issue fork.

Last patch did not apply

Now for real 🙈

I believe this is now working as expected. I'll ask for some additional tests from my team members.

Okay, just tested this again. It's still not working.

- Pushed a new component content (just a component with an image and lazy loading enabled).
- Synced content
- Added the content to an available slot --> Broken image handler
- Saved campaign
- Edit experience again --> Image is loading fine

Hello Brian,
I retested the issue, and it appears to be functioning correctly in the scenario you mentioned. Could you please provide additional details regarding this? Have we cleared the cache of the website or browser after applying the patch? Providing more information about the site's studio component and the method you're using for enabling lazy loading might assist me in reproducing the issue. Could you also verify in the source if the perz.js file contains the new changes by inspecting it through the developer tools?

This magically started working. Gotta love SiteStudio react changes that you have no control over and just come into your website when you do a rebuild/deploy.

Have we cleared the cache of the website or browser after applying the patch?

Just a reminder we live in 2023 and have wonderful tools like CI/CD that do this automatically on deploy. So of course the cache is cleared.

Providing more information about the site's studio component and the method you're using for enabling lazy loading might assist me in reproducing the issue.

This is provided in the Acquia ticket.

Could you also verify in the source if the perz.js file contains the new changes by inspecting it through the developer tools?

Yes it is.

Adding Fix for JS not working properly for lazy loading images on Experience Builder in some cases.

latest patch for 4.1.5: https://www.drupal.org/files/issues/2024-03-28/acquia_perz.patch →
latest patch for latest version 4.1.7: https://www.drupal.org/files/issues/2024-03-28/acquia_perz_js.patch →

Thanks @scor for both the patches.
I checked 4.1.5 and 4.1.7 with their corresponding patches and the behaviour was not resolved, we still see that the personalisation block does not show up with JS aggregation enabled, in addition to this, the 4.1.5 patch conflicts with site studio. However, both of these patches do not solve the JS aggregation-related issue.

Latest patch for latest version 4.1.8 https://www.drupal.org/files/issues/2024-08-07/perz_site_studio.patch → .

This patch introduces a toggle switch, "Dynamic JavaScript Support," under the Advanced Configuration of Acquia Personalization Settings. This feature enables the personalization of dynamic JavaScript components, including Site Studio components.

I noticed a race condition where the event listener often is added after the triggering of the event. Moving adding the event listener outside of the Drupal behavior fixed this. Commit added and here also a patch against 4.1.8.

It still doesn't work for the Acquia Site Studio modal component. This is because the div containing the modal is replaced to the top of the body and isn't in the context anymore. For this reason I updated the attachment of the behaviors to do it for the full page instead of for only the context. Here also a patch with the adjustment.

I also noticed that using the DeprecationHandler to render the content sent to the personalization tool, loses the attachments because the elements variable isn't passed by reference anymore. For this reason, I changed the code to do a manual check and call to the right method. Here also a patch for v4.1.8.