From fa6a770735918e5f928a7cd85ff7b8b9098e925d Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Thu, 26 Jan 2023 22:21:39 -0300 Subject: [PATCH] feat: calcular frete feito --- react/components/Html/styles.css | 14 +++++ store/blocks/pdp/product.jsonc | 22 ++++++- styles/css/vtex.add-to-cart-button.css | 21 +++++++ styles/css/vtex.flex-layout.css | 8 +++ styles/css/vtex.product-price.css | 3 + styles/css/vtex.product-quantity.css | 12 ++++ styles/css/vtex.rich-text.css | 9 +++ styles/css/vtex.store-components.css | 59 +++++++++++++++++++ .../product/vtex.add-to-cart-button.scss | 12 ++++ .../sass/pages/product/vtex.flex-layout.scss | 7 +++ .../pages/product/vtex.product-price.scss | 5 +- .../pages/product/vtex.product-quantity.scss | 13 ++++ styles/sass/pages/product/vtex.rich-text.scss | 8 +++ .../pages/product/vtex.store-components.scss | 59 +++++++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 2 +- 15 files changed, 251 insertions(+), 3 deletions(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss 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 0c91295..b9e444d 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -8,5 +8,19 @@ [class*="html--pdp-breadcrumb"] { background-color: #fff; } +[class*="html--quantidadeEBuy"] { + display: flex; + gap: 10px; +} +@media (max-width: 1024px) { + [class*="html--quantidadeEBuy"] { + display: flex; + flex-direction:column; + gap: 10px; + } +} +[class*=""] { + +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 683a37d..88dfd3e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -133,22 +133,41 @@ // "product-gifts", // "flex-layout.row#buy-button", // "availability-subscriber" + "rich-text#titleCep", "shipping-simulator" // "share#default" ] }, + "shipping-simulator":{ + "props":{ + "blockClass":"divCep" + // "placeholder": "Digite seu CEP" + } + }, + "rich-text#titleCep": { + "props": { + "blockClass": "titleCep", + "text": "CALCULAR FRETE:" + } + }, "html#quantidadeEButtonCustom":{ "props": { "blockClass": "quantidadeEBuy" }, "children": ["product-quantity","flex-layout.row#buy-button"] }, + "product-quantity":{ + "props":{ + "blockClass":"divQuantidade", + "size":"regular" + } + }, "product-installments#custom":{ "props":{ "blockClass":"divParcelamente", "markers": ["discount"], - "message": " {installmentsNumber}x de {installmentValue} sem juros ", + "message": " {installmentsNumber}x de {installmentValue} sem juros ", "installmentsCriteria":"max-quantity-without-interest" } }, @@ -177,6 +196,7 @@ "flex-layout.row#buy-button": { "props": { + "blockClass":"divButtonBuy", "marginTop": 4, "marginBottom": 7 }, diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..c7ab2c3 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,21 @@ +@charset "UTF-8"; +/* +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 */ +.buttonDataContainer { + font-size: 0; +} +.buttonDataContainer .buttonText::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e3abf1f..d4ec5a4 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -69,4 +69,12 @@ .flexCol--divImgDescription { margin-right: 0px; } +} + +.flexRow--divButtonBuy { + text-align: center; + width: 100%; +} +.flexRow--divButtonBuy :global(.vtex-button) { + background-color: black; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 30969cd..ba64241 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -27,6 +27,9 @@ .installments--divParcelamente .installmentsNumber--divParcelamente { font-weight: 700; } +.installments--divParcelamente .installments-discount--divParcelamente { + font-weight: 700; +} .installments--divParcelamente .currencyContainer--divParcelamente { font-weight: 700; } \ 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..e0f5ca1 --- /dev/null +++ b/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 */ +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 8640de2..fcb5349 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -35,4 +35,13 @@ .container--tituloSlick .paragraph--tituloSlick { font-size: 20px; } +} + +.wrapper--titleCep { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 07123bf..d40e551 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -221,4 +221,63 @@ width: 48px; border-radius: 50%; transform: rotate(-90deg); +} + +.shippingContainer { + display: flex; + position: relative; + width: 409px; + height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0%; + margin: 0%; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + width: 280px; + height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0px; + height: 49px; + border-right: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; + position: absolute; + right: -57px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + font-size: 0; + background: black; + width: 49px; + height: 49px; + border: 0; + border-radius: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; + padding: 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 new file mode 100644 index 0000000..654b70a --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonDataContainer { + font-size: 0; + .buttonText::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.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 69dff67..a269dcb 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -56,3 +56,10 @@ } } +.flexRow--divButtonBuy{ + text-align: center; + width: 100%; + :global(.vtex-button){ + background-color: black; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index fcc8ea1..8bc93f6 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -13,10 +13,13 @@ font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; + color: #929292; .installmentsNumber--divParcelamente{ font-weight: 700; } + .installments-discount--divParcelamente{ + font-weight: 700; + } .currencyContainer--divParcelamente{ font-weight: 700; } 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..e726a89 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,13 @@ +.quantitySelectorContainer{ + // width: 128px; + // height: 49px; + .quantitySelectorTitle{ + display: none; + } + // .quantitySelectorStepper{ + // width: 100%; + // .vtex-numeric-stepper-container{ + // width: 100%; + // } + // } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index b7c96c2..989740b 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -21,3 +21,11 @@ } } } +.wrapper--titleCep { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index dc041bd..a9ee1dd 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -203,3 +203,62 @@ transform: rotate(-90deg); } } + +.shippingContainer { + display: flex; + position: relative; + width: 409px; + height: 49px; + :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0%; + margin: 0%; + :global(.vtex-input) { + width: 280px; + height: 49px; + :global(.vtex-input__label) { + display: none; + } + :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0px; + height: 49px; + border-right: 0; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; + position: absolute; + right: -57px; + :global(.vtex__icon-external-link) { + display: none; + } + } + } + :global(.vtex-button) { + font-size: 0; + background: black; + width: 49px; + height: 49px; + border: 0; + border-radius: 0; + :global(.vtex-button__label)::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; + padding: 0; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index f71d816..5618622 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -57,4 +57,4 @@ padding-right: 0px; } } -} +} \ No newline at end of file