feat(pdp): Adiciona product images

store/blocks/pdp/product.jsonc

@@ -95,6 +95,10 @@
   },
   "product-images": {
     "props": {
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "thumbnailAspectRatio": "1:1",
+      "thumbnailMaxHeight": 90,
       "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
         "desktop": "auto",
@@ -106,7 +110,8 @@
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0
+      "rowGap": 0,
+      "width": "46%"
     },
     "children": [
       "flex-layout.row#product-name",

styles/css/vtex.store-components.css

@@ -10,16 +10,41 @@
 .container {
   margin-left: 40px;
   margin-right: 40px;
+  padding: 0;
 }
 
 .newsletter {
   background: red;
 }
 
-/*:global(.vtex-store-components-3-x-productImage) {
+.productImageTag--main {
-  width: 664px;
+  max-height: max-content !important;
-  height: 664px;
+}
-}*/
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+
+.thumbImg {
+  height: 90px;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  margin-right: 16px;
+}
+
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
   height: 664px;
@@ -139,7 +164,7 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: color-gray6;
+  color: #929292;
 }
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;

styles/sass/pages/product/vtex.store-components.scss

@@ -1,6 +1,7 @@
 .container {
   margin-left: 40px;
   margin-right: 40px;
+  padding: 0;
 }
 
 .newsletter {
@@ -8,10 +9,33 @@
 }
 
 //IMAGENS
-/*:global(.vtex-store-components-3-x-productImage) {
+.productImageTag--main {
-  width: 664px;
+  max-height: max-content !important;
-  height: 664px;
+}
-}*/
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+
+.thumbImg {
+  height: 90px;
+  max-width: 90px;
+}
+
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  max-width: 90px;
+  margin-right: 16px;
+}
 
 /*:global(.vtex-store-components-3-x-productImageTag) {
   width: 664px;
@@ -149,7 +173,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
-      color: color-gray6;
+      color: $color-gray6;
     }
   }