feat: Estiliza botão de quantidade e de adicionar à sacola

react/Example.tsx

@@ -1,3 +1,3 @@
-import Example from "./components/Example/Example";
+import Example from "./components/Example/ProductContext";
 
 export default Example;

store/blocks/minicart.jsonc

@@ -2,7 +2,8 @@
   "add-to-cart-button": {
     "props": {
       "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "customPixelEventId": "add-to-cart-button",
+      "text": "ADICIONAR À SACOLA"
     }
   },
 

store/blocks/pdp/product-assembly.jsonc

@@ -32,17 +32,13 @@
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +92,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product.jsonc

@@ -106,14 +106,11 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "product-rating-summary",
       "flex-layout.row#selling-price",
       "product-installments",
       "sku-selector",
-      "product-quantity",
-      "product-assembly-options",
-      "product-gifts",
       "flex-layout.row#buy-button",
+      "product-gifts",
       "availability-subscriber",
       "shipping-simulator"
     ]
@@ -137,9 +134,10 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "buy-button"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity#size", "add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {
@@ -172,5 +170,13 @@
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
+  },
+
+  "product-quantity#size": {
+    "props": {
+      "size": "large",
+      "width": "28%",
+      "showLabel": false
+    }
   }
 }

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,17 @@
+/*
+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 */
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #fff;
+  padding: 7px 0;
+}

styles/css/vtex.flex-layout.css

@@ -55,7 +55,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 
@@ -95,7 +95,7 @@
   max-height: 100%;
 }
 
-.flexRowContent .flexColChild--quickviewDetails:first-child {
+.flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;
   overflow-x: hidden;
@@ -105,6 +105,18 @@
   height: 34% !important;
 }
 
-.flexRow--addToCartRow {
+.stretchChildrenWidth {
-  padding-bottom: 1rem;
+  margin: 0;
+}
+
+.flexRowContent--buy-button {
+  height: 49px;
+  display: flex;
+  justify-content: center;
+}
+
+.flexRowContent--buy-button :global(.vtex-button) {
+  background: #000000;
+  border: none;
+  border-radius: 0;
 }

styles/css/vtex.product-price.css

@@ -19,11 +19,6 @@
   margin: 0;
 }
 
-.installments {
-  color: #929292;
-  margin-bottom: 16px;
-}
-
 .savings--summary {
   background: #8bc34a;
   border-radius: 1000px;
@@ -57,13 +52,31 @@
 }
 
 .installments {
-  font-size: 16px;
+  font-size: 0;
-  line-height: 22px;
-  color: #929292;
 }
 .installments .installmentsNumber,
 .installments .installmentValue {
   font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  margin-bottom: 16px;
+}
+.installments .installmentsNumber {
+  font-size: 0 !important;
+}
+.installments .installmentsNumber::before {
+  content: "36 x";
+  font-size: 16px;
+}
+.installments .installmentsNumber::after {
+  content: " de ";
+  font-weight: 400;
+  font-size: 16px;
+}
+.installments .installmentValue::after {
+  content: " sem juros";
+  font-weight: 400;
 }
 
 .savings--summaryPercentage {

styles/css/vtex.product-quantity.css

@@ -7,6 +7,39 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.quantitySelectorTitle {
+:global(.vtex-numeric-stepper__minus-button),
-  display: none;
+:global(.vtex-numeric-stepper__plus-button) {
+  background-color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+  border-radius: 0;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  border-top: 1px;
+  border-left: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: #cccccc;
+}
+
+:global(.vtex-numeric-stepper__plus-button) {
+  border-top: 1px;
+  border-right: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: #cccccc;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-top: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-right: none;
+  border-left: none;
+  border-color: #cccccc;
+  color: #929292;
+  outline: 0;
 }

styles/css/vtex.store-components.css

@@ -74,6 +74,16 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
   border-color: #000000;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
+  color: #d5d5d5;
+  top: 5px;
+  left: 6px;
+  bottom: 0px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  transform: rotateY(180deg);
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
   font-size: 0;
 }
@@ -82,7 +92,7 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: gray;
+  color: #929292;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
   display: none;
@@ -103,6 +113,9 @@
   width: 40px;
   height: 40px;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  border-color: #989898;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
   border-color: #000000;
   top: -2px;
@@ -112,12 +125,14 @@
   z-index: 2;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
+  color: #d5d5d5;
   top: 4px;
-  right: 6px;
+  left: 6px;
   bottom: 0px;
   z-index: 2;
-  width: 29px;
+  width: 28px;
-  height: 29px;
+  height: 28px;
+  transform: rotateY(180deg);
 }
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
   font-size: 0;
@@ -140,3 +155,53 @@
 .skuSelectorItemTextValue {
   color: rgba(185, 185, 185, 0.6);
 }
+
+.skuSelectorItem {
+  margin: 0 16px 0 0;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  align-items: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.shippingContainer :global(.vtex-button) {
+  font-size: 0;
+  position: relative;
+  top: -5px;
+  right: 148px;
+  width: 49px;
+  height: 49px;
+  margin-top: 27px;
+  background-color: #000000;
+}
+.shippingContainer :global(.vtex-button)::after {
+  content: "OK";
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 600;
+  color: white;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: relative;
+  left: 32px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: #000000;
+}
+
+:global(.vtex-button__label) {
+  height: fit-content;
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,8 @@
+.buttonText {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: $white;
+  padding: 7px 0;
+}

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

@@ -32,7 +32,6 @@
   background-color: #f0f0f0;
 }
 
-
 .flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
   color: #ffffff;
   font-size: 14px;
@@ -49,7 +48,7 @@
 }
 
 .flexRow--deals {
-  background-color: #0F3E99;
+  background-color: #0f3e99;
   padding: 14px 0px;
 }
 
@@ -89,13 +88,6 @@
   max-height: 100%;
 }
 
-// .flexColChild:first-child {
-//   display: flex;
-//   align-self: flex-end;
-// }
-
-.flexRowContent
-
 .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;
@@ -106,6 +98,27 @@
   height: 34% !important;
 }
 
-.flexRow--addToCartRow {
+.stretchChildrenWidth {
-  padding-bottom: 1rem;
+  margin: 0;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+}
+
+// .input-button {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+// }
+
+.flexRowContent--buy-button {
+  height: 49px;
+  display: flex;
+  justify-content: center;
+}
+
+.flexRowContent--buy-button :global(.vtex-button) {
+  background: $black;
+  border: none;
+  border-radius: 0;
 }

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

@@ -17,10 +17,10 @@
   margin: 0;
 }
 
-.installments {
+// .installments {
-  color: $gray-500;
+//   color: $gray-500;
-  margin-bottom: 16px;
+//   margin-bottom: 16px;
-}
+// }
 
 // .sellingPriceValue--summary {
 //   font-size: 1.25rem;
@@ -62,13 +62,37 @@
 }
 
 .installments {
-  font-size: 16px;
+  font-size: 0;
-  line-height: 22px;
-  color: $gray-500;
 
   .installmentsNumber,
   .installmentValue {
     font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $gray-500;
+    margin-bottom: 16px;
+  }
+
+  .installmentsNumber {
+    font-size: 0 !important;
+
+    &::before {
+      content: "36 x";
+      font-size: 16px;
+    }
+
+    &::after {
+      content: " de ";
+      font-weight: 400;
+      font-size: 16px;
+    }
+  }
+
+  .installmentValue {
+    &::after {
+      content: " sem juros";
+      font-weight: 400;
+    }
   }
 }
 

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

@@ -1,3 +1,36 @@
-.quantitySelectorTitle {
+:global(.vtex-numeric-stepper__minus-button),
-  display: none;
+:global(.vtex-numeric-stepper__plus-button) {
+  background-color: $white;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $black;
+  border-radius: 0;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  border-top: 1px;
+  border-left: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: $gray-1000;
+}
+
+:global(.vtex-numeric-stepper__plus-button) {
+  border-top: 1px;
+  border-right: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-color: $gray-1000;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-top: 1px;
+  border-bottom: 1px;
+  border-style: solid;
+  border-right: none;
+  border-left: none;
+  border-color: $gray-1000;
+  color: $gray-500;
+  outline: 0;
 }

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

@@ -11,18 +11,6 @@
   }
 }
 
-// .stretchChildrenWidth {
-//   width: 664px;
-// }
-
-// .stackItem--product {
-//   width: 664px;
-// }
-
-// .productImagesGallerySlide {
-//   width: 664px !important;
-// }
-
 .productNameContainer--quickview {
   font-weight: 300;
   font-size: 20px;
@@ -72,12 +60,29 @@
     .skuSelectorItemImageValue,
     .skuSelectorInternalBox {
       border-radius: 50%;
+      // width: 48px;
+      // height: 48px;
     }
 
+    // .skuSelectorInternalBox {
+    //   border-color: $gray-800;
+    // }
+
     .frameAround {
       border-color: $black;
     }
 
+    .diagonalCross {
+      color: $gray-900;
+      top: 5px;
+      left: 6px;
+      bottom: 0px;
+      z-index: 2;
+      width: 28px;
+      height: 28px;
+      transform: rotateY(180deg);
+    }
+
     .skuSelectorTextContainer {
       .skuSelectorName {
         font-size: 0;
@@ -87,7 +92,7 @@
           font-weight: 400;
           font-size: 14px;
           line-height: 19px;
-          color: gray;
+          color: $gray-500;
         }
       }
 
@@ -100,7 +105,7 @@
   .skuSelectorSubcontainer--tamanho {
     order: 1;
 
-    .skuSelectorItemTextValue{
+    .skuSelectorItemTextValue {
       padding: 0;
       margin: auto;
       font-weight: 400;
@@ -115,6 +120,10 @@
       height: 40px;
     }
 
+    .skuSelectorInternalBox {
+      border-color: $gray-800;
+    }
+
     .frameAround {
       border-color: $black;
       top: -2px;
@@ -125,12 +134,14 @@
     }
 
     .diagonalCross {
+      color: $gray-900;
       top: 4px;
-      right: 6px;
+      left: 6px;
       bottom: 0px;
       z-index: 2;
-      width: 29px;
+      width: 28px;
-      height: 29px;
+      height: 28px;
+      transform: rotateY(180deg);
     }
 
     .skuSelectorTextContainer {
@@ -162,3 +173,60 @@
 .skuSelectorItemTextValue {
   color: rgba(185, 185, 185, 0.6);
 }
+
+.skuSelectorItem {
+  margin: 0 16px 0 0;
+}
+
+.shippingContainer {
+  display: flex;
+
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    align-items: center;
+
+    :global(.vtex-input__label) {
+      font-size: 0;
+
+      &::after {
+        content: "CALCULAR FRETE:";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $gray-500;
+      }
+    }
+  }
+
+  :global(.vtex-button) {
+    font-size: 0;
+    position: relative;
+    top: -5px;
+    right: 148px;
+    width: 49px;
+    height: 49px;
+    margin-top: 27px;
+    background-color: $black;
+
+    &::after {
+      content: "OK";
+      font-size: 14px;
+      line-height: 19px;
+      font-weight: 600;
+      color: white;
+    }
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: relative;
+    left: 32px;
+
+    :last-child {
+      color: $black;
+    }
+  }
+}
+
+:global(.vtex-button__label) {
+  height: fit-content;
+}

styles/sass/utils/_vars.scss

@@ -9,6 +9,9 @@ $gray-400: #AFAFAF;
 $gray-500: #929292;
 $gray-600: #575757;
 $gray-700: #202020;
+$gray-800: #989898;
+$gray-900: #d5d5d5;
+$gray-1000: #cccccc;
 
 $black: #000000;