feat: cria estilização e organizacao do breadcrumb

react/components/Html/styles.css

@@ -82,10 +82,10 @@
   }
 }
 
-@media (min-width:374px) and (max-width:376px) {
+/* @media (min-width:374px) and (max-width:376px) {
 [class*="html--m3-html-product-sumary"]  {
   height: 254.8px!important;
-}}
+}} */
 @media  (max-width:1920px) {
   [class*="html--m3-html-product-sumary"]  {
     height: unset;
@@ -103,3 +103,7 @@ max-width:314.4px;
 [class*="html--quantity"] {
   max-width: 128px!important;
  }
+ [class*="html--m3-html-product-sumary"]{
+  display: flex;
+  flex-direction: column;
+ }

store/blocks/pdp/product-shelf-related.jsonc

@@ -23,9 +23,16 @@
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-summary-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
+  "product-list-price": {
+    "props": {
+      "blockClass": "m3-product-list-price",
+      "message": "de {listPriceValue} por"
+    }
+  },
   "slider-layout#m3-carousel-products": {
     "props": {
       "blockClass": "m3-carousel-products",

store/blocks/pdp/product.jsonc

@@ -181,17 +181,18 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "flex-layout.row#identifieAndName",
+      "flex-layout.row#product-name",
+      "product-identifier.product",
       "flex-layout.row#availability",
       "sku-selector"
     ]
   },
-  "flex-layout.row#identifieAndName": {
+  // "flex-layout.row#identifieAndName": {
-    "props": {
+  //   "props": {
-      "blockClass": "identifieAndName"
+  //     "blockClass": "identifieAndName"
-    },
+  //   },
-    "children": ["flex-layout.row#product-name", "product-identifier.product"]
+  //   "children": ["flex-layout.row#product-name", "product-identifier.product"]
-  },
+  // },
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,25 @@
+/*
+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 */
+.container {
+  padding: 16px 40px;
+}
+.container .homeIcon {
+  display: none;
+}
+.container .homeLink {
+  vertical-align: top;
+}
+.container .homeLink::after {
+  content: "Home";
+  visibility: visible;
+}
+.container :global(.vtex-breadcrumb-1-x-term) {
+  color: #929292;
+}

styles/css/vtex.product-price.css

@@ -1,79 +1,29 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.listPrice--m3-product-list-price {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #BABABA;
+  padding: 8px 0;
 }
 
-.sellingPrice {
+.sellingPrice--hasListPrice {
-  color: #3f3f40;
+  font-family: "Open Sans";
-  font-size: 1.25rem;
+  font-style: normal;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
-}
+  font-size: 24px;
-
+  line-height: 33px;
-.installments {
+  text-align: center;
-  color: #727273;
+  color: #000000;
-  margin-bottom: 1rem;
+}
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.slider-layout.css

@@ -121,6 +121,16 @@
   column-gap: 12px;
   bottom: -16px;
 }
+@media (max-width: 1024px) {
+  .paginationDotsContainer--m3-carousel-products {
+    bottom: -24px;
+  }
+}
+@media (max-width: 768px) {
+  .paginationDotsContainer--m3-carousel-products {
+    bottom: -40px;
+  }
+}
 .paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
   background-color: #000000;
 }

styles/css/vtex.store-components.css

@@ -11,12 +11,7 @@
 .newsletter {
   background: #000000;
   color: #ffffff;
-  margin: 64px 0;
+  margin-top: 64px;
-}
-@media (max-width: 1024px) {
-  .newsletter {
-    margin: 32px 0;
-  }
 }
 .newsletter :global(.vtex-store-components-3-x-container) {
   padding: 0;
@@ -510,84 +505,118 @@
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
+  margin: 16px 0;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+.skuSelectorContainer .frameAround {
-  font-size: 0;
-  margin-left: 16px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
-  visibility: visible;
-  display: block;
-  content: "OUTRAS CORES:";
-  font-size: 14px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
-  display: none;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
-  border-radius: 30px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
-  border-radius: 21px;
-  color: #000000;
-}
-.skuSelectorContainer .diagonalCross {
-  top: 0px;
-  right: 10px;
-  bottom: 0px;
-  left: 10px;
-  transform: rotateY(180deg);
-  color: black;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
-  font-size: 0;
-  margin-left: 16px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
-  visibility: visible;
-  display: block;
-  content: "OUTROS TAMANHOS:";
-  font-size: 14px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
   width: 40px;
   height: 40px;
   border-radius: 30px;
+  z-index: 3;
+  padding: 0;
+  border-color: #000;
   top: 0;
   left: 0;
-  right: 0;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+.skuSelectorContainer .skuSelectorInternalBox {
-  margin: auto;
+  border-radius: 50%;
-  padding: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin-left: 0 !important;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorSelectorImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorName::before,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "OUTROS TAMANHOS: ";
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+  margin-left: 0;
+  gap: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
+  border-color: #000000;
+  border-width: 2px;
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border-radius: 100%;
   width: 40px;
   height: 40px;
-  border-radius: 30px;
-  color: #000000;
   border: 1px solid #989898;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  width: 30px;
+  height: 30px;
+  transform: rotate(274deg);
+  left: 4px;
+  top: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
   padding: 0;
-  margin: auto;
+  display: flex;
-  font-family: "Open Sans";
+  align-items: center;
-  font-style: normal;
+  justify-content: center;
+  margin: 0 auto;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: rgba(185, 185, 185, 0.6);
 }
-.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
-  margin-right: 5px;
+  color: #000000;
-}
-.skuSelectorContainer .frameAround {
-  border-color: #000;
-  z-index: 9;
-}
-
-.skuSelectorOptionsList {
-  margin: 0;
 }
 
 .productImageTag--imageDescription--main {

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

@@ -0,0 +1,21 @@
+.container {
+  padding: 16px 40px;
+
+  .homeIcon {
+    display: none;
+  }
+
+  .homeLink {
+    vertical-align: top;
+
+    &::after {
+      content: "Home";
+      visibility: visible;
+    }
+  }
+
+  :global(.vtex-breadcrumb-1-x-term) {
+    color: $color-gray6;
+  }
+
+}

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

@@ -55,7 +55,7 @@
         }
 
         :global(.vtex-store-components-3-x-productNameContainer--quickview) {
-          font-family: 'Open Sans';
+          font-family: $font-family;
           font-style: normal;
           font-weight: 300;
           font-size: 20px;

styles/sass/pages/product/vtex.product-price.scss

@@ -0,0 +1,25 @@
+.listPrice--m3-product-list-price {
+
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+
+  text-decoration-line: line-through;
+  color: $color-gray9;
+  padding: 8px 0;
+
+}
+
+.sellingPrice--hasListPrice {
+
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+
+  text-align: center;
+  color: $color-black;
+}

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

@@ -110,6 +110,14 @@
   column-gap: 12px;
   bottom: -16px;
 
+  @media (max-width:1024px) {
+    bottom: -24px;
+  }
+
+  @media (max-width:768px) {
+    bottom: -40px;
+  }
+
   .paginationDot--m3-carousel-products {
     background-color: $color-black;
   }

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

@@ -2,11 +2,8 @@
   background: $color-black;
   color: $color-white;
 
-  margin: 64px 0;
+  margin-top: 64px;
 
-  @media (max-width:1024px) {
-    margin: 32px 0;
-  }
 
   :global(.vtex-store-components-3-x-container) {
     padding: 0;
@@ -593,110 +590,255 @@
 }
 
 // SKU E TAMANHOS
+// .skuSelectorContainer {
+//   display: flex;
+//   flex-direction: column-reverse;
+
+//   .skuSelectorSubcontainer--cor {
+//     .skuSelectorName {
+//       font-size: 0;
+
+//       margin-left: 16px;
+
+//       &::after {
+//         visibility: visible;
+//         display: block;
+//         content: "OUTRAS CORES:";
+//         font-size: 14px;
+//       }
+//     }
+
+//     .skuSelectorSelectorImageValue,
+//     .skuSelectorNameSeparator {
+//       display: none;
+//     }
+
+//     .frameAround {
+//       border-radius: 30px;
+//     }
+
+//     .skuSelectorItemImageValue,
+//     .skuSelectorInternalBox {
+//       border-radius: 21px;
+//       color: $color-black;
+//     }
+//   }
+
+//   .diagonalCross {
+//     top: 0px;
+//     right: 10px;
+//     bottom: 0px;
+//     left: 10px;
+//     transform: rotateY(180deg);
+//     color: black;
+//   }
+
+//   .skuSelectorSubcontainer--tamanho {
+
+//     .skuSelectorName {
+//       font-size: 0;
+
+//       margin-left: 16px;
+
+//       &::after {
+//         visibility: visible;
+//         display: block;
+//         content: "OUTROS TAMANHOS:";
+//         font-size: 14px;
+//       }
+//     }
+
+//     .frameAround {
+//       // border: 1px solid #989898;
+//       width: 40px;
+//       height: 40px;
+//       border-radius: 30px;
+//       top: 0;
+//       left: 0;
+//       right: 0;
+//     }
+
+//     .skuSelectorInternalBox {
+//       margin: auto;
+//       padding: 0;
+//       width: 40px;
+//       height: 40px;
+//       border-radius: 30px;
+//       color: $color-black;
+//       border: 1px solid #989898;
+//     }
+
+//     .skuSelectorItemTextValue {
+//       padding: 0;
+//       margin: auto;
+//       font-family: $font-family;
+//       font-style: normal;
+//       font-weight: 400;
+//       font-size: 14px;
+//       line-height: 19px;
+
+
+//       color: rgba(185, 185, 185, 0.6);
+//     }
+//   }
+
+//   .valueWrapper .skuSelectorItemTextValue {
+//     margin-right: 5px;
+//   }
+
+//   .frameAround {
+//     border-color: #000;
+//     z-index: 9;
+//   }
+// }
+
+// .skuSelectorOptionsList {
+//   margin: 0;
+// }
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
+  margin: 16px 0;
 
-  .skuSelectorSubcontainer--cor {
+  .frameAround {
-    .skuSelectorName {
+    width: 40px;
-      font-size: 0;
+    height: 40px;
-
+    border-radius: 30px;
-      margin-left: 16px;
+    z-index: 3;
-
+    padding: 0;
-      &::after {
+    border-color: #000;
-        visibility: visible;
+    top: 0;
-        display: block;
+    left: 0;
-        content: "OUTRAS CORES:";
-        font-size: 14px;
-      }
-    }
-
-    .skuSelectorSelectorImageValue,
-    .skuSelectorNameSeparator {
-      display: none;
-    }
-
-    .frameAround {
-      border-radius: 30px;
-    }
-
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-      color: $color-black;
-    }
   }
 
-  .diagonalCross {
+  .skuSelectorInternalBox {
-    top: 0px;
+    border-radius: 50%;
-    right: 10px;
+  }
-    bottom: 0px;
+
-    left: 10px;
+  .skuSelectorSubcontainer--cor {
-    transform: rotateY(180deg);
+    margin: 0;
-    color: black;
+
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorOptionsList {
+        margin-left: 0 !important;
+
+        .skuSelectorItem {
+          margin: 0;
+        }
+      }
+
+      .skuSelectorTextrName,
+      .skuSelectoContainer {
+        .skuSelectorSelectorImageValue {
+          font-size: 0;
+        }
+
+        .skuSelectorName::before {
+          content: 'OUTRAS CORES';
+          font-family: 'Open Sans', sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: #929292;
+        }
+      }
+    }
   }
 
   .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 10px;
 
-    .skuSelectorName {
+    .skuSelectorNameContainer {
-      font-size: 0;
+      margin: 0;
 
-      margin-left: 16px;
+      .skuSelectorTextContainer {
+        .skuSelectorName {
+          font-size: 0;
 
-      &::after {
+          &::after {
-        visibility: visible;
+            font-family: 'Open Sans', sans-serif;
-        display: block;
+            font-style: normal;
-        content: "OUTROS TAMANHOS:";
+            font-weight: 400;
-        font-size: 14px;
+            font-size: 14px;
+            line-height: 19px;
+            content: 'OUTROS TAMANHOS: ';
+            color: #929292;
+          }
+        }
+      }
+
+      .skuSelectorOptionsList {
+        margin: 0;
+        margin-left: 0;
+        gap: 16px;
+
+        .skuSelectorItem {
+          border-radius: 100%;
+          width: 40px;
+          height: 40px;
+          margin: 0;
+
+          .frameAround--sku-selector {
+            border-color: #000000;
+            border-width: 2px;
+            width: 40px;
+            height: 40px;
+            border-radius: 24px;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            z-index: 5;
+            margin: 0 auto;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+          }
+
+          .skuSelectorInternalBox {
+            border-radius: 100%;
+            width: 40px;
+            height: 40px;
+            border: 1px solid #989898;
+
+            .diagonalCross {
+              width: 30px;
+              height: 30px;
+              transform: rotate(274deg);
+              left: 4px;
+              top: 5px;
+            }
+
+
+
+
+            .skuSelectorItemTextValue {
+              padding: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin: 0 auto;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 19px;
+              color: rgba(185, 185, 185, 0.6);
+            }
+          }
+        }
+
+        .skuSelectorItem--selected {
+          .skuSelectorInternalBox {
+            .skuSelectorItemTextValue {
+              color: #000000;
+            }
+          }
+        }
       }
     }
-
-    .frameAround {
-      // border: 1px solid #989898;
-      width: 40px;
-      height: 40px;
-      border-radius: 30px;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .skuSelectorInternalBox {
-      margin: auto;
-      padding: 0;
-      width: 40px;
-      height: 40px;
-      border-radius: 30px;
-      color: $color-black;
-      border: 1px solid #989898;
-    }
-
-    .skuSelectorItemTextValue {
-      padding: 0;
-      margin: auto;
-      font-family: $font-family;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-
-
-      color: rgba(185, 185, 185, 0.6);
-    }
   }
-
-  .valueWrapper .skuSelectorItemTextValue {
-    margin-right: 5px;
-  }
-
-  .frameAround {
-    border-color: #000;
-    z-index: 9;
-  }
-}
-
-.skuSelectorOptionsList {
-  margin: 0;
 }
 
 .productImageTag--imageDescription--main {

styles/sass/utils/_vars.scss

@@ -1,4 +1,4 @@
-$font-family : $font-family;
+$font-family :'Open Sans';
 $color-black: #000000;
 $color-black2: #292929;
 $color-black3: #575757;