Merge branch 'fix/productImages' into development

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",

react/components/Html/styles.css

@@ -0,0 +1,3 @@
+[class*="html--pdp-breadcrumb"] {
+  background-color: white;
+}

store/blocks/pdp/product.jsonc

@@ -91,7 +91,12 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailMaxHeight": 90,
+      "maxHeight": 664,
+      "showPaginationDots": false,
+      "showNavigationArrows": false,
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {
@@ -102,7 +107,7 @@
     "children": [
       "flex-layout.row#product-name",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
       "product-separator",
@@ -113,8 +118,8 @@
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
-      "share#default"
+      "shipping-simulator"
+      // "share#default"
     ]
   },
 
@@ -135,11 +140,18 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "add-to-cart-button-background"
     },
     "children": ["add-to-cart-button"]
   },
 
+  "add-to-cart-button": {
+    "props": {
+      "blockClass": "add-to-cart-button"
+    }
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

styles/css/vtex.store-components.css

@@ -7,6 +7,29 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
-  background: red;
+.carouselContainer {
+  margin-left: 40px;
+}
+.carouselContainer:global(.vtex-store-components-3-x-productImagesGallerySlide) {
+  margin: unset;
+}
+
+.productImageTag--main {
+  width: unset !important;
+  height: 664px !important;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  max-width: 90px;
+  max-height: 90px;
+}
+.thumbImg--video {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: fit-content !important;
+  margin-right: 16px;
 }

styles/css/vtex.styleguide.css

@@ -0,0 +1,9 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */

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

@@ -1,3 +1,29 @@
-.newsletter{
-    background: red;
-}
+// left side
+
+.carouselContainer {
+  margin-left: 40px;
+  &:global(.vtex-store-components-3-x-productImagesGallerySlide) {
+    margin: unset;
+  }
+}
+
+.productImageTag--main {
+  width: unset !important;
+  height: 664px !important;
+}
+
+.thumbImg {
+  border-radius: 8px;
+  max-width: 90px;
+  max-height: 90px;
+
+  &--video {
+    width: 90px;
+    height: 90px;
+  }
+}
+
+.productImagesThumb {
+  width: fit-content !important;
+  margin-right: 16px;
+}

styles/sass/pages/product/vtex.styleguide.scss

@@ -0,0 +1,3 @@
+.hideDecorators {
+  // background-color: red;
+}