diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e22ba85..b116723 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" ] }, @@ -125,7 +126,7 @@ "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", - "availability-subscriber", + // "availability-subscriber", "shipping-simulator", "share#default" ] @@ -205,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": { @@ -244,8 +245,21 @@ ] }, + "product-summary-image": { + "props": { + "showBadge": false + } + }, + "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/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-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.product-summary.css b/styles/css/vtex.product-summary.css index d813a22..d3ef137 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: #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/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 96baeef..3168fc3 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 { @@ -263,4 +263,189 @@ .skuSelectorOptionsList { margin: 0; +} + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + 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: #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; +} + +.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.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/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.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.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"); + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5a72739..adf25ab 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -264,3 +264,205 @@ .skuSelectorOptionsList { margin: 0; } + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + 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: $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; +} + +.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 0dd6147..b38d9da 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,9 @@ $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; +$color-gray11: #ffffff; +$color-gray12: #868686; +$color-gray13: #989898; $color-blue: #4267b2;