feat: Adicionado o estilo do adicionar à sacola

store/blocks/pdp/product.jsonc

@@ -2,9 +2,7 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
-
       "condition-layout.product#availability",
-
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
@@ -124,15 +122,21 @@
       "product-installments",
       "product-paymentPix-component",
       "sku-selector",
-      "product-quantity",
+
+      "flex-layout.row#cart",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+
       "availability-subscriber",
       "shipping-simulator"
     ]
   },
-
+  "flex-layout.row#cart": {
+    "props": {
+      "blockClass": "cart"
+    },
+    "children": ["product-quantity", "flex-layout.row#buy-button"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -149,9 +153,10 @@
 
   "flex-layout.row#buy-button": {
     "props": {
-      "marginTop": 4,
+      "width": "80%",
-      "marginBottom": 7
+      "blockClass": "buyButton"
     },
+
     "children": ["add-to-cart-button"]
   },
 

styles/css/vtex.flex-layout.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -7,4 +8,25 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-/* Grid breakpoints */
+/* Grid breakpoints */
+.flexRowContent--cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
+  background-color: black;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
+  font-size: 0;
+}
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
+  content: "adicionar à sacola";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
+}

styles/css/vtex.product-quantity.css

@@ -10,4 +10,21 @@
 /* Grid breakpoints */
 .quantitySelectorTitle {
   display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
 }

styles/css/vtex.store-components.css

@@ -34,63 +34,8 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-} /*
-.skuSelectorContainer {
-  display: flex;
-  flex-direction: column-reverse;
-  .skuSelectorSubcontainer--cor {
-    .skuSelectorName {
-      font-size: 0;
-      &::after {
-        content: "OUTRAS CORES";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: #929292;
-      }
-    }
-    .skuSelectorSelectorImageValue {
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-      color: #929292;
-      text-transform: uppercase;
-    }/*
-    .frame-around {
-      border-radius: 30px;
-    }
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-    }
-  }
-  .skuSelectorSubcontainer--tamanho {
-    .skuSelectorName {
-      font-size: 0;
-      &::after {
-        content: "OUTROS TAMANHOS:";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: #929292;
-      }
-    }
-    .frame-around {
-      border-radius: 30px;
-    }
-
-    .skuSelectorInternalBox {
-      border-radius: 30px;
-    }
-  }
 }
-*/
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
@@ -117,6 +62,15 @@
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
   border-radius: 21px;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
   font-size: 0;
 }
@@ -147,4 +101,45 @@
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
   padding: 0;
   margin: auto;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  background-color: black;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "Ok";
+  color: white;
+  font-size: 10px;
+}
+
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button) {
+  position: relative;
+  right: 49px;
+  top: 27px;
+  width: 49px;
+  height: 49px;
 }

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

@@ -1,2 +0,0 @@
-.buttonText {
-}

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

@@ -0,0 +1,23 @@
+.flexRowContent--cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+  .flexRow--buyButton {
+    :global(.vtex-button) {
+      background-color: black;
+    }
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "adicionar à sacola";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #ffffff;
+      }
+    }
+  }
+}

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

@@ -1,3 +1,20 @@
 .quantitySelectorTitle {
   display: none;
 }
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
+}

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

@@ -23,69 +23,15 @@
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-} /*
-.skuSelectorContainer {
-  display: flex;
-  flex-direction: column-reverse;
-  .skuSelectorSubcontainer--cor {
-    .skuSelectorName {
-      font-size: 0;
-      &::after {
-        content: "OUTRAS CORES";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: #929292;
-      }
-    }
-    .skuSelectorSelectorImageValue {
-      font-family: "Open Sans";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-      color: #929292;
-      text-transform: uppercase;
-    }/*
-    .frame-around {
-      border-radius: 30px;
-    }
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-    }
-  }
-  .skuSelectorSubcontainer--tamanho {
-    .skuSelectorName {
-      font-size: 0;
-      &::after {
-        content: "OUTROS TAMANHOS:";
-        font-family: "Open Sans";
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: #929292;
-      }
-    }
-    .frame-around {
-      border-radius: 30px;
-    }
-
-    .skuSelectorInternalBox {
-      border-radius: 30px;
-    }
-  }
 }
-*/
+
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
   .valueWrapper .skuSelectorItemTextValue {
     margin-right: 5px;
   }
+
   .skuSelectorSubcontainer--cor {
     .skuSelectorName {
       font-size: 0;
@@ -106,6 +52,15 @@
     .skuSelectorInternalBox {
       border-radius: 21px;
     }
+    .skuSelectorSelectorImageValue {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      text-transform: uppercase;
+    }
   }
   .skuSelectorSubcontainer--tamanho {
     .skuSelectorName {
@@ -142,3 +97,50 @@
     }
   }
 }
+
+.shippingContainer {
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: black;
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "Ok";
+        color: white;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input) {
+    :global(.vtex-input__label) {
+      font-size: 0;
+      &::after {
+        content: "CALCULAR FRETE:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+}
+.shippingContainer {
+  display: flex;
+  :global(.vtex-input-prefix__group) {
+    height: 49px;
+  }
+
+  :global(.vtex-button) {
+    position: relative;
+    right: 49px;
+    top: 27px;
+    width: 49px;
+    height: 49px;
+  }
+}