store/blocks/pdp/product.jsonc

@@ -3,9 +3,7 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#tab-product",
-      "flex-layout.row#specifications-title",
-      "product-specification-group#table",
       "list-context.product-list#m3-shelf-retaletd",
       "newsletter#m3-newsletter",
       "product-questions-and-answers"
@@ -27,12 +25,7 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
+
-    "props": {
-      "marginBottom": 7
-    },
-    "children": ["product-description"]
-  },
   "condition-layout.product#availability": {
     "props": {
       "conditions": [

store/blocks/pdp/tab-layout-product.jsonc

@@ -0,0 +1,120 @@
+{
+  "tab-layout#tab-product": {
+    "children": ["tab-list#tab-product", "tab-content#tab-product"],
+    "props": {
+      "blockClass": "tab-product",
+      "defaultActiveTabId": "tab-product1"
+    }
+  },
+  "tab-list#tab-product": {
+    "props": {
+      "blockClass": "m3-tab-list-product"
+    },
+    "children": [
+      "tab-list.item#tab-product1",
+      "tab-list.item#tab-product2",
+      "tab-list.item#tab-product3",
+      "tab-list.item#tab-product4",
+      "tab-list.item#tab-product5"
+    ]
+  },
+  "tab-list.item#tab-product1": {
+    "props": {
+      "blockClass": "m3-tab-list-item-product",
+      "tabId": "tab-product1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+  "tab-list.item#tab-product2": {
+    "props": {
+      "blockClass": "m3-tab-list-item-product ",
+      "tabId": "tab-product2",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#tab-product3": {
+    "props": {
+      "blockClass": "m3-tab-list-item-product ",
+      "tabId": "tab-product3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#tab-product4": {
+    "props": {
+      "blockClass": "m3-tab-list-item-product ",
+      "tabId": "tab-product4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#tab-product5": {
+    "props": {
+      "blockClass": "m3-tab-list-item-product ",
+      "tabId": "tab-product5",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content#tab-product": {
+    "children": [
+      "tab-content.item#tab-product1",
+      "tab-content.item#tab-product2",
+      "tab-content.item#tab-product3",
+      "tab-content.item#tab-product4",
+      "tab-content.item#tab-product5"
+    ]
+  },
+  "tab-content.item#tab-product1": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "tab-product1"
+    }
+  },
+  "tab-content.item#tab-product2": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "tab-product2"
+    }
+  },
+  "tab-content.item#tab-product3": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "tab-product3"
+    }
+  },
+  "tab-content.item#tab-product4": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "tab-product4"
+    }
+  },
+  "tab-content.item#tab-product5": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "tab-product5"
+    }
+  },
+  "flex-layout.row#description": {
+    "props": {
+      "blockClass": "description",
+      "marginBottom": 7
+    },
+    "children": ["product-images#imageDescription", "product-description"]
+  },
+  "flex-layout.row#wrapperImageDescription": {
+    "props": {
+      "blockClass": "imageDescription",
+      "width": "50%"
+    },
+    "children": ["product-images#imageDescription"]
+  },
+  "product-images#imageDescription": {
+    "props": {
+      "blockClass": "imageDescription",
+      "displayMode": "first-image",
+      "aspectRatio": {
+        "desktop": "1:1"
+      }
+    }
+  }
+}

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 */
+.flexRow--description :global(.vtex-store-components17-x-container) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  width: 100% !important;
+  max-width: 94.4444444444% !important;
+  background-color: red;
 }
 
-@media screen and (min-width: 40em) {
+.flexRowContent--description {
-  .flexRowContent--menu-link,
+  gap: 32px;
-  .flexRowContent--main-header {
+}
-    padding: 0 1rem;
+@media (min-width: 1920px) {
+  .flexRowContent--description .stretchChildrenWidth {
+    width: unset !important;
   }
 }
-
+@media (max-width: 1024px) {
-@media screen and (min-width: 80rem) {
+  .flexRowContent--description {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  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%;
+    flex-direction: column;
-}
+  }
-
+  .flexRowContent--description .stretchChildrenWidth {
-.flexColChild--quickviewDetails:first-child {
+    width: unset !important;
-  overflow-y: auto;
+  }
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }

styles/css/vtex.slider-layout.css

@@ -16,7 +16,7 @@
 
 .sliderTrackContainer--m3-carousel-products {
   max-width: 94.712%;
-  margin: 0 auto;
+  margin: 0 40px;
 }
 @media (max-width: 590px) {
   .sliderTrackContainer--m3-carousel-products {

styles/css/vtex.store-components.css

@@ -113,3 +113,50 @@
   height: 32px;
   border-bottom: 3px solid #BFBFBF;
 }
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+.productDescriptionContainer .content {
+  text-align: justify;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  max-width: 632px;
+}
+@media (min-width: 1920px) {
+  .productDescriptionContainer .content {
+    max-width: 872px !important;
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media (max-width: 1024px) {
+  .productDescriptionContainer .content {
+    font-size: 14px;
+    line-height: 19px;
+    max-width: none;
+  }
+}
+
+.productImageTag--imageDescription--main {
+  max-height: 632px !important;
+}
+@media (min-width: 1920px) {
+  .productImageTag--imageDescription--main {
+    max-height: 872px !important;
+  }
+}
+@media (max-width: 1024px) {
+  .productImageTag--imageDescription--main {
+    max-height: unset !important;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -0,0 +1,79 @@
+/*
+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--tab-product {
+  width: 100%;
+  max-width: 94.44%;
+  margin: 0 auto;
+}
+@media (min-width: 1920px) {
+  .container--tab-product {
+    max-width: 1840px;
+  }
+}
+.container--tab-product .listContainer--m3-tab-list-product {
+  justify-content: space-around;
+  border-bottom: 1px solid #B9B9B9;
+  margin-bottom: 32px;
+}
+@media (max-width: 1024px) {
+  .container--tab-product .listContainer--m3-tab-list-product {
+    flex-direction: column;
+  }
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItem {
+  margin: 0;
+  padding: 0;
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #BFBFBF;
+  text-transform: capitalize;
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product {
+  background: #fff;
+  border: none !important;
+  width: 114px;
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product,
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive {
+  background: #fff;
+  border: none !important;
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button),
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) {
+  background-color: #fff;
+  border: none;
+  border-bottom: 2px solid #000000;
+  border-radius: 0;
+  position: relative;
+  top: 2px;
+}
+@media (max-width: 1024px) {
+  .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button),
+  .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) {
+    border-bottom: 0;
+    top: 0;
+  }
+}
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button) :global(.vtex-button__label),
+.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  color: #000000;
+}

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

@@ -5,4 +5,3 @@
 .html--pdp-breadcrumb {
   background-color: green;
 }
-

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

@@ -0,0 +1,44 @@
+// INICIO DESCRIÇÃO
+.flexRow--description {
+  :global(.vtex-store-components17-x-container) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    width: 100% !important;
+    max-width: 94.444444444444444444444444444444% !important;
+    background-color: red;
+  }
+}
+
+.flexRowContent--description {
+  gap: 32px;
+
+  @media (min-width:1920px) {
+    .stretchChildrenWidth {
+      width: unset !important;
+      // width: 100% !important;
+    }
+  }
+
+  @media (max-width:1024px) {
+
+    display: flex;
+    flex-direction: column;
+
+    .stretchChildrenWidth {
+      width: unset !important;
+    }
+  }
+}
+
+// @media (max-width: 1024px) {
+//   .flexRowContent--description {
+//     display: flex;
+//     flex-direction: column;
+//   }
+
+//   .flexRowContent--description .stretchChildrenWidth {
+//     width: 100% !important;
+//   }
+// }
+
+// FIM DESCRIÇÃO

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

@@ -8,7 +8,8 @@
 .sliderTrackContainer--m3-carousel-products {
 
   max-width: 94.712%;
-  margin: 0 auto;
+  // margin: 0 auto;
+  margin: 0 40px;
 
   @media (max-width:590px) {
     max-width: 78.933333333333333333333333333333%;

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

@@ -118,3 +118,58 @@
 }
 
 // FIM NEWSLETTER
+
+// INICIO DESCRIÇÃO
+.flexRow--description {}
+
+.productDescriptionContainer {
+  .productDescriptionTitle {
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+  }
+
+  .content {
+    text-align: justify;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+    max-width: 632px;
+    // max-width: 632px !important;
+
+    @media (min-width:1920px) {
+
+      max-width: 872px !important;
+      font-size: 18px;
+      line-height: 25px;
+
+    }
+
+    @media (max-width:1024px) {
+      font-size: 14px;
+      line-height: 19px;
+      max-width: none;
+      // max-width: none !important;
+    }
+  }
+}
+
+.productImageTag--imageDescription--main {
+  max-height: 632px !important;
+
+  @media (min-width:1920px) {
+    max-height: 872px !important;
+  }
+
+  @media (max-width:1024px) {
+    max-height: unset !important;
+  }
+}
+
+// FIM DESCRIÇÃO

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

@@ -0,0 +1,89 @@
+.container--tab-product {
+
+  width: 100%;
+  max-width: 94.44%;
+  margin: 0 auto;
+
+  @media (min-width:1920px) {
+    max-width: 1840px;
+
+  }
+
+
+
+  .listContainer--m3-tab-list-product {
+    justify-content: space-around;
+    border-bottom: 1px solid #B9B9B9;
+    margin-bottom: 32px;
+
+    @media (max-width:1024px) {
+      flex-direction: column;
+    }
+
+    .listItem {
+      margin: 0;
+      padding: 0;
+
+      :global(.vtex-button) {
+
+        :global(.vtex-button__label) {
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 38px;
+
+          display: flex;
+          align-items: center;
+          text-align: center;
+
+          color: #BFBFBF;
+          text-transform: capitalize;
+        }
+      }
+    }
+
+    .listItem--m3-tab-list-item-product {
+      background: #fff;
+      border: none !important;
+      width: 114px;
+
+    }
+
+    .listItemActive--m3-tab-list-item-product,
+    .listItemActive {
+      background: #fff;
+      border: none !important;
+
+
+      :global(.vtex-button) {
+        background-color: #fff;
+        border: none;
+        border-bottom: 2px solid #000000;
+        border-radius: 0;
+        position: relative;
+        top: 2px;
+
+
+
+        @media (max-width:1024px) {
+          border-bottom: 0;
+          top: 0;
+        }
+
+        :global(.vtex-button__label) {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 38px;
+
+          color: #000000;
+
+
+        }
+      }
+    }
+
+
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,3 +1,4 @@
+$font-family : "Open Sans";
 $color-black: #000000;
 $color-black2: #292929;