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
| Comment | File | Size | Author |
|---|---|---|---|
| #34 | acquia_perz-bind_js-3348204-34.patch | 11.76 KB | cgoffin |
| #33 | acquia_perz-bind_js-3348204-33.patch | 10.99 KB | cgoffin |
| #32 | acquia_perz-bind_js-3348204-32.patch | 11 KB | cgoffin |
| #31 | Screenshot 2024-08-07 at 7.11.15 PM.png | 75.17 KB | kk5190 |
| #31 | perz_site_studio.patch | 10.2 KB | kk5190 |
Issue fork acquia_perz-3348204
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
Comment #2
kk5190 commentedComment #3
kk5190 commentedComment #4
scor commentedfixing missing new line at end of patch
Comment #5
scor commentedComment #6
cgoffin commentedI 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.
Comment #7
bramdriesenComment #8
bramdriesenRTBC since this solved an issue for us with lazy loading of images
Comment #9
bramdriesenNeeds a re-roll. Patch in #6 is missing the addition of the new files it seems.
Comment #10
scor commentedThanks for updating the patch. Yes the new patch is missing the 2 new files acquia_perz.libraries.yml and js/perz.js.
Comment #12
bramdriesenIncorporated the fix from #6 with the patch of #4 in a merge request.
Comment #13
scor commentedThanks @BramDriesen. updating patch with most recent MR for people who may prefer to use files from this issue.
Comment #14
bramdriesenThis fixes the behaviour for page loads. But not while editing content in the experience editor.
Acquia support case number: 00977157
Comment #15
kk5190 commentedAdding Fix for JS not working properly for lazy loading images on Experience Builder. It will fix the behaviors while editing in experience builder
Comment #16
bramdriesenShould describe what is being fixed.
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.
Comment #17
bramdriesenComment #18
bramdriesenUpdated the JS file based on the last patch and updated the code remarks. Still need to test this.
Comment #19
bramdriesenStatic patch uploaded based on the latest rebased issue fork.
Comment #20
bramdriesenLast patch did not apply
Comment #21
bramdriesenNow for real 🙈
Comment #22
bramdriesenI believe this is now working as expected. I'll ask for some additional tests from my team members.
Comment #23
bramdriesenOkay, 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
Comment #24
kk5190 commentedHello 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?
Comment #25
bramdriesenThis 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.
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.
This is provided in the Acquia ticket.
Yes it is.
Comment #26
kk5190 commentedAdding Fix for JS not working properly for lazy loading images on Experience Builder in some cases.
Comment #27
kk5190 commentedComment #28
scor commentedlatest 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
Comment #29
bendale commentedThanks @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.
Comment #30
bendale commentedComment #31
kk5190 commentedLatest 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.
Comment #32
cgoffin commentedI 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.
Comment #33
cgoffin commentedIt 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.
Comment #34
cgoffin commentedI 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.
Comment #36
cgoffin commentedI mark this ticket as fixed as the MR is merged and the adjustments are in release 4.1.9.