andreamatsunaga/challenge-vtex-io-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria newsletter

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-10 20:56:36 -03:00
parent 105961002d
commit c85b244922
14 changed files with 393 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

@ -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"
}

5
react/components/Html/styles.css
View File

@ -10,8 +10,3 @@
display: flex;
flex-direction: column;
}
/* [data-testid="product-name"]
{
} */

27
store/blocks/footer/footer.json
View File

@ -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": {

101
store/blocks/pdp/product.jsonc
View File

@ -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%"
// }
}

28
styles/css/vtex.flex-layout.css
View File

@ -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;
}

12
styles/css/vtex.menu.css Normal file
View File

@ -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;
}

30
styles/css/vtex.rich-text.css
View File

@ -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;
}
}

24
styles/css/vtex.store-footer.css
View File

@ -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;
}

58
styles/css/vtex.store-newsletter.css Normal file
View File

@ -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;
}

38
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -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;
}
}

37
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -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;
}
}
}

3
styles/sass/partials/footer/vtex.menu.scss Normal file
View File

@ -0,0 +1,3 @@
.styledLinkContent {
color: #ffffff;
}

4
styles/sass/partials/footer/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,4 @@
.footerLayout {
background-color: #000000;
padding: 32px 32px 128px;
}

62
styles/sass/partials/newsletter/vtex.store-newsletter.scss Normal file
View File

@ -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;
}
}
}
}