ACP2E-2266: set itemprop for main product image with or w/o fotorama loading for all types of products.

Author: alzota

app/code/Magento/Catalog/view/frontend/requirejs-config.js

@@ -18,6 +18,9 @@ var config = {
         mixins: {
             'Magento_Theme/js/view/breadcrumbs': {
                 'Magento_Catalog/js/product/breadcrumbs': true
+            },
+            'mage/gallery/gallery': {
+                'Magento_Catalog/js/gallery-mixin': true
             }
         }
     }

app/code/Magento/Catalog/view/frontend/web/js/gallery-mixin.js

@@ -0,0 +1,37 @@
+/************************************************************************
+ *
+ * ADOBE CONFIDENTIAL
+ * ___________________
+ *
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ * ************************************************************************
+ */
+
+define([
+    'jquery',
+    'mage/utils/wrapper'
+], function ($, wrapper) {
+    'use strict';
+
+    return function (initialize) {
+        // eslint-disable-next-line no-shadow
+        return wrapper.wrap(initialize, function (initialize, config, element) {
+            initialize(config, element);
+            $(element).one('f:load', function (event) {
+                if ($(event.target).hasClass('fotorama__active')) {
+                    $(event.target).find('img').attr('itemprop', 'image');
+                }
+            });
+        });
+    };
+});

dev/tests/js/jasmine/tests/lib/mage/gallery/gallery.test.js

@@ -57,9 +57,9 @@ define([
                     position: '1',
                     type: 'image',
                     videoUrl: null,
-                    thumb: '',
-                    full: '',
-                    img: ''
+                    thumb: 'http://test.domain/thumb-image.jpeg',
+                    full: 'http://test.domain/full-image.jpeg',
+                    img: 'http://test.domain/image.jpeg'
                 }
             ],
             magnifierOpts: {
@@ -78,7 +78,7 @@ define([
         };
         element = $('<div class="gallery-placeholder' +
             ' _block-content-loading" data-gallery-role="gallery-placeholder">' +
-            '<img alt="main product photo" class="gallery-placeholder__image" src="">' +
+            '<img alt="main product photo" class="gallery-placeholder__image" itemprop="image" src="">' +
             '</div>');
     });
 
@@ -101,6 +101,7 @@ define([
             expect(gallery.settings.api).toBeDefined();
             expect(gallery.settings.activeBreakpoint).toEqual({});
             expect(gallery.config.options.height).toEqual(element.height());
+            expect(gallery.settings.$elementF.find('.fotorama__stage__frame.fotorama__active img')).toBeDefined();
 
             $.fn.data = originSpy;
         });