feat:#2 Descricao do produto

store/blocks/home/home.jsonc

@@ -2,9 +2,9 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      "example-component",      /* You can make references to blocks defined in other files.
+      "example-component",
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
+      /* You can make references to blocks defined in other files.
-      "flex-layout.row#deals",
+       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
       "__fold__",
       "rich-text#shelf-title",
       "flex-layout.row#shelf",
@@ -51,9 +51,11 @@
       "blockClass": "shelfTitle"
     }
   },
+
   "flex-layout.row#shelf": {
     "children": ["list-context.product-list#demo1"]
   },
+
   "list-context.product-list#demo1": {
     "blocks": ["product-summary.shelf"],
     "children": ["slider-layout#demo-products"],
@@ -61,12 +63,13 @@
       "orderBy": "OrderByTopSaleDESC"
     }
   },
+
   "slider-layout#demo-products": {
     "props": {
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "fullWidth": false,

store/blocks/pdp/product-description.json

@@ -0,0 +1,106 @@
+{
+  "html#image-home": {
+    "props": {
+      "tag": "div",
+      "testId": "product-images",
+      "blockClass": "image-home"
+    },
+    "children": ["html#image-description"]
+  },
+
+  "html#product-description": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": ["tab-layout#home"]
+  },
+
+  "tab-layout#home": {
+    "children": ["tab-list#home", "tab-content#home"],
+    "props": {
+      "blockClass": "home",
+      "defaultActiveTabId": "descricao1"
+    }
+  },
+
+  "tab-list#home": {
+    "children": [
+      "tab-list.item#descricao1",
+      "tab-list.item#descricao2",
+      "tab-list.item#descricao3",
+      "tab-list.item#descricao4",
+      "tab-list.item#descricao5"
+    ]
+  },
+
+  "tab-list.item#descricao1": {
+    "props": {
+      "tabId": "descricao1",
+      "label": "Descrição",
+      "defaultActiveTab": true
+    }
+  },
+
+  "tab-list.item#descricao2": {
+    "props": {
+      "tabId": "descricao2",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao3": {
+    "props": {
+      "tabId": "descricao3",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao4": {
+    "props": {
+      "tabId": "descricao4",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-list.item#descricao5": {
+    "props": {
+      "tabId": "descricao5",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content#home": {
+    "children": [
+      "tab-content.item#descricao1",
+      "tab-content.item#descricao2",
+      "tab-content.item#descricao3",
+      "tab-content.item#descricao4",
+      "tab-content.item#descricao5"
+    ]
+  },
+
+  "tab-content.item#descricao1": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao1" }
+  },
+
+  "tab-content.item#descricao2": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao2" }
+  },
+
+  "tab-content.item#descricao3": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao3" }
+  },
+
+  "tab-content.item#descricao4": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao4" }
+  },
+
+  "tab-content.item#descricao5": {
+    "children": ["html#container-description"],
+    "props": { "tabId": "descricao5" }
+  }
+}

store/blocks/pdp/product.jsonc

@@ -2,36 +2,56 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
-      "condition-layout.product#availability",
+      "html#availability",
-      "flex-layout.row#description",
+      "html#product-description",
-      "flex-layout.row#specifications-title",
+      "rich-text#slider-text",
-      "product-specification-group#table",
+      "html#list-product",
-      "shelf.relatedProducts",
+      "product-questions-and-answers",
-      "product-questions-and-answers"
+      "flex-layout.row#container-newsletter"
     ]
   },
-  "html#breadcrumb": {
+
+  "html#list-product": {
     "props": {
-      "tag": "section",
+      "testId": "product-summary-list"
-      "testId": "breadcrumbs",
-      "blockClass": "pdp-breadcrumb"
     },
-    "children": ["breadcrumb"]
+    "children": ["list-context.product-list#container-products"]
   },
-  "flex-layout.row#specifications-title": {
+
-    "children": ["rich-text#specifications"]
+  "html#slider-layout#demo-products": {
-  },
-  "rich-text#specifications": {
     "props": {
-      "text": "##### Product Specifications"
+      "testId": "vtex-product-summary"
-    }
     },
+    "children": ["slider-layout#demo-products"]
+  },
+
+  "html#container-description": {
+    "props": {
+      "tag": "div",
+      "blockClass": "container-description"
+    },
+    "children": ["flex-layout.row#product-description"]
+  },
+
+  "flex-layout.row#product-description": {
+    "props": {
+      "blockClass": "product-description"
+    },
+    "children": ["html#image-description", "flex-layout.row#description"]
+  },
+
   "flex-layout.row#description": {
     "props": {
       "marginBottom": 7
     },
     "children": ["product-description"]
   },
+
+  "html#availability": {
+    "props": { "testId": "product-images" },
+    "children": ["condition-layout.product#availability"]
+  },
+
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -50,7 +70,8 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "container-main"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -78,46 +99,113 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
+
   "flex-layout.row#product-image": {
     "children": ["product-images"]
   },
+
+  "html#image-description": {
+    "props": {
+      "tag": "div",
+      "blockClass": "image-description"
+    },
+    "children": ["product-images#description"]
+  },
+
+  "product-images#description": {
+    "props": { "displayMode": "first-image" }
+  },
+
   "product-images": {
     "props": {
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": true
+      "fullWidth": true,
+      "displayThumbnailsArrows": false,
+      "thumbnailsOrientation": "horizontal",
+      "showPaginationDots": false,
+      "showNavigationArrows": false
     }
   },
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0
+      "rowGap": 0,
+      "blockClass": "description-main"
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#product-code",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      "html#product-price",
-      "flex-layout.row#selling-price",
+      "html#product-installments",
-      "product-installments",
+      "html#pix-discount",
-      "product-separator",
+      "html#sku-selector",
-      "sku-selector",
-      "product-quantity",
-      "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+      "html#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "html#shipping-simulator"
-      "share#default"
     ]
   },
 
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": ["flex-layout.row#product-name"]
+  },
+
+  "html#product-code": {
+    "props": { "testId": "product-code" },
+    "children": ["product-identifier.product"]
+  },
+
+  "html#product-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
+  "html#product-installments": {
+    "props": { "testId": "product-installments" },
+    "children": ["product-installments#divider"]
+  },
+
+  "html#pix-discount": {
+    "props": {
+      "tag": "section",
+      "testId": "pix-price",
+      "blockClass": "pix-discount"
+    },
+    "children": ["productText-component"]
+  },
+
+  "product-installments#divider": {
+    "props": {
+      "markers": ["discount"],
+      "blockClass": "divider",
+      "message": "{installmentsNumber} x de {installmentValue} <discount>sem juros</discount>",
+      "installmentsCriteria": "max-quantity-without-interest"
+    }
+  },
+
+  "html#shipping-simulator": {
+    "props": { "testId": "shipping-simulator" },
+    "children": ["flex-layout.col#shipping-simulator"]
+  },
+
+  "flex-layout.col#shipping-simulator": {
+    "children": ["shipping-simulator"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -125,6 +213,13 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
@@ -132,12 +227,20 @@
     }
   },
 
-  "flex-layout.row#buy-button": {
+  "html#buy-button": {
     "props": {
+      "tag": "div",
+      "testId": "add-to-cart-button",
+      "blockClass": "buy-button",
       "marginTop": 4,
       "marginBottom": 7
     },
-    "children": ["add-to-cart-button"]
+    "children": ["html#product-quantity", "add-to-cart-button"]
+  },
+
+  "html#product-quantity": {
+    "props": { "testId": "product-quantity" },
+    "children": ["product-quantity"]
   },
 
   "flex-layout.row#product-availability": {
@@ -160,8 +263,8 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-code",
-      "sku-selector",
+      "html#sku-selector",
       "flex-layout.row#availability"
     ]
   },
@@ -172,14 +275,66 @@
     "children": ["availability-subscriber"]
   },
 
-  "share#default": {
+  "flex-layout.row#container-newsletter": {
     "props": {
-      "social": {
+      "blockClass": "container-newsletter"
-        "Facebook": true,
+    },
-        "WhatsApp": true,
+    "children": [
-        "Twitter": false,
+      "flex-layout.row#text-newsletter",
-        "Pinterest": true
+      "newsletter-form#container-newsletter"
+    ]
+  },
+
+  "flex-layout.row#text-newsletter": {
+    "props": {
+      "blockClass": "text-newsletter"
+    },
+    "children": [
+      "rich-text#title-newsletter",
+      "rich-text#email-phrase-newsletter"
+    ]
+  },
+
+  "rich-text#title-newsletter": {
+    "props": {
+      "blockClass": "title-newsletter",
+      "textAlignment": "center",
+      "textPosition": "CENTER",
+      "text": "Assine nossa newsletter"
     }
+  },
+
+  "rich-text#email-phrase-newsletter": {
+    "props": {
+      "blockClass": "email-phrase-newsletter",
+      "textAlignment": "center",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail"
+    }
+  },
+
+  "newsletter-form#container-newsletter": {
+    "props": {
+      "blockClass": "container-newsletter"
+    },
+    "children": ["html#container-form-input"]
+  },
+
+  "html#container-form-input": {
+    "props": {
+      "blockClass": "container-form-input"
+    },
+    "children": ["newsletter-input-email", "newsletter-submit"]
+  },
+
+  "newsletter-input-email": {
+    "props": {
+      "placeholderText": "Digite seu e-mail"
+    }
+  },
+  "newsletter-submit": {
+    "props": {
+      "submitButtonLabel": "Enviar"
     }
   }
 }

store/interfaces.json

@@ -5,5 +5,9 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "productText-component":{
+    "component":"ProductText",
+    "render":"client"
   }
 }

styles/css/swiper.container-initialized.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.swiper-wrapper {
+  gap: 16px;
+}

styles/css/vtex.product-identifier.css

@@ -7,6 +7,12 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@media only screen and (max-width: 1023px) {
+  .product-identifier {
+    display: flex;
+  }
+}
+
 .product-identifier__label,
 .product-identifier__separator {
   display: none;
@@ -15,5 +21,5 @@
 .product-identifier__value {
   display: flex;
   justify-content: flex-end;
-  color: rgba(146, 146, 146, 0.4784313725);
+  color: rgba(146, 146, 146, 0.478);
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,52 @@
-.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
-.sellingPrice {
+*/
-  color: #3f3f40;
+/* Media Query M3 */
-  font-size: 1.25rem;
+/* Grid breakpoints */
-}
+.savings {
-
+  display: none;
-.sellingPriceValue {
-  font-size: 2.25rem;
-  font-weight: 700;
 }
 
 .installments {
-  color: #727273;
+  color: #929292;
-  margin-bottom: 1rem;
 }
 
-.savings {
+.listPrice {
-  font-weight: 500;
+  font-family: "Opens Sans", sans-serif;
-  color: #79B03A;
+  line-height: 19px;
+  color: #bababa;
+  font-size: 14px;
+}
+.listPrice .listPriceValue::before {
+  content: "de ";
+  font-size: 14px;
+}
+.listPrice .listPriceValue::after {
+  content: " por";
+  font-size: 14px;
 }
 
-.sellingPriceValue--summary {
+.installments--divider {
-  font-size: 1.25rem;
+  font-family: "Open Sans", sans-serif;
-  font-weight: 600;
+  line-height: 21px;
-  color: #2E2E2E;
+  font-size: 16px;
+  margin-bottom: 8px;
 }
 
-.savings--summary {
+.sellingPriceValue {
-  background: #8BC34A;
+  font-family: "Open Sans", sans-serif;
-  border-radius: 1000px;
+  font-weight: 700;
-  align-items: center;
+  font-size: 25px;
-  display: flex;
+  line-height: 38px;
-
+  color: #000;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
 }
 
-.savings-discount--summary {
+.installmentValue {
-  font-size: 0.875rem;
+  font-weight: 700;
-  font-weight: 600;
+  font-size: 16px;
-  vertical-align: baseline;
+  line-height: 22px;
-  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.product-quantity.css

@@ -0,0 +1,53 @@
+/*
+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 */
+.quantitySelectorContainer {
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+@media only screen and (max-width: 767px) {
+  .quantitySelectorContainer {
+    margin-bottom: 8px;
+  }
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+  height: 49px;
+  width: 31px;
+  font-size: 16px;
+  line-height: 22px;
+  border-left: 0;
+  border-right: 0;
+  border-top: 1px solid #c4c4c4;
+  border-bottom: 1px solid #c4c4c4;
+  color: #929292;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+  height: 49px;
+  font-size: 16px;
+  line-height: 22px;
+  border-right: 1px solid #c4c4c4;
+  border-bottom: 1px solid #c4c4c4;
+  border-top: 1px solid #c4c4c4;
+  background: #fff;
+  color: #000;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) {
+  height: 49px;
+  width: 10px;
+  font-size: 16px;
+  line-height: 22px;
+  border-left: 1px solid #c4c4c4;
+  border-bottom: 1px solid #c4c4c4;
+  border-top: 1px solid #c4c4c4;
+  background: #fff;
+  color: #000;
+}
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}

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

@@ -0,0 +1,82 @@
+.flexRowContent--container-main {
+  display: flex;
+  padding: 0;
+  @include mq(lg, max) {
+    padding: 0 40px;
+  }
+  @include mq(md, max) {
+    display: block;
+    padding: 0;
+  }
+  :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    padding: 0;
+    @include mq(md, max) {
+      width: 100% !important;
+    }
+    :global(.vtex-flex-layout-0-x-flexCol--description-main) {
+      margin-left: 32px;
+      @include mq(md, max) {
+        margin-left: 0;
+      }
+    }
+
+    :global(.vtex-button) {
+      background-color: $color-black;
+      border: none;
+      :global(.vtex-button__label) {
+        height: fit-content;
+        :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+          font-size: 0;
+          &::after {
+            font-family: "Open sans", sans-serif;
+            content: "ADICIONAR À SACOLA";
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.flexRow--container-price-slider {
+  display: flex;
+  justify-content: center;
+}
+
+.flexRowContent--product-description {
+  @include mq(md, max) {
+    display: block;
+  }
+  :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    @include mq(md, max) {
+      width: 100% !important;
+      display: block;
+    }
+  }
+}
+.flexRow--product-description {
+  :global(.vtex-store-components-3-x-container) {
+    @include mq(md, max) {
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+  }
+}
+.flexRow--container-newsletter {
+  margin-top: 64px;
+  width: 100%;
+  background-color: $color-black;
+  .flexRowContent--container-newsletter {
+    display: flex;
+    flex-direction: column;
+    .stretchChildrenWidth {
+      width: 100% !important;
+    }
+    .flexRowContent--text-newsletter {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+.savings {
+  display: none;
+}
+.installments {
+  color: $color-gray6;
+}
+
+.listPrice {
+  font-family: "Opens Sans", sans-serif;
+  line-height: 19px;
+  color: $color-gray10;
+
+  font-size: 14px;
+  .listPriceValue {
+    &::before {
+      content: "de ";
+      font-size: 14px;
+    }
+    &::after {
+      content: " por";
+      font-size: 14px;
+    }
+  }
+}
+
+.installments--divider {
+  font-family: "Open Sans", sans-serif;
+  line-height: 21px;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.sellingPriceValue {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: $color-black;
+}
+.installmentValue {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+}

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

@@ -0,0 +1,11 @@
+.nameContainer {
+  padding: 16px 0 8px 0;
+  .productNameContainer {
+    .productBrand {
+      font-family: "Open Sans", sans-serif;
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+.container {
+  margin: 0 40px;
+  .listContainer {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid $color-gray10;
+    @include mq(md, max) {
+      display: flex;
+      flex-direction: column;
+    }
+    .listItem {
+      margin: 0;
+      padding: 0;
+      :global(.vtex-button) {
+        background-color: transparent;
+        border: none;
+        color: $color-gray11;
+        :global(.vtex-button__label) {
+          font-family: "Open Sans", sans-serif;
+          font-size: 18px;
+          line-height: 38px;
+          font-weight: 400;
+          text-transform: capitalize;
+          @include mq(md, max) {
+            padding-left: 0;
+          }
+          &:hover {
+            color: $color-black;
+            border-bottom: 1px solid $color-black;
+            @include mq(md, max) {
+              border: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,4 +1,5 @@
-$color-black: #292929;
+$color-black: #000;
+$color-black-100: #292929;
 
 $color-white: #fff;
 
@@ -7,6 +8,12 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #929292;
+$color-gray7: #575757;
+$color-gray8: #868686;
+$color-gray9: #b9b9b9;
+$color-gray10: #bababa;
+$color-gray11: #bfbfbf;
 
 $color-blue: #4267b2;
 
@@ -15,11 +22,11 @@ $color-green: #4caf50;
 /* Grid breakpoints */
 $grid-breakpoints: (
   xs: 0,
-	cstm: 400,
+  cstm: 375,
-	sm: 576px,
+  sm: 768px,
-	md: 768px,
+  md: 1024px,
-	lg: 992px,
+  lg: 1920px,
-	xl: 1200px
+  xl: 2500px,
 ) !default;
 
 $z-index: (
@@ -27,5 +34,5 @@ $z-index: (
   level2: 10,
   level3: 15,
   level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;