feat: ajustando o product-image e carrosel em baixo

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

@@ -45,6 +45,7 @@
   },
   "flex-layout.row#product-main": {
     "props": {
+      "blockClass": "divProduct",
       "colGap": 7,
       "rowGap": 7,
       "marginTop": 4,
@@ -52,9 +53,14 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": [
+      "flex-layout.col#stack",
+      "flex-layout.col#right-col"
+    ]
   },
 
+
+
   "stack-layout": {
     "props": {
       "blockClass": "product"
@@ -78,35 +84,48 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "58%",
       "rowGap": 0
     }
   },
+
+
+  
   "flex-layout.row#product-image": {
+    "props":{
+
+    },
     "children": ["product-images"]
   },
+
   "product-images": {
     "props": {
+      "blockClass":"divImagens",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "displayThumbnailsArrows": false,
+      "showNavigationArrows": false,
+      "showPaginationDots": false
     }
   },
+  
   "flex-layout.col#right-col": {
     "props": {
+      "blockClass":"divInfoProduct",
       "preventVerticalStretch": true,
       "rowGap": 0
     },
     "children": [
       "flex-layout.row#product-name",
+      "flex-layout.row#product-modelo",
       "product-rating-summary",
       "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",
@@ -118,8 +137,16 @@
     ]
   },
 
+  "flex-layout.row#product-modelo": {
+    "props": {
+      "blockClass":"divNomeProductModelo"
+    },
+    "children": ["product-identifier.product"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
+      "blockClass":"divNomeProduct",
       "marginBottom": 3
     },
     "children": ["vtex.store-components:product-name"]

styles/css/agenciamagma.store-theme.css

@@ -12,5 +12,5 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: #fff;
 }

styles/css/vtex.breadcrumb.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -9,9 +10,15 @@
 /* Grid breakpoints */
 .container {
   background-color: #fff;
-  font-weight: 700;
+  font-weight: 400;
   font-size: 14px;
   line-height: 19px;
+  margin-left: 40px;
+}
+@media (min-width: 2500px) {
+  .container {
+    margin-left: 360px;
+  }
 }
 .container .homeIcon {
   display: none;
@@ -20,3 +27,26 @@
   content: "Home";
   display: inline-block;
 }
+.container .arrow .link {
+  font-size: 0;
+}
+.container .arrow .link--1::after {
+  content: "Sapatos";
+  display: inline-block;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.container .arrow .link--2::after {
+  content: "Sandálias";
+  display: inline-block;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.container .termArrow {
+  display: none;
+}
+.container .term {
+  display: none;
+}

styles/css/vtex.flex-layout.css

@@ -7,3 +7,32 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.flexRowContent--divProduct {
+  margin-top: 16px;
+  margin-left: 40px;
+  margin-bottom: 16px;
+  padding-right: 40px !important;
+  padding: 0;
+}
+.flexRowContent--divProduct .stretchChildrenWidth {
+  width: 100% !important;
+}
+
+.flexCol--divInfoProduct .flexRow--divNomeProduct {
+  text-align: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+.flexCol--divInfoProduct .flexRow--divNomeProductModelo {
+  text-align: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}

styles/css/vtex.stack-layout.css

@@ -1,10 +1,9 @@
-.stackItem--product {
+/*
-  width: 100%;
+0 - 600PX: Phone
-  min-height: 257px
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
-.stackItem--quickview {
+1800px + : Big desktop
-  right: 0;
+*/
-  top: 0;
+/* Media Query M3 */
-  left: auto;
+/* Grid breakpoints */
-}

styles/css/vtex.store-components.css

@@ -10,3 +10,31 @@
 .newsletter {
   background: red;
 }
+
+.container {
+  margin: 0;
+  padding: 0;
+}
+.container .productImagesContainer--divImagens {
+  width: 100%;
+}
+.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens {
+  width: 100% !important;
+}
+.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
+  max-height: 100% !important;
+  margin-bottom: 16px;
+}
+.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
+  margin-right: 16px;
+  padding: 0px;
+  width: 90px;
+  height: 90px !important;
+  border-radius: 8px;
+}

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

@@ -3,6 +3,6 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: $color-white;
 }
 

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

@@ -1,13 +1,42 @@
-.container{
+.container {
   background-color: $color-white;
-    font-weight: 700;
+  font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-    .homeIcon{
+  margin-left: 40px;
+  @media (min-width: 2500px) {
+    margin-left: 360px;
+  }
+  .homeIcon {
     display: none;
   }
-    .homeLink::after{
+  .homeLink::after {
-        content: 'Home';
+    content: "Home";
     display: inline-block;
   }
+  .arrow {
+    .link{
+        font-size: 0;
+    }
+    .link--1::after {
+        content: "Sapatos";
+        display: inline-block;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+    }
+    .link--2::after {
+        content: "Sandálias";
+        display: inline-block;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+    }
+}
+.termArrow{
+    display: none;
+}
+.term{
+    display: none;
+}
 }

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

@@ -0,0 +1,30 @@
+.flexRowContent--divProduct {
+  margin-top: 16px;
+  margin-left: 40px;
+  margin-bottom: 16px;
+  padding-right: 40px !important;
+  padding: 0;
+  .stretchChildrenWidth {
+    width: 100% !important;
+  }
+}
+.flexCol--divInfoProduct {
+  .flexRow--divNomeProduct {
+    text-align: end;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    color: #575757;
+  }
+  .flexRow--divNomeProductModelo {
+    text-align: end;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: rgba(146, 146, 146, 0.48);
+  }
+}

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

@@ -1,3 +1,32 @@
-.newsletter{
+.newsletter {
   background: red;
 }
+.container {
+  margin: 0;
+  padding: 0;
+  .productImagesContainer--divImagens {
+    width: 100%;
+    .productImagesGallerySwiperContainer {
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+      .productImagesGallerySlide--divImagens {
+        width: 100% !important;
+        .productImageTag {
+          max-height: 100% !important;
+          margin-bottom: 16px;
+        }
+      }
+    }
+    .carouselGaleryThumbs--divImagens {
+      .productImagesThumb {
+        margin-right: 16px;
+        padding: 0px;
+        width: 90px;
+        height: 90px !important;
+        border-radius: 8px;
+      }
+    }
+  }
+}