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 aviso indisponivel

Browse Source
This commit is contained in:
Cainã Milech 2023-01-25 18:49:42 -03:00
parent c9a4ae4eda
commit a2c9c02a40
4 changed files with 177 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -286,9 +286,9 @@
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "html#codigo",
"sku-selector", "flex-layout.row#availability",
"flex-layout.row#availability" "sku-selector"
] ]
}, },
"flex-layout.row#availability": { "flex-layout.row#availability": {

78
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
@ -135,6 +136,14 @@
height: 48px; height: 48px;
width: 48px; width: 48px;
} }
.skuSelectorSubcontainer--cor .skuSelectorItemImage--skus .diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);
max-width: 27px;
max-height: 38px;
left: 11px;
top: 5px;
}
.skuSelectorSubcontainer--cor .skuSelectorInternalBox--skus { .skuSelectorSubcontainer--cor .skuSelectorInternalBox--skus {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -279,3 +288,72 @@
.content--description-imagem { .content--description-imagem {
border: 1px solid red; border: 1px solid red;
} }
.subscriberContainer .title {
font-size: 0;
margin: 0;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
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-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .content {
position: relative;
width: 399px;
gap: 8px;
margin-bottom: 60px;
}
.subscriberContainer .content :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: none;
}
.subscriberContainer .content :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.subscriberContainer .content :global(.vtex-input-prefix__group) {
border: none;
}
.subscriberContainer .content .inputEmail,
.subscriberContainer .content .inputName {
border: 0.6px solid #989898;
margin: 0;
}
.subscriberContainer .content .submit {
position: absolute;
top: 55px;
width: 100%;
}
.subscriberContainer .content .submit :global(.vtex-button) {
width: 100%;
background-color: #000000;
height: 49px;
}
.subscriberContainer .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .content .submit :global(.vtex-button__label)::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}

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

@ -138,6 +138,20 @@
.skuSelectorItemImage--skus { .skuSelectorItemImage--skus {
height: 48px; height: 48px;
width: 48px; width: 48px;
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(
to top right,
transparent 44%,
#d5d5d5 48%,
transparent 52%
);
max-width: 27px;
max-height: 38px;
left: 11px;
top: 5px;
}
} }
.skuSelectorInternalBox--skus { .skuSelectorInternalBox--skus {
@ -306,3 +320,84 @@
.content--description-imagem { .content--description-imagem {
border: 1px solid red; border: 1px solid red;
} }
//PRODUTO INDISPONIVEL
.subscriberContainer {
.title {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray10;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray10;
}
}
.content {
position: relative;
width: 399px;
gap: 8px;
margin-bottom: 60px;
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray7;
border: none;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray7;
}
}
:global(.vtex-input-prefix__group) {
border: none;
}
.inputEmail,
.inputName {
border: 0.6px solid $color-gray7;
margin: 0;
}
.submit {
position: absolute;
top: 55px;
width: 100%;
:global(.vtex-button) {
width: 100%;
background-color: $color-black-100;
height: 49px;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
}
}

1
styles/sass/utils/_vars.scss
View File

@ -13,6 +13,7 @@ $color-gray6: #929292;
$color-gray7: #989898; $color-gray7: #989898;
$color-gray8: #575757; $color-gray8: #575757;
$color-gray9: #bfbfbf; $color-gray9: #bfbfbf;
$color-gray10: #868686;
$color-blue: #4267b2; $color-blue: #4267b2;