Widget magnifier not working/showing on product page for 2.4.5-p1

[Rickertje]

Preconditions and environment

M2.4.5-p1

Steps to reproduce

1) Clean install with sample data 2) Edit vendor/magento/theme-frontend-luma/etc/view.xml 3) Change var name enabled from false to true 4) Upgrade/clear cache etc 5) Visit the store and select a product fe: https://[magentoshopdomain]/index.php/breathe-easy-tank.html 6) Move the mouse over the product image.

Expected result

Magnifier is shown

Actual result

Magnifier is not shown

Additional information

Also see: https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/magnifier/

No response

Release note

No response

Triage and priority

• [ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• [ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• [ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• [X] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

[m2-assistant[bot]]

Hi @Rickertje. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this

• To learn more about issue processing workflow, refer to the Code Contributions.

  Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Dash, here is your Magento Instance: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering Admin access: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering/admin_ee52 Login: 9af8efb9 Password: c65340a29283

[m2-assistant[bot]]

Hi @engcom-Dash. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
     Details

     - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
     - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
     - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Dash]

Hi @Rickertje ,

Verified the issue in 2.4-develop instance,But the issue is not reproducible.

Preconditions: Magento Version 2.4-Develop PHP Version 8.1

Steps to reproduce:

• install with sample data
• Edit vendor/magento/theme-frontend-luma/etc/view.xml
• Change var name enabled from false to true
• Upgrade/clear cache.
• Visit the store and select a product front end
• Move the mouse over the product image.

Kindly refer the below screenshots:

**

Magnifier is shown in the front-end and Customer can able perform Zoom in out Zoom out action.As per the description we are getting expected result.So the issue is not reproducible in 2.4-develop instance,Kindly provide more information if the issue is still reproducible.

Regards,

[Rickertje]

Sorry I was refering to the onpage magnifier widget that pops up when you hover over the product image on the product page (without clicking on the image). Can you check again? In your develop instance this is not working also. Below is an example (from a M2.3.7-p1 store).

Also see: https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/magnifier/

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Dash, here is your Magento Instance: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering Admin access: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering/admin_70f6 Login: 9a559eb9 Password: dc418cf17923

[engcom-Dash]

@mageto give me 2.4-develop instance

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service[bot]]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @engcom-Dash, here is your Magento Instance: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering Admin access: https://f5bf876a865c988cf925d2ea90a28930.instances-prod.magento-community.engineering/admin_2409 Login: 968bd590 Password: 6a878b0bc5f1

[engcom-Dash]

Hi @Rickertje,

Thanks for your quick response,

We verified the issue in 2.4-develop branch as per your last comments,Hence the issue is reproducible in 2.4-develop instance.Magnifier is not shown in Store front end when we select any particular product.But there is no Error appearing in Developer console. Kindly refer the below screenshots:

NOTE: As per your last comments the issue is reproducible in 2.3.7-p1 Magento instance,Now we are supporting magento version 2.4-develop,Kindly upgrade the magento version and check the issue again maybe you got some information from there.

Regards,

[Rickertje]

@magento give me 2.4.5-p1 instance

[magento-deployment-service[bot]]

Hi @Rickertje. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @Rickertje, unfortunately there is no ability to deploy Magento instance at the moment. Please try again later.

[Rickertje]

@magento give me 2.4.5-p1 instance

[magento-deployment-service[bot]]

Hi @Rickertje. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @Rickertje, unfortunately there is no ability to deploy Magento instance at the moment. Please try again later.

[Rickertje]

@magento give me 2.4.5-p1 instance

[magento-deployment-service[bot]]

Hi @Rickertje. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service[bot]]

Hi @Rickertje, unfortunately there is no ability to deploy Magento instance at the moment. Please try again later.

[Rickertje]

Hi @engcom-Dash. I'm unable to get a 2.4.5-p1 instance from @magento so I'm not 100% sure if the JMigrate warnings are present in 2.4.5-p1 (although they show up in my local clean install overhere). That is why I updated the problem description and removed my comment about these warnings. Furthermore: I already updated my environment from 2.3.7-p1 to 2.4.5-p1 and that was when I dicovered that the magnifier widget is not working anymore. I see that you verified the problem on 2.4.5-p1. Do you have enough information to proceed? Thanks Rajasekar.

[engcom-Dash]

Hi @Rickertje ,

Issue confirmed !

Verified the issue in 2.4-develop instance and the issue is reproducible,Hence we are confirming the issue.

Preconditions: Magento Version 2.4-develop PHP version 8.1

Steps to reproduce:

• install with sample data
• Edit vendor/magento/theme-frontend-luma/etc/view.xml
• Change var name enabled from false to true
• Upgrade/clear cache.
• Visit the store and select a product front end
• Move the mouse over the product image.

Kindly refer the below screenshots:

After changed var name enabled from false to true,The magnifier is not appearing product page,This is actual result as per the description,Hence we confirming the issue in 2.4-develop instance

Regards,

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-8294 is successfully created for this GitHub issue.

[m2-assistant[bot]]

:white_check_mark: Confirmed by @engcom-Dash. Thank you for verifying the issue.
Issue Available: @engcom-Dash, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

[github-jira-sync-bot]

:x: You don't have permission to export this issue.

[TuVanDev]

The reported issue affects Magento 2.4.5 and 2.4.6. It has already been fixed internally ACP2E-1648. The fix is now available in the 2.4-develop branch https://github.com/magento/magento2/commit/9f62fc907385b6ddf546dae933519bd4da81e984

For anyone looking to apply the fix: we can quickly grab a patch from the git commit by adding ".patch" or ".diff" at the end of the URL: https://github.com/magento/magento2/commit/9f62fc907385b6ddf546dae933519bd4da81e984.patch

And here is the patch content:

From 9f62fc907385b6ddf546dae933519bd4da81e984 Mon Sep 17 00:00:00 2001
From: Alexandra Zota <[zota@adobe.com](mailto:zota@adobe.com)>
Date: Tue, 21 Feb 2023 11:19:37 +0200
Subject: [PATCH] ACP2E-1648: fix magnifier loading

---
 lib/web/magnifier/magnifier.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/web/magnifier/magnifier.js b/lib/web/magnifier/magnifier.js
index 29726688f4d5f..8b525b2e047b8 100644
--- a/lib/web/magnifier/magnifier.js
+++ b/lib/web/magnifier/magnifier.js
@@ -541,11 +541,9 @@

             showWrapper = false;
             $(thumbObj).on('load', function () {
-                if (data.length > 0) {
+                if (data.hasOwnProperty(idx)) {
                     data[idx].status = 1;
-
                     $(largeObj).on('load', function () {
-
                         if (largeObj.width > largeWrapper.width() || largeObj.height > largeWrapper.height()) {
                             showWrapper = true;
                             bindEvents(eventType, thumb);
@@ -559,7 +557,6 @@
                             updateLensOnLoad(idx, thumb, largeObj, largeWrapper);
                         }
                     });
-
                     largeObj.src = data[idx].largeUrl;
                 }
             });

Document on how to apply a composer patch for Adobe Commerce (Magento) on Cloud infrastructure https://experienceleague.adobe.com/docs/commerce-knowledge-base/kb/how-to/how-to-apply-a-composer-patch-provided-by-magento.html?lang=en, and in more details here https://experienceleague.adobe.com/docs/commerce-cloud-service/user-guide/develop/upgrade/apply-patches.html#:~:text=Copy-,Apply%20a%20custom%20patch,-When%20you%20deploy

Document on how to apply a composer patch for Adobe Commerce (Magento) on a non-Cloud project: https://experienceleague.adobe.com/docs/commerce-operations/upgrade-guide/patches/apply.html