feat(main): cria product-images responsivo

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/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./styles.css";
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/styles.css

@@ -0,0 +1,4 @@
+/* [class*="html--product-images"] {
+  background-color: yellow;
+  padding-right: 16px;
+} */

store/blocks/pdp/product.jsonc

@@ -43,59 +43,41 @@
       "Else": "flex-layout.row#product-availability"
     }
   },
+
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
+      "marginBottom": 5,
-      "rowGap": 7,
+      "blockClass": "productMain",
-      "marginTop": 4,
+      "fullWidth": true
-      "marginBottom": 7,
-      "paddingTop": 7,
-      "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["html#product-images", "flex-layout.col#right-col"]
   },
 
-  "stack-layout": {
+  "html#product-images": {
     "props": {
-      "blockClass": "product"
+      "tag": "section",
+      "testId": "product-images",
+      "blockClass": "product-images"
     },
-    "children": [
-      "flex-layout.row#product-image",
-      "product-bookmark",
-      "product-specification-badges"
-    ]
-  },
-
-  "product-specification-badges": {
-    "props": {
-      "specificationGroupName": "Group",
-      "specificationName": "On Sale",
-      "visibleWhen": "True",
-      "displayValue": "SPECIFICATION_NAME"
-    }
-  },
-
-  "flex-layout.col#stack": {
-    "children": ["stack-layout"],
-    "props": {
-      "width": "60%",
-      "rowGap": 0
-    }
-  },
-  "flex-layout.row#product-image": {
     "children": ["product-images"]
   },
+
   "product-images": {
     "props": {
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "maxHeight": 2560
     }
   },
+
   "flex-layout.col#right-col": {
     "props": {
+      "width": "50%",
       "preventVerticalStretch": true,
       "rowGap": 0
     },
@@ -148,12 +130,13 @@
       "paddingTop": 7
     },
     "children": [
-      "flex-layout.col#stack",
+      "html#product-images",
       "flex-layout.col#right-col-availability"
     ]
   },
   "flex-layout.col#right-col-availability": {
     "props": {
+      "width": "50%",
       "preventVerticalStretch": true,
       "rowGap": 0,
       "blockClass": "info-availability"

styles/configs/style.json

@@ -5,25 +5,25 @@
     { "s": 20 },
     {
       "ns": {
-        "value": 40,
+        "value": 64,
-        "minWidth": true
+        "minWidth": false
       }
     },
     {
       "m": {
-        "value": 40,
+        "value": 48,
         "minWidth": true
       }
     },
     {
       "l": {
         "value": 64,
-        "minWidth": true
+        "minWidth": false
       }
     },
     {
       "xl": {
-        "value": 80,
+        "value": 120,
         "minWidth": true
       }
     }

styles/css/vtex.flex-layout.css

@@ -1,98 +1,34 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRowContent--productMain {
+  padding: 0 40px;
+  gap: 32px;
 }
-
+@media only screen and (min-width: 1920px) {
-@media screen and (min-width: 40em) {
+  .flexRowContent--productMain {
-  .flexRowContent--menu-link,
+    padding: 0 360px;
-  .flexRowContent--main-header {
-    padding: 0 1rem;
   }
 }
-
+@media only screen and (max-width: 1024px) {
-@media screen and (min-width: 80rem) {
+  .flexRowContent--productMain {
-  .flexRowContent--menu-link,
+    flex-direction: column;
-  .flexRowContent--main-header {
+  }
-    padding: 0 0.25rem;
+  .flexRowContent--productMain .stretchChildrenWidth {
+    width: 100% !important;
+  }
+  .flexRowContent--productMain .stretchChildrenWidth :first-child {
+    padding-right: 0;
   }
 }
-
+@media only screen and (max-width: 1024px) and (max-width: 639px) {
-.flexRowContent--menu-link {
+  .flexRowContent--productMain .stretchChildrenWidth:first-child {
-  background-color: #03044e;
+    margin-bottom: 32px;
-  color: #fff;
+  }
-}
+}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}

styles/css/vtex.store-components.css

@@ -7,6 +7,41 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.container {
-  background: red;
+  margin: 0;
+  padding: 0;
+}
+
+.productImagesGallerySlide {
+  width: 100% !important;
+  margin: 0;
+}
+.productImagesGallerySlide .productImageTag {
+  width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover !important;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+  display: block;
+}
+.carouselGaleryThumbs .productImagesThumb {
+  width: 90px !important;
+  height: 100% !important;
+  margin-right: 16px;
+  margin-bottom: 0;
+}
+.carouselGaleryThumbs .productImagesThumb:last-child {
+  margin-right: 0;
+}
+.carouselGaleryThumbs .productImagesThumb .figure {
+  width: 100%;
+  height: 100%;
+}
+.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 8px;
+  object-fit: cover;
 }

styles/sass/pages/product/vtex.flex-layout.scss

@@ -0,0 +1,29 @@
+.flexRowContent--productMain {
+  // background-color: red;
+  padding: 0 40px;
+  gap: 32px;
+
+  @include mq(xl) {
+    padding: 0 360px;
+  }
+
+  @include mq(lg, max) {
+    // background-color: red;
+    flex-direction: column;
+
+    .stretchChildrenWidth {
+      width: 100% !important;
+      // background-color: blue;
+
+      :first-child {
+        padding-right: 0;
+      }
+
+      @include mq(md, max) {
+        &:first-child {
+          margin-bottom: 32px;
+        }
+      }
+    }
+  }
+}

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

@@ -1,3 +1,50 @@
-.newsletter{
+.container {
-    background: red;
+  margin: 0;
-}
+  padding: 0;
+}
+
+.productImagesGallerySlide {
+  width: 100% !important;
+  margin: 0;
+
+  .productImageTag {
+    // background-color: yellow;
+    width: 100%;
+    // height: 100% !important;
+    aspect-ratio: 1 / 1;
+    object-fit: cover !important;
+  }
+}
+
+.carouselGaleryThumbs {
+  // background-color: blue;
+  margin-top: 16px;
+  display: block;
+
+  .productImagesThumb {
+    width: 90px !important; // 13.5543% !important (em  1440px);
+    height: 100% !important;
+    margin-right: 16px;
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .figure {
+      width: 100%;
+      height: 100%;
+
+      .thumbImg {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        border-radius: 8px;
+        object-fit: cover;
+      }
+    }
+
+    // @include mq(lg, max) {
+    //   background-color: magenta;
+    // }
+  }
+}

styles/sass/utils/_vars.scss

@@ -14,18 +14,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 375px,
-	md: 768px,
+  md: 640px, // 768px,
-	lg: 992px,
+  lg: 1025px,
-	xl: 1200px
+  xl: 1920px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;