From 7334a77bf75d610e153c3a3ec72a6f2b3d7b1f43 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 1 Feb 2023 21:52:20 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=20o=20bloco=20product-quantity?= =?UTF-8?q?=20e=20cria=20um=20bloco=20html=20pra=20unir=20os=20blocos=20do?= =?UTF-8?q?=20product-quantity=20e=20do=20bot=C3=A3o=20de=20adicionar=20ao?= =?UTF-8?q?=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 28 ++++++++++++++- store/blocks/pdp/product.jsonc | 36 +++++++++++++++++-- styles/css/vtex.add-to-cart-button.css | 5 +-- styles/css/vtex.product-quantity.css | 16 +++++++++ .../product/vtex.add-to-cart-button.scss | 5 +-- .../pages/product/vtex.product-quantity.scss | 7 ++++ 6 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index fd5dfc1..d92df91 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -4,9 +4,35 @@ [class*="html--add-to-cart-button"] button { - background-color: #000000; + background-color: #000000 !important; border: none; width: 526px; height: 49px; padding: 12px 64px; } + +[class*="html--product-quantity-cart-button"] { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 16px; +} + +[class*="html--product-quantity-cart-button"] input{ + height: 49px; + + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +[class*="html--product-quantity-cart-button"] button{ + height: 49px; + background-color: #FFFFFF; + + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7f4039c..4f44f58 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,20 +19,24 @@ }, "children": ["breadcrumb"] }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, + "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, + "flex-layout.row#description": { "props": { "marginBottom": 7 }, "children": ["product-description"] }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -43,6 +48,7 @@ "Else": "flex-layout.row#product-availability" } }, + "flex-layout.row#product-main": { "props": { "colGap": 7, @@ -81,6 +87,7 @@ "rowGap": 0 } }, + "html#product-image": { "props":{ "tag": "div", @@ -89,6 +96,7 @@ }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": "1:1", @@ -99,6 +107,27 @@ "thumbnailAspectRatio": "1:1" } }, + + "html#product-quantity": { + "props": { + "tag": "div", + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#product-quantity-cart-button": { + "props": { + "tag": "div", + "blockClass": "product-quantity-cart-button" + }, + "children": [ + "html#product-quantity", + "flex-layout.row#buy-button" + ] + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -112,10 +141,11 @@ "flex-layout.row#selling-price", "product-installments#m3", "html#sku-selector-m3", - "product-quantity", + "html#product-quantity-cart-button", + /*"html#product-quantity",*/ "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + /*"flex-layout.row#buy-button",*/ "availability-subscriber", "shipping-simulator", "share#default" @@ -176,6 +206,7 @@ "flex-layout.col#right-col-availability" ] }, + "flex-layout.col#right-col-availability": { "props": { "preventVerticalStretch": true, @@ -189,6 +220,7 @@ "flex-layout.row#availability" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index ac2b82e..cd1bd0d 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .buttonText { font-weight: 400; - font-size: 18px; - line-height: 25px; + font-size: 18px !important; + line-height: 25px !important; + color: #FFFFFF !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..c4370df --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,16 @@ +/* +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; +} + +.quantitySelectorContainer { + margin: 0; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index 7601fdf..e94a41b 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,5 +1,6 @@ .buttonText { font-weight: 400; - font-size: 18px; - line-height: 25px; + font-size: 18px !important; + line-height: 25px !important; + color: #FFFFFF !important; } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..44042f3 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,7 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; +}