PatrickReisSantos/challenge-vtex-io-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona availability sub

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-10 22:52:27 -03:00
parent 027d1499d9
commit 26381655a9
3 changed files with 180 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -266,7 +266,8 @@
"colGap": 7, "colGap": 7,
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
"paddingTop": 7 "paddingTop": 7,
"blockClass": "product-container"
}, },
"children": [ "children": [
"flex-layout.col#stack", "flex-layout.col#stack",
@ -282,8 +283,8 @@
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "product-identifier.product",
"sku-selector", "flex-layout.row#availability",
"flex-layout.row#availability" "sku-selector"
] ]
}, },
"flex-layout.row#availability": { "flex-layout.row#availability": {

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -120,6 +121,15 @@
font-size: 0; font-size: 0;
} }
.diagonalCross {
background-color: black;
transform: rotate(45deg) translate(-50%, -50%);
width: 2px;
top: 38%;
left: 12%;
height: 110%;
}
.shippingContainer { .shippingContainer {
position: relative; position: relative;
} }
@ -365,3 +375,80 @@
content: "FRETE"; content: "FRETE";
font-size: 14px; font-size: 14px;
} }
.subscriberContainer .form {
margin: 0;
}
.subscriberContainer .title {
margin: 0;
font-size: 0;
}
.subscriberContainer .title::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
content: "Produto indisponível";
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .content {
flex-wrap: wrap;
width: 100%;
}
@media (max-width: 639px) {
.subscriberContainer .content {
flex-wrap: wrap !important;
width: 100%;
display: flex;
}
}
.subscriberContainer .content .inputName {
width: 49.5%;
margin: 0;
}
.subscriberContainer .content .inputName :global(.vtex-input-prefix__group) {
border-radius: 0;
}
.subscriberContainer .content .inputEmail {
width: 49.5%;
margin: 0;
}
.subscriberContainer .content .inputEmail :global(.vtex-input-prefix__group) {
border-radius: 0;
}
.subscriberContainer .content .submit {
margin: 0;
width: 100%;
}
.subscriberContainer .content .submit :global(.vtex-button) {
height: 49px;
margin-top: 15px;
width: 100%;
background-color: black;
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
.subscriberContainer .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .content .submit :global(.vtex-button__label)::after {
font-size: 18px;
content: "AVISE-ME";
}

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

@ -119,6 +119,15 @@
} }
} }
.diagonalCross {
background-color: black;
transform: rotate(45deg) translate(-50%, -50%);
width: 2px;
top: 38%;
left: 12%;
height: 110%;
}
.shippingContainer { .shippingContainer {
position: relative; position: relative;
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
@ -356,3 +365,83 @@
font-size: 14px; font-size: 14px;
} }
} }
.subscriberContainer {
.form {
margin: 0;
}
.title {
margin: 0;
font-size: 0;
&::after {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
content: "Produto indisponível";
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
}
.content {
flex-wrap: wrap;
width: 100%;
@media (max-width: 639px) {
flex-wrap: wrap !important;
width: 100%;
display: flex;
}
.inputName {
width: 49.5%;
margin: 0;
:global(.vtex-input-prefix__group) {
border-radius: 0;
}
}
.inputEmail {
width: 49.5%;
margin: 0;
:global(.vtex-input-prefix__group) {
border-radius: 0;
}
}
.submit {
margin: 0;
width: 100%;
:global(.vtex-button) {
height: 49px;
margin-top: 15px;
width: 100%;
background-color: black;
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
font-size: 18px;
content: "AVISE-ME";
}
}
}
}
}