From 558dbe128bb7c842222fba385326ad9048a557b9 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 31 Jan 2023 17:39:32 -0300 Subject: [PATCH] feat: adiciona scss de quantity button, adicionar ao carrinho e calcular frete --- react/components/Html/style.css | 26 +++++ store/blocks/pdp/product.jsonc | 12 ++- styles/css/vtex.product-identifier.css | 16 ++- styles/css/vtex.product-quantity.css | 45 ++++++++ styles/css/vtex.store-components.css | 86 +++++++++++++++ .../product/vtex.product-identifier.scss | 19 +++- .../pages/product/vtex.product-quantity.scss | 42 ++++++++ .../pages/product/vtex.store-components.scss | 102 ++++++++++++++++++ 8 files changed, 340 insertions(+), 8 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/style.css b/react/components/Html/style.css index a57dcbd..adf64a4 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,3 +1,29 @@ [class*="html--pdp-breadcrumb"] { margin-left: 40px; } + +[class*="html"] { + display: flex; + align-items: center; + gap: 10px; +} +[class*='html'] > [class*='button'] { + width: 100%; + height: 49px; + margin-right: 40px; + background: #000; + border: #000; +} + +[class*="html"]>[class*='flexRow'] { + width: 100%; + height: 49px; + display: flex; + align-items: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbb4f60..d0f2b77 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,9 +10,15 @@ "product-questions-and-answers" ] }, + "html#quantityAndButton": { + "children": [ + "product-quantity", + "add-to-cart-button" + ] + }, "Pix-academy": { "props": { - "blockClass": "pix-wrapper" + "blockClass": "pix-wrapper" } }, "tab-layout#desc": { @@ -245,11 +251,9 @@ "Parcelamento", "Pix-academy", "sku-selector", - "product-separator", - "product-quantity", + "html#quantityAndButton", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator" ] diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index d60e859..c752b47 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,7 +7,19 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.product-identifier--productReference { +.product-identifier { display: flex; - justify-content: right; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; } \ 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..4bfb790 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,45 @@ +/* +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 */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 21c3deb..d1b9b59 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,6 +12,11 @@ background: red; } +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + .productNameContainer { display: flex; justify-content: right; @@ -35,6 +40,18 @@ display: none; } +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -66,4 +83,73 @@ .frameAround { border-color: #000; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child { + color: #000; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 3edfefd..cc3986e 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,4 +1,19 @@ -.product-identifier--productReference{ +.product-identifier { display: flex; - justify-content: right; + justify-content: flex-end; + margin-right: 40px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label, + .product-identifier__separator { + display: none; + } } 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..8b339ef --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,42 @@ +.quantitySelectorContainer { + margin: 0; + + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; + + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9a51e15..f67308b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,6 +3,10 @@ .newsletter{ background: red; } +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} .productNameContainer{ display: flex; justify-content: right; @@ -24,6 +28,19 @@ .pointerEventsNone{ display: none; } +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} .skuSelectorContainer{ display: flex; flex-direction: column-reverse; @@ -59,3 +76,88 @@ .frameAround { border-color: #000; } + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: 'CALCULAR FRETE:'; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + :global(.vtex-address-form__postalCode-forgottenURL):first-child { + color: #000; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: 'OK'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +}