From b47d213e265bcc8bfea7ad6b5cb90aed9c087105 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 16:26:05 -0300 Subject: [PATCH 1/5] feat: adiciona placeholder input cep --- styles/css/vtex.store-components.css | 7 +++++++ styles/sass/pages/product/vtex.store-components.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 96baeef..8c13475 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -263,4 +263,11 @@ .skuSelectorOptionsList { margin: 0; +} + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5a72739..9266456 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -264,3 +264,10 @@ .skuSelectorOptionsList { margin: 0; } + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} -- 2.34.1 From b4b438b6290cdfb533ffdbd27cc8f7c8eae893c7 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 09:35:17 -0300 Subject: [PATCH 2/5] feat: adiciona estilos prateleira --- store/blocks/pdp/product.jsonc | 6 ++++++ store/blocks/product-price.jsonc | 7 +++++++ styles/css/vtex.product-summary.css | 8 ++++++++ styles/css/vtex.store-components.css | 16 ++++++++++++++++ .../sass/pages/product/vtex.product-summary.scss | 8 ++++++++ .../pages/product/vtex.store-components.scss | 16 ++++++++++++++++ 6 files changed, 61 insertions(+) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e22ba85..c60b2a1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -244,6 +244,12 @@ ] }, + "product-summary-image": { + "props": { + "showBadge": false + } + }, + "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index be7bc35..8b2dfde 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -16,6 +16,13 @@ } }, + "product-selling-price#shelf": { + "props": { + "blockClass": "shelf", + "message": "{sellingPriceValue}" + } + }, + "flex-layout.row#list-price-savings": { "props": { "colGap": 2, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index d813a22..979c318 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -13,4 +13,12 @@ display: flex; justify-content: center; align-items: center; +} + +.brandName { + font-style: normal; + font-weight: 400; + line-height: 25px; + text-align: center; + color: #292929; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8c13475..412cb80 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -270,4 +270,20 @@ font-weight: 400; font-size: 12px; line-height: 16px; +} + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #292929; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 254a5bc..bf3149b 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -4,3 +4,11 @@ justify-content: center; align-items: center; } + +.brandName { + font-style: normal; + font-weight: 400; + line-height: 25px; + text-align: center; + color: $color-black; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9266456..7f2cd6e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -271,3 +271,19 @@ font-size: 12px; line-height: 16px; } + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black; +} -- 2.34.1 From d1992a1fee4e21bbfc399138f54f494de78d516f Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 15:29:39 -0300 Subject: [PATCH 3/5] feat: adiciona newsletter 1440px --- store/blocks/pdp/product.jsonc | 8 ++ styles/css/vtex.store-components.css | 77 +++++++++++++++++-- styles/css/vtex.styleguide.css | 17 +++- .../pages/product/vtex.store-components.scss | 65 ++++++++++++++++ styles/sass/utils/_vars.scss | 3 +- 5 files changed, 159 insertions(+), 11 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c60b2a1..058a122 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ // "shelf.relatedProducts", "rich-text#shelfTitle", "list-context.product-list#shelfProducts", + "newsletter#pageProduct", "product-questions-and-answers" ] }, @@ -253,5 +254,12 @@ "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] + }, + "newsletter#pageProduct": { + "props": { + "blockClass": "pageProduct", + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 412cb80..744ef10 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -140,7 +140,7 @@ position: absolute; left: 232px; top: 33%; - background: #292929; + background: #000000; border: none; border-radius: 0; } @@ -169,7 +169,7 @@ visibility: visible; content: "Não sei meu CEP"; font-size: 12px; - color: #292929; + color: #000000; text-decoration-line: underline; } @@ -198,7 +198,7 @@ content: "Entrega"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryEstimate { @@ -215,7 +215,7 @@ content: "Prazo"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryPrice { @@ -232,7 +232,7 @@ content: "Frete"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableRadioBtn { @@ -285,5 +285,70 @@ font-weight: 700; font-size: 24px; line-height: 33px; - color: #292929; + color: #000000; +} + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: #000000; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid #ffffff; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #ffffff; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css index 11b5662..99c1ef5 100644 --- a/styles/css/vtex.styleguide.css +++ b/styles/css/vtex.styleguide.css @@ -1,4 +1,13 @@ -.hideDecorators { - border-left: 0; - border-right: 0; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.input { + border: none; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7f2cd6e..4042018 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -287,3 +287,68 @@ line-height: 33px; color: $color-black; } + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: $color-black; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray7; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid $color-gray11; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $color-gray11; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 0dd6147..f867a81 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); -$color-black: #292929; +$color-black: #000000; $color-white: #fff; @@ -14,6 +14,7 @@ $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; +$color-gray11: #ffffff; $color-blue: #4267b2; -- 2.34.1 From f5ea95ec1aaa3946fd749575ffa63e4b4fd8a0d8 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 15:58:34 -0300 Subject: [PATCH 4/5] feat: adiciona arrows prateleira --- styles/css/vtex.product-summary.css | 2 +- styles/css/vtex.slider-layout.css | 20 +++++++++++++++++-- .../pages/product/vtex.slider-layout.scss | 18 +++++++++++++++++ 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 979c318..d3ef137 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -20,5 +20,5 @@ font-weight: 400; line-height: 25px; text-align: center; - color: #292929; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6b45fd8..297fd6f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,7 +15,7 @@ } .paginationDot--shelf { - background: #292929; + background: #000000; width: 10px !important; height: 10px !important; } @@ -23,6 +23,22 @@ .paginationDot--shelf--isActive { width: 17px !important; height: 17px !important; - border: 0.5px solid #292929; + border: 0.5px solid #000000; background: transparent; +} + +.sliderLeftArrow--shelf { + visibility: hidden; +} +.sliderLeftArrow--shelf::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); +} + +.sliderRightArrow--shelf { + visibility: hidden; +} +.sliderRightArrow--shelf::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 3850792..940aa5c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -16,3 +16,21 @@ border: 0.5px solid $color-black; background: transparent; } + +.sliderLeftArrow--shelf { + visibility: hidden; + + &::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); + } +} + +.sliderRightArrow--shelf { + visibility: hidden; + + &::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); + } +} -- 2.34.1 From 6f5edc7f7771278add4025eae4bdba2285bde8ab Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 1 Feb 2023 10:20:54 -0300 Subject: [PATCH 5/5] feat: adiciona produto indisponivel 1440px --- store/blocks/pdp/product.jsonc | 6 +- styles/css/vtex.product-price.css | 2 +- styles/css/vtex.store-components.css | 97 +++++++++++++++ styles/css/vtex.tab-layout.css | 4 +- .../pages/product/vtex.store-components.scss | 114 ++++++++++++++++++ styles/sass/utils/_vars.scss | 2 + 6 files changed, 219 insertions(+), 6 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 058a122..b116723 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,7 @@ "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", - "availability-subscriber", + // "availability-subscriber", "shipping-simulator", "share#default" ] @@ -206,8 +206,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index d87bf9e..d3a0261 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -111,5 +111,5 @@ font-weight: 700; font-size: 25px; line-height: 38px; - color: #292929; + 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 744ef10..3168fc3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -351,4 +351,101 @@ .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0; +} + +.subscriberContainer { + margin-top: 43px; +} +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +.form { + width: 100%; + margin: 0; +} +.form .content { + display: grid; + grid-template-areas: "nm em" "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; +} +.form .content .inputName { + grid-area: nm; + width: 100%; + margin: 0; +} +.form .content .inputName :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .inputEmail { + grid-area: em; + width: 100%; + margin: 0; +} +.form .content .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; +} +.form .content .submit :global(.vtex-button) { + height: 49px; + background: #000000; + border: none; + border-radius: 0; +} +.form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 58dbc7d..d8dbad8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -50,8 +50,8 @@ font-weight: 400; font-size: 18px; line-height: 38px; - color: #292929; - border-bottom: 2px solid #292929; + color: #000000; + border-bottom: 2px solid #000000; border-radius: 0; text-transform: capitalize; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4042018..adf25ab 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -352,3 +352,117 @@ background: transparent; padding: 0; } + +.subscriberContainer { + margin-top: 43px; + + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } +} + +.form { + width: 100%; + margin: 0; + + .content { + display: grid; + grid-template-areas: + "nm em" + "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; + + .inputName { + grid-area: nm; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .inputEmail { + grid-area: em; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; + + & :global(.vtex-button) { + height: 49px; + background: $color-black; + border: none; + border-radius: 0; + } + + & :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index f867a81..b38d9da 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,8 @@ $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; $color-gray11: #ffffff; +$color-gray12: #868686; +$color-gray13: #989898; $color-blue: #4267b2; -- 2.34.1