From 0abdeaba4fd9ef1c1744b9ac725ee7460a59d232 Mon Sep 17 00:00:00 2001 From: Savio Date: Wed, 8 Feb 2023 17:54:32 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20do=20adiciona?= =?UTF-8?q?r=20=C3=A0=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 19 +-- styles/css/vtex.flex-layout.css | 24 +++- styles/css/vtex.product-quantity.css | 17 +++ styles/css/vtex.store-components.css | 107 ++++++++-------- .../product/vtex.add-to-cart-button.scss | 2 - .../sass/pages/product/vtex.flex-layout.scss | 23 ++++ .../pages/product/vtex.product-quantity.scss | 17 +++ .../pages/product/vtex.store-components.scss | 114 +++++++++--------- 8 files changed, 201 insertions(+), 122 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be7db66..b41d781 100644 --- a/store/blocks/pdp/product.jsonc +++ b/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, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5ba8ae..c807690 100644 --- a/styles/css/vtex.flex-layout.css +++ b/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 */ \ No newline at end of file +/* 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; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 2f1d220..b5b35cc 100644 --- a/styles/css/vtex.product-quantity.css +++ b/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; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3c8f295..8ea10f1 100644 --- a/styles/css/vtex.store-components.css +++ b/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; } \ 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 f627ffe..e69de29 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,2 +0,0 @@ -.buttonText { -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..4108e84 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/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; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index dd527e9..3b9d284 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/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; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8f4ebd4..702ed15 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/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; + } +}