diff --git a/app/code/Magento/Catalog/Block/Product/ImageFactory.php b/app/code/Magento/Catalog/Block/Product/ImageFactory.php
index f37ee026a406f..92ed892eeb2a6 100644
--- a/app/code/Magento/Catalog/Block/Product/ImageFactory.php
+++ b/app/code/Magento/Catalog/Block/Product/ImageFactory.php
@@ -1,12 +1,13 @@
objectManager = $objectManager;
$this->presentationConfig = $presentationConfig;
$this->viewAssetPlaceholderFactory = $viewAssetPlaceholderFactory;
$this->viewAssetImageFactory = $viewAssetImageFactory;
$this->imageParamsBuilder = $imageParamsBuilder;
+ $this->imageViewModel = $imageViewModel ?? ObjectManager::getInstance()->get(ImageViewModel::class);
}
/**
@@ -171,7 +176,8 @@ public function create(Product $product, string $imageId, ?array $attributes = n
'ratio' => $this->getRatio($imageMiscParams['image_width'] ?? 0, $imageMiscParams['image_height'] ?? 0),
'custom_attributes' => $this->filterCustomAttributes($attributes),
'class' => $this->getClass($attributes),
- 'product_id' => $product->getId()
+ 'product_id' => $product->getId(),
+ 'view_model' => $this->imageViewModel
],
];
diff --git a/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml
new file mode 100644
index 0000000000000..17654dd8023a3
--- /dev/null
+++ b/app/code/Magento/Catalog/Test/Mftf/ActionGroup/StorefrontAssertProductImageUniqueContainerActionGroup.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Assert product image container is unique.
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml
index 9ca961e06e580..5dcb04979f08f 100644
--- a/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml
+++ b/app/code/Magento/Catalog/Test/Mftf/Section/StorefrontCategoryMainSection.xml
@@ -1,8 +1,8 @@
@@ -38,6 +38,7 @@
+
diff --git a/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml
new file mode 100644
index 0000000000000..25b531ba9675f
--- /dev/null
+++ b/app/code/Magento/Catalog/Test/Mftf/Test/StorefrontProductImageContainerOnCatalogTest.xml
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/code/Magento/Catalog/ViewModel/Category/Image.php b/app/code/Magento/Catalog/ViewModel/Category/Image.php
index 2982779bd2eb3..241c2920d6b0d 100644
--- a/app/code/Magento/Catalog/ViewModel/Category/Image.php
+++ b/app/code/Magento/Catalog/ViewModel/Category/Image.php
@@ -43,4 +43,14 @@ public function getUrl(Category $category, string $attributeCode = self::ATTRIBU
{
return $this->image->getUrl($category, $attributeCode);
}
+
+ /**
+ * Get unique container ID for image
+ * @param $productid string
+ * @return string
+ */
+ public function getProductUniqId( $productid) : string
+ {
+ return uniqid($productid);
+ }
}
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
index c108525d3048d..37bc5ee3b4d4b 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
@@ -11,8 +11,9 @@
$width = (int)$block->getWidth();
$height = (int)$block->getHeight();
$paddingBottom = $block->getRatio() * 100;
+$productUniqId = $block->getViewModel()->getProductUniqId($block->getProductId());
?>
-
+
getCustomAttributes() as $name => $value): ?>
@@ -26,7 +27,7 @@ $paddingBottom = $block->getRatio() * 100;
getProductId()} {
+.product-image-container-{$productUniqId} {
width: {$width}px;
height: auto;
aspect-ratio: {$width} / {$height};
@@ -35,7 +36,7 @@ $styles = <<