diff --git a/manifest.json b/manifest.json index a2cde0d..6f9f3e2 100644 --- a/manifest.json +++ b/manifest.json @@ -65,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 798f519..4b5f433 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -10,8 +10,3 @@ display: flex; flex-direction: column; } - -/* [data-testid="product-name"] -{ - -} */ diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c05ac0f..bf18d0a 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -1,9 +1,6 @@ { "footer": { - "blocks": [ - "footer-layout.desktop", - "footer-layout.mobile" - ] + "blocks": ["footer-layout.desktop", "footer-layout.mobile"] }, "footer-layout.desktop": { "children": [ @@ -50,26 +47,18 @@ } }, "flex-layout.row#footer-2-desktop": { - "children": [ - "accepted-payment-methods" - ], + "children": ["accepted-payment-methods"], "props": { "blockClass": "payment-methods" } }, "accepted-payment-methods": { "props": { - "paymentMethods": [ - "MasterCard", - "Visa", - "Diners Club" - ] + "paymentMethods": ["MasterCard", "Visa", "Diners Club"] } }, "flex-layout.row#footer-3-desktop": { - "children": [ - "rich-text#footer" - ], + "children": ["rich-text#footer"], "props": { "blockClass": "credits" } @@ -87,9 +76,7 @@ ] }, "flex-layout.row#2-footer-mobile": { - "children": [ - "flex-layout.col#footer-1-mobile" - ], + "children": ["flex-layout.col#footer-1-mobile"], "props": { "blockClass": "payment-methods", "paddingTop": 4, @@ -114,9 +101,7 @@ "paddingTop": 4, "paddingBottom": 4 }, - "children": [ - "vtex.menu@2.x:menu#footer-mobile" - ] + "children": ["vtex.menu@2.x:menu#footer-mobile"] }, "rich-text#footer-mobile": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fd922c3..4dcf756 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,7 +5,8 @@ "condition-layout.product#availability", "html#product-description", "html#shelf-container", - "newsletter" + "flex-layout.row#newsletter-wrapper" + // "newsletter-form" ] }, "html#breadcrumb": { @@ -393,5 +394,103 @@ } // , // "children": ["rich-text#1", "rich-text#2", "rich-text#3"] + }, + + "flex-layout.row#newsletter-wrapper": { + "props": { + "blockClass": "newsletter-wrapper" + }, + "children": [ + "rich-text#newsletter-title", + "rich-text#newsletter-subtitle", + "newsletter-form" + ] + }, + + // "flex-layout.row#input-submit": { + // "children": ["newsletter-form"] + // }, + + "rich-text#newsletter-title": { + "props": { + "text": "Assine nossa newsletter", + "blockClass": "newsletter-title" + } + }, + "rich-text#newsletter-subtitle": { + "props": { + "text": "Receba ofertas e novidades por e-mail", + "blockClass": "newsletter-subtitle" + } + }, + "newsletter-form": { + "children": ["newsletter-input-email", "newsletter-submit"] + }, + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu e-mail" + // "width": "90%" + } } + + // "newsletter": { + // "children": ["rich-text#newsletter-title", "newsletter-form"] + // }, + + // "rich-text#newsletter-title": { + // "props": { + // "text": "Assine nossa newsletter" + // } + // }, + + // "flex-layout.row#newsletter-wrapper": { + // "props": { + // "blockClass": "newsletter-wrapper" + // }, + // "children": [ + // "rich-text#newsletter-title", + // "rich-text#newsletter-subtitle", + // "newsletter-form" + // ] + // }, + + // "newsletter-form": { + // "children": [ + // "rich-text#newsletter-title", + // "rich-text#newsletter-subtitle", + // "newsletter-input-email", + // "newsletter-submit" + // ] + // } + + // "newsletter-form": { + // "children": [ + // "rich-text#newsletter-title", + // "rich-text#newsletter-subtitle", + // // "newsletter-input-email", + // // "newsletter-submit" + // "flex-layout.row#newsletter-form" + // ] + // }, + // "flex-layout.row#newsletter-form": { + // "props": { + // "blockClass": "newsletter-form", + // "preventHorizontalStretch": true, + // "preventVerticalStretch": true, + // "horizontalAlign": "center" + // }, + // "children": [ + // "rich-text#newsletter-title", + // "rich-text#newsletter-subtitle", + // "newsletter-form" + // ] + // } + // "newsletter-form": { + // "children": ["newsletter-input-email", "newsletter-submit"] + // } + // "newsletter-input-email": { + // "props": { + // "placeholderText": "Digite seu e-mail" + // // "width": "90%" + // } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 6c9fad5..c7fe6be 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -80,4 +80,32 @@ /* ----- RIGHT-COL-AVAILABILITY ----- */ .flexColChild--info-availability :global(.vtex-store-components-3-x-skuSelectorSubcontainer--cor) { margin-bottom: 0 !important; +} + +/* ----- NEWSLETTER ----- */ +.flexRow--newsletter-wrapper { + padding: 32px 0 16px; + border-bottom: 1px solid #ffffff; + background: #000000; +} +@media only screen and (max-width: 1024px) { + .flexRow--newsletter-wrapper { + padding: 64px 16px 32px; + border-bottom: 0; + } +} +.flexRow--newsletter-wrapper :global(.vtex-store-components-3-x-container) { + max-width: 4000px; +} +.flexRow--newsletter-wrapper .flexRowContent--newsletter-wrapper { + flex-direction: column; + align-items: center; +} + +.flexRowContent--newsletter-form { + border-bottom: 1px solid #929292; + justify-content: space-between; +} +.flexRowContent--newsletter-form .pr0 { + height: fit-content; } \ No newline at end of file diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..4320bd4 --- /dev/null +++ b/styles/css/vtex.menu.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 */ +.styledLinkContent { + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 8347a37..9ef91cd 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -28,4 +28,34 @@ text-align: center; font-size: 20px; } +} + +/* ----- NEWSLETTER ----- */ +.container--newsletter-title { + justify-content: center; + margin-bottom: 16px; +} +.container--newsletter-title .paragraph { + margin: 0; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} + +.container--newsletter-subtitle { + justify-content: center; + margin-bottom: 16px; +} +.container--newsletter-subtitle .paragraph { + margin: 0; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +@media only screen and (max-width: 1024px) { + .container--newsletter-subtitle .paragraph { + font-size: 16px; + line-height: 22px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..4747660 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,13 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +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 */ +.footerLayout { + background-color: #000000; + padding: 32px 32px 128px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-newsletter.css b/styles/css/vtex.store-newsletter.css new file mode 100644 index 0000000..41d4b8f --- /dev/null +++ b/styles/css/vtex.store-newsletter.css @@ -0,0 +1,58 @@ +/* +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 */ +.newsletterForm { + display: flex; + width: 53.75%; + margin: 0 auto; +} +.newsletterForm .emailInputContainer { + height: fit-content; + width: 690px; + border-bottom: 1px solid #929292; +} +.newsletterForm .emailInputContainer :global(.vtex-input-prefix__group) { + height: fit-content; + border: 0; +} +.newsletterForm .emailInputContainer :global(.vtex-styleguide-9-x-input) { + padding: 0 0 7px; + font-size: 18px; + line-height: 25px; + color: #929292; + background: transparent !important; +} +@media only screen and (max-width: 1024px) { + .newsletterForm .emailInputContainer :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } +} +.newsletterForm .formSubmitContainer { + border-bottom: 1px solid #929292; +} +.newsletterForm .formSubmitContainer :global(.vtex-button) { + min-height: fit-content; + background: transparent; + border: 0; + border-bottom: 3px solid #bfbfbf; + border-radius: 0; +} +.newsletterForm .formSubmitContainer :global(.vtex-button__label) { + padding: 0 16px 10px !important; + border: 0; + font-size: 0; + color: #ffffff; +} +.newsletterForm .formSubmitContainer :global(.vtex-button__label)::after { + content: "ENVIAR"; + font-weight: 700; + font-size: 14px; + line-height: 19px; +} \ 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 af8093a..f3c3f00 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -78,3 +78,41 @@ margin-bottom: 0 !important; } } + +/* ----- NEWSLETTER ----- */ +.flexRow--newsletter-wrapper { + padding: 32px 0 16px; + // width: 30.23%; + // margin: 0 auto; + // background: red; //#000000; + border-bottom: 1px solid #ffffff; + background: #000000; + // display: flex; + // justify-content: center; + + @include mq(lg, max) { + padding: 64px 16px 32px; + border-bottom: 0; + } + + :global(.vtex-store-components-3-x-container) { + max-width: 4000px; + } + + .flexRowContent--newsletter-wrapper { + // background-color: yellow; + flex-direction: column; + align-items: center; + } +} + +.flexRowContent--newsletter-form { + // width: 774px; // 54.97%; + // margin: 0 auto; + border-bottom: 1px solid #929292; + justify-content: space-between; + + .pr0 { + height: fit-content; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 8163d04..bb5f9fc 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -21,3 +21,40 @@ } } } + +/* ----- NEWSLETTER ----- */ +.container--newsletter-title { + justify-content: center; + margin-bottom: 16px; + + .paragraph { + margin: 0; + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; + } +} + +.container--newsletter-subtitle { + justify-content: center; + margin-bottom: 16px; + + .paragraph { + margin: 0; + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + + @include mq(lg, max) { + font-size: 16px; + line-height: 22px; + } + } +} diff --git a/styles/sass/partials/footer/vtex.menu.scss b/styles/sass/partials/footer/vtex.menu.scss new file mode 100644 index 0000000..7dd30ec --- /dev/null +++ b/styles/sass/partials/footer/vtex.menu.scss @@ -0,0 +1,3 @@ +.styledLinkContent { + color: #ffffff; +} diff --git a/styles/sass/partials/footer/vtex.store-footer.scss b/styles/sass/partials/footer/vtex.store-footer.scss new file mode 100644 index 0000000..8171ced --- /dev/null +++ b/styles/sass/partials/footer/vtex.store-footer.scss @@ -0,0 +1,4 @@ +.footerLayout { + background-color: #000000; + padding: 32px 32px 128px; +} diff --git a/styles/sass/partials/newsletter/vtex.store-newsletter.scss b/styles/sass/partials/newsletter/vtex.store-newsletter.scss new file mode 100644 index 0000000..5c6f463 --- /dev/null +++ b/styles/sass/partials/newsletter/vtex.store-newsletter.scss @@ -0,0 +1,62 @@ +.newsletterForm { + display: flex; + width: 53.75%; + margin: 0 auto; + // padding-bottom: 16px; + + .emailInputContainer { + height: fit-content; + width: 690px; + border-bottom: 1px solid #929292; + + :global(.vtex-input-prefix__group) { + height: fit-content; + border: 0; + } + + :global(.vtex-styleguide-9-x-input) { + padding: 0 0 7px; + // background-color: yellow; + // font-family: "Open Sans"; + // font-style: normal; + // font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + background: transparent !important; + + @include mq(lg, max) { + font-size: 12px; + line-height: 16px; + } + } + } + + .formSubmitContainer { + border-bottom: 1px solid #929292; + + :global(.vtex-button) { + min-height: fit-content; + background: transparent; + border: 0; + border-bottom: 3px solid #bfbfbf; + border-radius: 0; + } + + :global(.vtex-button__label) { + padding: 0 16px 10px !important; + border: 0; + // font-family: "Open Sans"; + // font-style: normal; + font-size: 0; + color: #ffffff; + + &::after { + content: "ENVIAR"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } +}