From 1869e0a85f5baef81415576e6ccbc0cafccedd53 Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Tue, 24 Jan 2023 00:31:38 -0300 Subject: [PATCH] feat: adiciona estilizacao em produtos indisponiveis --- store/blocks/pdp/product-assembly.jsonc | 1 + store/blocks/pdp/product.jsonc | 7 +- styles/css/vtex.flex-layout.css | 4 - styles/css/vtex.product-quantity.css | 53 ++++ styles/css/vtex.store-components.css | 228 ++++++++++----- .../sass/pages/product/vtex.flex-layout.scss | 4 - .../pages/product/vtex.product-quantity.scss | 44 +++ .../pages/product/vtex.store-components.scss | 265 ++++++++++++------ styles/sass/utils/_vars.scss | 1 + 9 files changed, 440 insertions(+), 167 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..799c583 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,6 +1,7 @@ { "sticky-layout#buy-button": { "props": { + "blockClass": "button-quantity", "position": "bottom" }, "children": ["flex-layout.row#buy-button"] diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a1e837d..f37b6af 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,6 +79,9 @@ }, "product-images": { "props": { + "thumbnailsOrientation": "horizontal", + "showPaginationDots": false, + "showNavigationArrows": false, "aspectRatio": { "desktop": "auto", "phone": "16:9" @@ -102,7 +105,6 @@ "product-separator", "availability-subscriber", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -132,7 +134,7 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["product-quantity","add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -166,4 +168,5 @@ }, "children": ["availability-subscriber"] } + } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 7601ecb..9294fef 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -12,10 +12,6 @@ margin: 0; width: 100%; } -.flexRowContent .productNameContainer--quickview { - display: flex; - text-align: end; -} .flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings { display: none; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..d5f0da5 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,53 @@ +/* +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 { + height: 49px; + margin-top: 8px; + margin-bottom: 16px; + width: 149px; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer .quantitySelectorStepper { + height: 49px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + width: 31.6px; + height: 49px; + border-top: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-left: none; + border-right: none; + color: #929292; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + border-right: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-top: 1px solid #cccccc; + background: #fff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + width: 10px; + border-left: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-top: 1px solid #cccccc; + background: #fff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ec840b8..d707a0f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -11,8 +12,11 @@ margin: 0; padding: 0 40px; max-width: 100%; - /* TITULO, NOME DO PRODUTO */ - /* TAMANHO E CORES DOS PRODUTOS */ + /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ + /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ + /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ + /*PRODUTO INDISPONIVEL, TEXTOS */ + /* FORMULARIO DE PRODUTO INDISPONIVEL */ } .container .productNameContainer--quickview { text-align: end; @@ -21,88 +25,170 @@ line-height: 34px; color: #575757; } -.container .skuSelectorContainer--sku-selector { +.container .skuSelectorContainer { display: flex; flex-direction: column-reverse; } -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorName { +.container .skuSelectorContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorNameSeparator { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorTextContainer { + display: none; +} +.container .skuSelectorContainer .skuSelectorOptionsList { + margin-top: 8px; + margin-left: 0; +} +.container .skuSelectorContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.container .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; +} +.container .skuSelectorOptionsList .skuSelectorItem:first-child { + margin-left: 0; +} +.container .skuSelectorOptionsList .frameAround { + border-radius: 50%; + border-color: #000000; +} +.container .skuSelectorOptionsList .skuSelectorItemTextValue { + max-width: 100%; + display: flex; + justify-content: center; + color: #000000; +} +.container .skuSelectorOptionsList .diagonalCross { + margin: 4px; +} +.container .skuSelectorOptionsList .skuSelectorInternalBox { + border-radius: 50%; +} +.container .carouselGaleryThumbs { + margin: 16px 0; +} +.container .carouselGaleryThumbs .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; +} +.container .carouselGaleryThumbs .productImagesThumb { + margin-right: 16px; + height: 100% !important; + width: 90px !important; +} +.container .carouselGaleryThumbs .productImagesThumbCaret { + display: none; +} +.container .subscriberContainer { + width: 100%; +} +.container .subscriberContainer .title { + font-size: 0; + margin-bottom: 0; +} +.container .subscriberContainer .title::before { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.container .subscriberContainer .subscribeLabel { + font-size: 0; +} +.container .subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; font-weight: 400; font-size: 14px; line-height: 19px; - color: #929292; - text-transform: uppercase; + color: #868686; } -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector { - height: 40px; - width: 40px; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .frameAround--sku-selector { - height: 40px; - width: 40px; - border-radius: 50%; - top: 0; - bottom: 0; - left: 0; - right: 0; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector { - border-radius: 50%; - border: 1px solid #989898; - height: 40px; - width: 40px; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector:focus { - border-color: black; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .valueWrapper--sku-selector { - position: absolute; - left: -4px; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorName { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { - color: #929292; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - text-transform: uppercase; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--sku-selector { - height: 48px; - width: 48px; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .frameAround--sku-selector { - border-radius: 50%; -} -.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector { - border-radius: 50%; -} -.container .subscriberContainer .form .content { - display: block; +.container .form { position: relative; } -.container .subscriberContainer .form .content .inputName { - width: 185px; - height: 40px; +.container .form :global(.vtex-store-components-3-x-content) { + width: 374.65px; + display: block; + margin-top: 16px; } -.container .subscriberContainer .form .content .inputName .vtex-input .flex-row { - border: none; +.container .form :global(.vtex-store-components-3-x-content) .inputName { + width: 182.46px; + margin-right: 10.08px; + margin-bottom: 15px; } -.container .subscriberContainer .form .content .inputEmail { - width: 185px; - height: 40px; +.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { + border: 0.6px solid #929292; + border-radius: 0; +} +.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: #929292; +} +.container .form :global(.vtex-store-components-3-x-content) .inputEmail { position: absolute; - top: 0%; left: 51%; + top: 0%; + border-radius: 0; + width: 182.46px; + font-weight: 400; + margin-bottom: 15px; } -.container .subscriberContainer .form .content .submit { +.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { + border: 0.6px solid #929292; + border-radius: 0; +} +.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: #929292; +} +.container .form :global(.vtex-store-components-3-x-content) .submit { width: 100%; + margin-bottom: 16px; +} +.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { + width: 100%; + height: 49px; + background-color: #000000; + border: none; + border-radius: 0; + font-size: 0; + display: flex; + align-items: center; + justify-content: center; +} +.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { + content: "AVISE-ME"; + color: #fff; + font-weight: 600; + font-size: 18px; + line-height: 25px; + font-family: "Open sans", sans-serif; +} +.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ca6c566..aac0493 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,10 +3,6 @@ margin: 0; width: 100%; - .productNameContainer--quickview { - display: flex; - text-align: end; - } .flexCol--right-col { .flexColChild--right-col { .list-price-savings { 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..9ea7657 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,44 @@ +.quantitySelectorContainer { + height: 49px; + margin-top: 8px; + margin-bottom: 16px; + width: 149px; + .quantitySelectorTitle { + display: none; + } + .quantitySelectorStepper { + height: 49px; + :global(.vtex-numeric-stepper__input) { + width: 31.6px; + height: 49px; + border-top: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-left: none; + border-right: none; + color: $color-gray-6; + } + :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + border-right: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-top: 1px solid #cccccc; + background: $color-white; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-black-padrao; + } + :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + width: 10px; + border-left: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-top: 1px solid #cccccc; + background: $color-white; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-black-padrao; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8304319..5f0bf77 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,7 +3,7 @@ padding: 0 40px; max-width: 100%; - /* TITULO, NOME DO PRODUTO */ + /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ .productNameContainer--quickview { text-align: end; font-weight: 300; @@ -11,107 +11,200 @@ line-height: 34px; color: $color-gray-7; } - /* TAMANHO E CORES DOS PRODUTOS */ - .skuSelectorContainer--sku-selector { + + /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ + .skuSelectorContainer { display: flex; flex-direction: column-reverse; - .skuSelectorSubcontainer--tamanho { - .skuSelectorName { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-gray-6; - text-transform: uppercase; - } - .skuSelectorItem--sku-selector { - height: 40px; - width: 40px; - .frameAround--sku-selector { - height: 40px; - width: 40px; - border-radius: 50%; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - .skuSelectorInternalBox--sku-selector { - border-radius: 50%; - border: 1px solid $color-gray-8; - height: 40px; - width: 40px; - &:focus { - border-color: black; - } - .valueWrapper--sku-selector { - position: absolute; - left: -4px; - } - } - } + .skuSelectorName { + font-size: 0; + } + + .skuSelectorNameSeparator { + font-size: 0; } .skuSelectorSubcontainer--cor { - .skuSelectorName { + &::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray-6; + } + } + + .skuSelectorSubcontainer--tamanho { + &::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray-6; + } + } + + .skuSelectorTextContainer { + display: none; + } + + .skuSelectorOptionsList { + margin-top: 8px; + margin-left: 0; + } + + .skuSelectorSelectorImageValue { + font-size: 0; + } + } + /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ + .skuSelectorOptionsList { + .skuSelectorItem { + width: 40px; + height: 40px; + &:first-child { + margin-left: 0; + } + } + + .frameAround { + border-radius: 50%; + border-color: $color-black-padrao; + } + + .skuSelectorItemTextValue { + max-width: 100%; + display: flex; + justify-content: center; + color: $color-black-padrao; + } + + .diagonalCross { + margin: 4px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + } + + .carouselGaleryThumbs { + margin: 16px 0; + + .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; + } + .productImagesThumb { + margin-right: 16px; + height: 100% !important; + width: 90px !important; + } + + .productImagesThumbCaret { + display: none; + } + } + + /*PRODUTO INDISPONIVEL, TEXTOS */ + .subscriberContainer { + width: 100%; + .title { + font-size: 0; + margin-bottom: 0; + + &::before { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray-9; + } + } + + .subscribeLabel { + font-size: 0; + &::before { + content: "Deseja saber quando estiver disponível?"; font-weight: 400; font-size: 14px; line-height: 19px; - color: $color-gray-6; - text-transform: uppercase; - } - .skuSelectorNameSeparator { - color: $color-gray-6; - } - .skuSelectorSelectorImageValue { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-gray-6; - text-transform: uppercase; - } - - .skuSelectorOptionsList { - .skuSelectorItem--sku-selector { - height: 48px; - width: 48px; - } - - .frameAround--sku-selector { - border-radius: 50%; - } - .skuSelectorInternalBox--sku-selector { - border-radius: 50%; - } + color: $color-gray-9; } } } - .subscriberContainer { - .form { - .content { - display: block; - position: relative; - .inputName { - width: 185px; - height: 40px; - .vtex-input { - .flex-row { - border: none; - } + /* FORMULARIO DE PRODUTO INDISPONIVEL */ + .form { + position: relative; + :global(.vtex-store-components-3-x-content) { + width: 374.65px; + display: block; + margin-top: 16px; + .inputName { + width: 182.46px; + margin-right: 10.08px; + margin-bottom: 15px; + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: $color-gray-6; + } + } + .inputEmail { + position: absolute; + left: 51%; + top: 0%; + border-radius: 0; + width: 182.46px; + font-weight: 400; + margin-bottom: 15px; + + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: $color-gray-6; } } - - .inputEmail { - width: 185px; - height: 40px; - position: absolute; - top: 0%; - left: 51%; - } - - .submit { + } + .submit { + width: 100%; + margin-bottom: 16px; + :global(.vtex-button) { width: 100%; + height: 49px; + background-color: $color-black-padrao; + border: none; + border-radius: 0; + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + &::before { + content: "AVISE-ME"; + color: $color-white; + font-weight: 600; + font-size: 18px; + line-height: 25px; + font-family: "Open sans", sans-serif; + } + + :global(.vtex-button__label) { + padding: 0; + } } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 68947dc..1257d59 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -10,6 +10,7 @@ $color-gray5: #e5e5e5; $color-gray-6: #929292; $color-gray-7: #575757; $color-gray-8: #989898; +$color-gray-9: #868686; $color-blue: #4267b2;