From 50ca7ed273d4557d74f6b004108379dddb4424be Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 25 Jan 2023 21:53:27 -0300 Subject: [PATCH] feat: adicona cep --- store/blocks/pdp/product.jsonc | 14 ++- store/blocks/product-summary/quickview.json | 8 -- styles/css/agenciamagma.store-theme.css | 4 - styles/css/vtex.add-to-cart-button.css | 20 ++++ styles/css/vtex.flex-layout.css | 10 ++ styles/css/vtex.store-components.css | 74 +++++++++++++++ .../product/agenciamagma.store-theme.scss | 4 - .../product/vtex.add-to-cart-button.scss | 12 +++ .../pages/{ => product}/vtex.breadcrumb.scss | 0 .../sass/pages/product/vtex.flex-layout.scss | 10 ++ .../pages/product/vtex.store-components.scss | 94 +++++++++++++++++++ 11 files changed, 231 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss rename styles/sass/pages/{ => product}/vtex.breadcrumb.scss (100%) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ca34288..0e3cb58 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "60%", "rowGap": 0 } }, @@ -111,7 +111,7 @@ "product-installments", "product-separator", "sku-selector", - "flex-layout.row#quantity-buy-button", + "flex-layout.row#buy-button", "product-gifts", "availability-subscriber", "shipping-simulator" @@ -159,7 +159,7 @@ "width": "73%", "blockClass": "buy-button-row" }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -203,5 +203,13 @@ "Pinterest": true } } + }, + + "product-quantity": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 299591f..723d4a0 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -139,13 +139,5 @@ "blockClass": "quickview", "showNavigationArrows": true } - }, - - "product-quantity": { - "props": { - "size": "large", - "width": "28%", - "showLabel": false - } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 7f9bd41..ee7a3be 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -13,8 +13,4 @@ .html--pdp-breadcrumb { background-color: none; -} - -.homeLink { - display: none; } \ No newline at end of file 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..f95575a --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,20 @@ +@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 */ +.buttonText { + font-size: 0; +} +.buttonText::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index da613fe..b31dc4c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,4 +10,14 @@ .flexRowContent--buy-button-row :global(.vtex-button) { background: #000000; border: none; + border-radius: 0; + width: 100%; +} + +.strechChildrenWidth { + width: 640px; +} + +.flexRowContent--buy-button-row { + height: 49px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 54fb376..11109a2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -118,4 +118,78 @@ .skuSelectorItemTextValue { color: rgba(185, 185, 185, 0.6); +} + +.productImageTag { + max-width: 664px; +} + +.address-form__field .input__label { + font-size: 40px; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + color: #000000; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + font-size: 0; + border: 0; + border-radius: 0; + background: #000000; + cursor: pointer; +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} +.shippingContainer :global(.vtex-button__label) { + height: fit-content; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 53e0d02..7eb71d6 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,7 +5,3 @@ .html--pdp-breadcrumb { background-color: none; } - -.homeLink { - display: none; -} 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..e5924ac --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText { + font-size: 0; + + &::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $white; + } +} diff --git a/styles/sass/pages/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss similarity index 100% rename from styles/sass/pages/vtex.breadcrumb.scss rename to styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index c7ac053..656e0bd 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,4 +1,14 @@ .flexRowContent--buy-button-row :global(.vtex-button) { background: $black; border: none; + border-radius: 0; + width: 100%; +} + +.strechChildrenWidth { + width: 640px; +} + +.flexRowContent--buy-button-row { + height: 49px; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 71d4e1d..d40766b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -138,3 +138,97 @@ .skuSelectorItemTextValue { color: rgba(185, 185, 185, 0.6); } + +.productImageTag { + max-width: 664px; +} + +.address-form__field { + .input__label { + font-size: 40px; + } +} + +// CEP +.shippingContainer { + display: flex; + + :global(.vtex-address-form__postalCode) { + display: flex; + } + + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + + font-weight: 400; + font-size: 12px; + line-height: 16px; + + display: flex; + align-items: center; + + :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + + color: $black; + } + } + + :global(.vtex__icon-external-link) { + display: none; + } + + :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + + font-size: 0; + border: 0; + border-radius: 0; + background: $black; + cursor: pointer; + + &::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: $white; + } + } + + :global(.vtex-button__label) { + height: fit-content; + } + + :global(.vtex-input__label) { + font-size: 0px; + + &::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } + } +} +