PWA-3217-V1::Thumbnail Images are getting hidden due to PR - BUG#PWA-… (

#4194) * PWA-3217-V1::Thumbnail Images are getting hidden due to PR - BUG#PWA-3215 * PWA-3217-V1::Thumbnail Images are getting hidden due to PR - BUG#PWA-3215 * PWA-3217-V1::Updated default image in PDP --------- Co-authored-by: Aanchal Pawar <[email protected]>
magento · Mar 18, 2024 · caa8187 · caa8187
1 parent b4e0f2a
commit caa8187
Show file tree

Hide file tree

Showing 11 changed files with 877 additions and 1,772 deletions.
diff --git a/...onents/CartPage/ProductListing/EditModal/__tests__/__snapshots__/productForm.spec.js.snap b/...onents/CartPage/ProductListing/EditModal/__tests__/__snapshots__/productForm.spec.js.snap
@@ -105,7 +105,7 @@ exports[`renders form errors 1`] = `
                     onError={[Function]}
                     onLoad={[Function]}
                     sizes="240px"
-                    src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=240&height=300&fit=cover"
+                    src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg"
                     srcSet="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -475,7 +475,7 @@ exports[`renders form with data 1`] = `
                     onError={[Function]}
                     onLoad={[Function]}
                     sizes="240px"
-                    src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=240&height=300&fit=cover"
+                    src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg"
                     srcSet="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,

diff --git a/.../lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap b/.../lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap
@@ -36,7 +36,7 @@ exports[`Snapshot test 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           sizes="100px"
-          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg"
           srcSet="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -112,7 +112,7 @@ https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/produc
           onError={[Function]}
           onLoad={[Function]}
           sizes="100px"
-          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg"
           srcSet="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -188,7 +188,7 @@ https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/produc
           onError={[Function]}
           onLoad={[Function]}
           sizes="100px"
-          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+          src="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg"
           srcSet="https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://master-7rqtwti-c5v7sxvquxwl4.eu-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
@@ -95,7 +95,7 @@ exports[`renders correctly with valid item data 1`] = `
         onError={[MockFunction]}
         onLoad={[MockFunction]}
         sizes="(max-width: 640px) 300px, 840px"
-        src="/media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=100&fit=cover"
+        src="/foo/bar/pic.png"
         srcSet="/media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,

diff --git a/packages/venia-ui/lib/components/Image/resourceImage.js b/packages/venia-ui/lib/components/Image/resourceImage.js
@@ -46,7 +46,7 @@ const ResourceImage = props => {
         ratio
     });
 
-    const { sizes, src, srcSet } = talonProps;
+    const { sizes, srcSet } = talonProps;
     const dimensionAttributes = {};
     if (typeof height !== 'undefined') {
         dimensionAttributes['--height'] = height + 'px';
@@ -65,8 +65,8 @@ const ResourceImage = props => {
             onError={handleError}
             onLoad={handleLoad}
             sizes={sizes}
-            src={src}
-            srcSet={srcSet}
+            src={resource}
+            srcSet={String(className).startsWith('item-image') ? null : srcSet}
             width={width}
         />
     );

diff --git a/...es/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/...es/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
@@ -31,7 +31,7 @@ exports[`Should disable delete icon while loading 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="100px"
-        src="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+        src="www.venia.com/p1"
         srcSet="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -198,7 +198,7 @@ exports[`Should render correctly 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="100px"
-        src="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+        src="www.venia.com/p1"
         srcSet="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -365,7 +365,7 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
         onError={[Function]}
         onLoad={[Function]}
         sizes="100px"
-        src="/media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+        src="www.venia.com/p1-variant1"
         srcSet="/media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 /media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 /media/catalog/product/www.venia.com/p1-variant1?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
@@ -532,7 +532,7 @@ exports[`Should render correctly with out of stock product 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="100px"
-        src="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=100&height=125&fit=cover"
+        src="www.venia.com/p1"
         srcSet="/media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 /media/catalog/product/www.venia.com/p1?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,

diff --git a/...ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap b/...ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap
@@ -29,7 +29,7 @@ exports[`should render properly 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="50px"
-        src="https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=50&height=62.5&fit=cover"
+        src="https://www.venia.com/product1-thumbnail.jpg"
         srcSet="https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
 https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
 https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,

diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js
@@ -242,7 +242,10 @@ const ProductFullDetail = props => {
                 onSubmit={handleAddToCart}
             >
                 <section className={classes.imageCarousel}>
-                    <Carousel images={mediaGalleryEntries} />
+                    <Carousel
+                        images={mediaGalleryEntries}
+                        smallImage={product.small_image}
+                    />
                 </section>
                 <section className={classes.title}>
                     <h1

diff --git a/...enia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap b/...enia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap
@@ -179,7 +179,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="640px"
-        src="/media/catalog/product/thumbnail1.png?auto=webp&format=png&width=640&height=800&fit=cover"
+        src="thumbnail1.png"
         srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,
@@ -271,7 +271,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           sizes="135px"
-          src="/media/catalog/product/thumbnail1.png?auto=webp&format=png&width=135&height=170&fit=cover"
+          src="thumbnail1.png"
           srcSet="/media/catalog/product/thumbnail1.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail1.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,
@@ -322,7 +322,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           sizes="135px"
-          src="/media/catalog/product/thumbnail2.png?auto=webp&format=png&width=135&height=170&fit=cover"
+          src="thumbnail2.png"
           srcSet="/media/catalog/product/thumbnail2.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail2.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail2.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,
@@ -373,7 +373,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           sizes="135px"
-          src="/media/catalog/product/thumbnail3.png?auto=webp&format=png&width=135&height=170&fit=cover"
+          src="thumbnail3.png"
           srcSet="/media/catalog/product/thumbnail3.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail3.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail3.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,
@@ -424,7 +424,7 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
           onError={[Function]}
           onLoad={[Function]}
           sizes="135px"
-          src="/media/catalog/product/thumbnail4.png?auto=webp&format=png&width=135&height=170&fit=cover"
+          src="thumbnail4.png"
           srcSet="/media/catalog/product/thumbnail4.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail4.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail4.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,

diff --git a/...nia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap b/...nia-ui/lib/components/ProductImageCarousel/__tests__/__snapshots__/thumbnail.spec.js.snap
@@ -32,7 +32,7 @@ exports[`renders root class if not the active Thumbnail 1`] = `
       onError={[Function]}
       onLoad={[Function]}
       sizes="135px"
-      src="/media/catalog/product/thumbnail.png?auto=webp&format=png&width=135&height=170&fit=cover"
+      src="thumbnail.png"
       srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,
@@ -86,7 +86,7 @@ exports[`renders the Thumbnail component correctly 1`] = `
       onError={[Function]}
       onLoad={[Function]}
       sizes="135px"
-      src="/media/catalog/product/thumbnail.png?auto=webp&format=png&width=135&height=170&fit=cover"
+      src="thumbnail.png"
       srcSet="/media/catalog/product/thumbnail.png?auto=webp&format=png&width=40&height=50&fit=cover 40w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=80&height=100&fit=cover 80w,
 /media/catalog/product/thumbnail.png?auto=webp&format=png&width=160&height=200&fit=cover 160w,

diff --git a/packages/venia-ui/lib/components/ProductImageCarousel/carousel.js b/packages/venia-ui/lib/components/ProductImageCarousel/carousel.js
@@ -32,7 +32,7 @@ const IMAGE_WIDTH = 640;
  * @returns {React.Element} React carousel component that displays a product image
  */
 const ProductImageCarousel = props => {
-    const { images } = props;
+    const { images, smallImage } = props;
     const { formatMessage } = useIntl();
     const talonProps = useProductImageCarousel({
         images,
@@ -87,7 +87,7 @@ const ProductImageCarousel = props => {
                     image: classes.currentImage_placeholder,
                     root: classes.imageContainer
                 }}
-                src={transparentPlaceholder}
+                src={smallImage ? smallImage : transparentPlaceholder}
             />
         );
     }