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

feat(pdp): Adiciona newsletter

Browse Source
This commit is contained in:
Cainã Milech 2023-01-27 19:35:11 -03:00
parent 53c61db3da
commit 1ad8479f6c
3 changed files with 118 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,10 +12,28 @@
"list-context.product-list#prateleira", "list-context.product-list#prateleira",
/*"shelf.relatedProducts",*/ /*"shelf.relatedProducts",*/
"product-questions-and-answers" /*"product-questions-and-answers",*/
"newsletter"
] ]
}, },
"newsletter": {
"props": {
"label": "Assine nossa newsletter",
"placeholder": "Digite seu e-mail",
"blockClass": "newsletter"
},
"blocks": ["rich-text#newsletter"]
},
"rich-text#newsletter": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Receba ofertas e novidades por e-mail",
"blockClass": "news-msg"
}
},
"list-context.product-list#prateleira": { "list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf"], "blocks": ["product-summary.shelf"],
"children": ["rich-text#prateleira", "slider-layout#prateleira"] "children": ["rich-text#prateleira", "slider-layout#prateleira"]

52
styles/css/vtex.store-components.css
View File

@ -13,10 +13,6 @@
padding: 0; padding: 0;
} }
.newsletter {
background: red;
}
.productImageTag--main { .productImageTag--main {
max-height: max-content !important; max-height: max-content !important;
} }
@ -412,3 +408,51 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
.newsletter--newsletter {
margin-top: 64px;
padding-top: 32px;
padding-bottom: 16px;
background-color: #000000;
}
.container--newsletter {
color: #fff;
}
.form--newsletter {
position: relative;
}
.form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
background-color: #000000;
padding: 0;
}
.form--newsletter :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
border-radius: 0%;
padding-bottom: 4px;
align-items: flex-end;
}
.label--newsletter {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #fff;
}
.label--newsletter::after {
content: "Receba ofertas e novidades por e-mail";
position: absolute;
right: 100px;
top: 42px;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.inputGroup--newsletter {
margin-top: 40px;
padding: 0;
}

55
styles/sass/pages/product/vtex.store-components.scss
View File

@ -3,10 +3,6 @@
padding: 0; padding: 0;
} }
.newsletter {
background: red;
}
//IMAGENS //IMAGENS
.productImageTag--main { .productImageTag--main {
max-height: max-content !important; max-height: max-content !important;
@ -469,3 +465,54 @@
line-height: 16px; line-height: 16px;
} }
} }
//NEWSLETTER
.newsletter--newsletter {
margin-top: 64px;
padding-top: 32px;
padding-bottom: 16px;
background-color: $color-black-100;
}
.container--newsletter {
color: $color-white;
}
.form--newsletter {
position: relative;
:global(.vtex-styleguide-9-x-noAppearance) {
background-color: $color-black-100;
padding: 0;
}
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid $color-gray6;
border-radius: 0%;
padding-bottom: 4px;
align-items: flex-end;
}
}
.label--newsletter {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $color-white;
&::after {
content: "Receba ofertas e novidades por e-mail";
position: absolute;
right: 100px;
top: 42px;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
}
}
.inputGroup--newsletter {
margin-top: 40px;
padding: 0;
}