feat(ProductImage): fix product image

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

store/blocks/pdp/product.jsonc

@@ -91,7 +91,11 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false,
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailMaxHeight": 90,
+      "showPaginationDots": false,
+      "showNavigationArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -101,20 +105,20 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      // "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
+      // "share#default"
     ]
   },
 

styles/css/agenciamagma.store-theme.css

@@ -8,9 +8,9 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .html {
-  background-color: red;
+  background-color: blue;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: white;
 }

styles/css/vtex.product-price.css

@@ -1,6 +1,6 @@
 .listPrice {
   color: #727273;
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
   font-size: 1rem;
 }
 
@@ -21,17 +21,17 @@
 
 .savings {
   font-weight: 500;
-  color: #79B03A;
+  color: #79b03a;
 }
 
 .sellingPriceValue--summary {
   font-size: 1.25rem;
   font-weight: 600;
-  color: #2E2E2E;
+  color: #2e2e2e;
 }
 
 .savings--summary {
-  background: #8BC34A;
+  background: #8bc34a;
   border-radius: 1000px;
   align-items: center;
   display: flex;
@@ -41,21 +41,21 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .savings-discount--summary {
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
 .listPrice--summary {
   margin-bottom: 0.25rem;
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 .installments--summary {
@@ -74,6 +74,6 @@
   font-size: 0.875rem;
   font-weight: 600;
   vertical-align: baseline;
-  color: #FFFFFF;
+  color: #ffffff;
   padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.store-components.css

@@ -7,6 +7,51 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.skuSelectorContainer {
-  background: red;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.vtex-flex-layout-0-x-stretchChildrenWidth {
+  width: 46.11% !important;
+}
+
+.relative :first-child {
+  min-width: 100%;
+}
+
+.productImage {
+  height: 664px;
+}
+
+.productImageTag {
+  min-height: 100%;
+}
+
+.productImageTag--main {
+  width: unset !important;
+  min-height: 100% !important;
+  max-height: unset !important;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: 90px !important;
+  height: 90px !important;
+  margin-right: 16px;
+}
+
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.thumbImg {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px !important;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +1,7 @@
 .html {
-  background-color: red;
+  background-color: blue;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: white;
 }
-

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

@@ -1,3 +1,50 @@
-.newsletter{
+.skuSelectorContainer {
-    background: red;
+  display: flex;
-}
+  flex-direction: column-reverse;
+}
+
+.vtex-flex-layout-0-x-stretchChildrenWidth {
+  width: 46.11% !important;
+}
+
+.relative {
+  :first-child {
+    min-width: 100%;
+  }
+}
+
+.productImage {
+  height: 664px;
+}
+
+.productImageTag {
+  min-height: 100%;
+}
+
+.productImageTag--main {
+  width: unset !important;
+  min-height: 100% !important;
+  max-height: unset !important;
+}
+
+.figure {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: 90px !important;
+  height: 90px !important;
+  margin-right: 16px;
+}
+
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.thumbImg {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px !important;
+}