ACP2E-2266: add itemprop for main image

alzota · alzota · commit b9fb578ea6fb · 2023-10-17T13:27:32.000+03:00
diff --git a/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml b/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml
@@ -10,7 +10,6 @@
         <css src="mage/gallery/gallery.css"/>
     </head>
     <update handle="catalog_product_opengraph" />
-    <update handle="catalog_product_microdata" />
     <update handle="page_calendar"/>
     <body>
         <attribute name="itemtype" value="http://schema.org/Product" />
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
@@ -32,10 +32,9 @@ $mainImageData = $mainImage ?
     <img
         alt="main product photo"
         class="gallery-placeholder__image"
-        itemprop="image"
         src="<?= /* @noEscape */ $mainImageData ?>"
     />
-    <meta itemprop="image" content="<?= /* @noEscape */ $mainImageData ?>">
+    <link itemprop="image" href="<?= /* @noEscape */ $mainImageData ?>">
 </div>
 
 <script type="text/x-magento-init">
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/microdata/currency.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/microdata/currency.phtml
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/microdata/general.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/microdata/general.phtml
diff --git a/app/code/Magento/Catalog/view/frontend/web/js/gallery-mixin.js b/app/code/Magento/Catalog/view/frontend/web/js/gallery-mixin.js
@@ -28,12 +28,11 @@ define([
                 this._super(config, element);
                 $(element).one('f:load', function (event) {
                     if ($(event.target).hasClass('fotorama__active')) {
-                        let metaImg = document.createElement('meta');
+                        let linkImg = document.createElement('link');
 
-                        $(metaImg).attr('itemprop', 'image');
-                        $(metaImg).attr('content', $(event.target).find('img').attr('src'));
-                        $(event.target).append(metaImg);
-                        $(event.target).find('img').attr('itemprop', 'image');
+                        $(linkImg).attr('itemprop', 'image');
+                        $(linkImg).attr('href', $(event.target).find('img').attr('src'));
+                        $(event.target).append(linkImg);
                     }
                 });
             }
diff --git a/dev/tests/js/jasmine/tests/lib/mage/gallery/gallery.test.js b/dev/tests/js/jasmine/tests/lib/mage/gallery/gallery.test.js
@@ -57,9 +57,9 @@ define([
                     position: '1',
                     type: 'image',
                     videoUrl: null,
-                    thumb: 'http://test.domain/thumb-image.jpeg',
-                    full: 'http://test.domain/full-image.jpeg',
-                    img: 'http://test.domain/image.jpeg'
+                    thumb: '',
+                    full: '',
+                    img: ''
                 }
             ],
             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" itemprop="image" src="">' +
+            '<img alt="main product photo" class="gallery-placeholder__image" src="">' +
             '</div>');
     });
 
@@ -101,7 +101,6 @@ define([
             expect(gallery.settings.api).toBeDefined();
             expect(gallery.settings.activeBreakpoint).toEqual({});
             expect(gallery.config.options.height).toEqual(element.height());
-            expect(gallery.settings.$elementF.find('img[itemprop]')).toBeDefined();
 
             $.fn.data = originSpy;
         });
diff --git a/lib/web/mage/gallery/gallery.js b/lib/web/mage/gallery/gallery.js
@@ -314,10 +314,6 @@ define([
             $fotoramaElement.fotorama(config);
             $fotoramaElement.find('.fotorama__stage__frame.fotorama__active')
                     .one('f:load', function () {
-                        // Mark itemprop on main image
-                        $fotoramaElement
-                            .find('.fotorama__stage__frame.fotorama__active img')
-                            .attr('itemprop', 'image');
                         // Remove placeholder when main gallery image loads.
                         $element.find('.gallery-placeholder__image').remove();
                         $element
