Problem/Motivation

For Personalized content that relies on JavaScript, Drupal fails to load the required JavaScript or behaviors, causing personalized content or HTML to malfunction when dependent on JavaScript libraries.

Steps to reproduce

Export a content or block which relies on javascript to Personalization. Create a campaign and add the exported content to slot. Publish the campaign and open the page to see the Personalized content.

Proposed resolution

Load all necessary JavaScript libraries on all pages and reattach Drupal behaviors for the element after personalized content is available

Remaining tasks

User interface changes

API changes

Data model changes

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

kk5190 created an issue. See original summary.

kk5190’s picture

StatusFileSize
new2.96 KB
kk5190’s picture

StatusFileSize
new5.81 KB
scor’s picture

Priority: Normal » Major
Status: Active » Needs work
StatusFileSize
new5.81 KB

fixing missing new line at end of patch

scor’s picture

Title: Personalized content that relies on JavaScript, Drupal fails to load the required JavaScript or behaviors » Personalized content that relies on JavaScript libraries sometimes fails to behave as expected
Issue summary: View changes
cgoffin’s picture

StatusFileSize
new4.87 KB

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.

bramdriesen’s picture

Status: Needs work » Needs review
bramdriesen’s picture

Status: Needs review » Reviewed & tested by the community

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

bramdriesen’s picture

Status: Reviewed & tested by the community » Needs work

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

scor’s picture

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

bramdriesen’s picture

Version: 4.1.3 » 4.x-dev
Status: Needs work » Needs review

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

scor’s picture

StatusFileSize
new6.02 KB

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

bramdriesen’s picture

Status: Needs review » Needs work

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

Acquia support case number: 00977157

kk5190’s picture

StatusFileSize
new6.54 KB

Adding Fix for JS not working properly for lazy loading images on Experience Builder. It will fix the behaviors while editing in experience builder

bramdriesen’s picture

  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.

bramdriesen’s picture

Issue tags: +DrupalCon Lille 2023
bramdriesen’s picture

Status: Needs work » Needs review

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

bramdriesen’s picture

StatusFileSize
new6.75 KB

Static patch uploaded based on the latest rebased issue fork.

bramdriesen’s picture

StatusFileSize
new6.3 KB

Last patch did not apply

bramdriesen’s picture

StatusFileSize
new6.3 KB

Now for real 🙈

bramdriesen’s picture

Status: Needs review » Reviewed & tested by the community

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

bramdriesen’s picture

Status: Reviewed & tested by the community » Needs work

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

kk5190’s picture

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?

bramdriesen’s picture

Status: Needs work » Reviewed & tested by the community

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.

kk5190’s picture

StatusFileSize
new6.64 KB

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

kk5190’s picture

StatusFileSize
new6.41 KB
scor’s picture

bendale’s picture

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.

bendale’s picture

Status: Reviewed & tested by the community » Needs work
kk5190’s picture

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.

Advanced Configuration

cgoffin’s picture

StatusFileSize
new11 KB

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.

cgoffin’s picture

StatusFileSize
new10.99 KB

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.

cgoffin’s picture

StatusFileSize
new11.76 KB

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.

  • scor committed 0d0a94c2 on 4.x authored by bramdriesen
    Issue #3348204: Personalized content that relies on JavaScript libraries...
cgoffin’s picture

Status: Needs work » Fixed

I mark this ticket as fixed as the MR is merged and the adjustments are in release 4.1.9.

Status: Fixed » Closed (fixed)

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