feat(add-card-btn):estilizanod bot

ão de carrinho

store/blocks/pdp/product.jsonc

@@ -70,7 +70,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "46%",
       "rowGap": 10,
       "blockClass": "StackLayout"
     }
@@ -80,8 +80,8 @@
   },
   "product-images": {
     "props": {
-      "testid": "product-images",
-      "aspectRatio": {
+        "testid": "product-images",
+        "aspectRatio": {
         "desktop": "auto",
         "phone": "auto"
       },
@@ -98,13 +98,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -119,12 +118,9 @@
     }
   },
 
-
   "product-identifier.product": {
     "props": {
-      "label": "hide", //'default' | 'custom' | 'hide'
-      "customLabel": "teste", // text if label is custom
-      "idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
+      "label": "hide" //'default' | 'custom' | 'hide'
     }
   },
 
@@ -145,9 +141,16 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass":"buy-button"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity","add-to-cart-button"]
+  },
+
+  "add-to-cart-button": {
+    "props": {
+      "text": "ADICIONAR À SACOLA"
+    }
   },
 
   "flex-layout.row#product-availability": {

styles/css/vtex.flex-layout.css

@@ -12,6 +12,24 @@
   padding: 0 0.5rem;
 }
 
+.flexRowContent {
+  padding: 0;
+  margin: 0;
+}
+.flexRowContent--buy-button {
+  gap: 10px;
+}
+.flexRowContent--buy-button .stretchChildrenWidth {
+  padding: 0;
+  width: max-content !important;
+}
+.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
+  background: black;
+  height: 49px;
+  width: 100%;
+  min-width: 534px;
+}
+
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {

styles/css/vtex.product-quantity.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 */
+.quantitySelectorTitle {
+  display: none;
+}

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

@@ -2,7 +2,23 @@
 .flexRowContent--main-header {
   padding: 0 0.5rem;
 }
-
+.flexRowContent{
+  padding: 0;
+  margin: 0;
+  &--buy-button{
+      gap: 10px;
+    .stretchChildrenWidth{
+      padding: 0;
+      width: max-content !important;
+      :global(.vtex-button){
+        background: black;
+        height: 49px;
+        width: 100%;
+        min-width: 534px;
+      }
+    }
+  }
+}
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {

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

@@ -0,0 +1,3 @@
+.quantitySelectorTitle{
+  display: none;
+}

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

@@ -1,3 +1,6 @@
+  .container{
+
+  }
 .skuSelectorContainer{
   display: flex;
   flex-direction: column-reverse;