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

feat: adiciona estilização descrição e produto indisponivel

Browse Source
This commit is contained in:
Vitor Soares 2023-01-31 18:43:32 -03:00
parent 5a92b0b2ff
commit d987535bad
14 changed files with 365 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/components/Pix-bloco/Pix.tsx
View File

@ -23,7 +23,7 @@ const Pix = () => {
return (
<div className={styles["wrapper"]}>
<div className={styles["container"]}>
<div className={styles["container-flex"]}>
<div className={styles["image"]}>
<img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
</div>

27
react/components/Pix-bloco/style.module.css
View File

@ -1,3 +1,26 @@
.wrapper {
/* background-color: red; */
.container-flex {
display: flex;
flex-direction: row;
align-items: center;
gap: 26px;
margin-top: 8px;
margin-bottom: 16px;
}
.value {
font-weight: 700;
font-size: 18px;
line-height: 25px;
margin: 0;
color: rgba(0, 0, 0, 0.58);
}
.text {
font-weight: 300;
font-size: 13px;
line-height: 18px;
margin: 0;
color: #929292;
}

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

@ -44,6 +44,7 @@
},
"flex-layout.row#product-main": {
"props": {
"blockClass": "container-main-content",
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
@ -109,11 +110,11 @@
"flex-layout.row#selling-price",
"product-installments",
"Pix",
"product-separator",
// "product-separator",
"sku-selector",
"html#buy-button",
// "flex-layout.row#buy-button",
"product-gifts",
// "product-gifts",
"availability-subscriber",
"shipping-simulator"
]
@ -250,8 +251,7 @@
"flex-layout.col#imageDescriptionContainer": {
"props": {
"blockClass": "image-description",
"width": "50%"
"blockClass": "image-description"
},
"children": ["product-images#imageDescription"]
},
@ -265,7 +265,8 @@
"flex-layout.row#description": {
"props": {
"marginBottom": 7
"marginBottom": 7,
"preventHorizontalStretch": true
},
"children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
},
@ -335,6 +336,7 @@
"flex-layout.row#product-availability": {
"props": {
"blockClass": "container-main-content",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@ -354,8 +356,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {

3
styles/css/vtex.breadcrumb.css
View File

@ -11,8 +11,7 @@
/* Cores */
/* Grid breakpoints */
.container {
padding-right: 40px;
padding-left: 40px;
padding: 0 40px 16px;
}
.homeIcon,

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

@ -23,4 +23,17 @@
.flexRowContent--buy-button-row {
height: 49px;
}
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px;
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
padding: 0;
margin: 0;
}
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
}

1
styles/css/vtex.product-identifier.css
View File

@ -23,4 +23,5 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
padding-bottom: 24px;
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -10,6 +11,10 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */
.container {
padding: 0;
}
.newsletter {
background: #000000;
color: #fff;
@ -41,8 +46,8 @@
color: #000000;
}
.container {
padding: 0 40px;
.thumbImg {
border-radius: 8px;
}
.productNameContainer {
@ -50,10 +55,12 @@
font-size: 20px;
line-height: 34px;
text-align: right;
margin-bottom: 8px;
color: #575757;
}
.productImage .productImageTag {
width: unset !important;
max-height: unset !important;
}
@ -77,6 +84,7 @@
flex-direction: column;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
margin-bottom: 16px;
order: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
@ -100,6 +108,9 @@
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
@ -156,6 +167,9 @@
bottom: 3px;
transform: rotateY(180deg);
}
.skuSelectorContainer .skuSelectorItem--sku-size {
margin: 0 16px 0 0;
}
.subscriberContainer {
font-weight: 400;
@ -190,6 +204,13 @@
font-size: 40px;
}
:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
margin: 0;
}
:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) {
margin: 0;
}
.shippingContainer {
display: flex;
}
@ -256,6 +277,10 @@
color: #929292;
}
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
}
.shippingTable {
display: flex;
flex-direction: column;
@ -274,6 +299,7 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding-right: 112px;
color: #202020;
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
@ -324,4 +350,65 @@
}
.shippingTableBody .shippingTableRadioBtn {
display: none;
}
.subscriberContainer .title {
font-size: 0;
}
.subscriberContainer .title::after {
content: "Produto Indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .title .subscribeLabel {
font-size: 0;
}
.subscriberContainer .title .subscribeLabel::after {
content: "Deseja saber quando estiver disponível";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: " nome email" " submit submit";
justify-content: inherit;
gap: 8px;
}
.subscriberContainer .form .content .inputName {
grid-area: nome;
}
.subscriberContainer .form .content .inputEmail {
grid-area: email;
}
.subscriberContainer .form .content .submit {
grid-area: submit;
width: 100%;
}
.subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%;
height: 49px;
cursor: pointer;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
content: "avise-me";
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
color: #575757;
}

48
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,48 @@
/*
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 */
/* Fontes */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */
.container--structure {
padding: 0 40px;
}
.contentContainer {
padding: 0 32px;
}
.listContainer {
border-bottom: 1px solid #b9b9b9;
height: 43px;
justify-content: space-between;
padding: 0 64px;
margin-bottom: 32px;
}
.listContainer .listItem :global(.vtex-button):hover {
background-color: transparent;
}
.listContainer .listItem :global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 18px;
color: #bfbfbf;
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
}
.listContainer .listItemActive :global(.vtex-button) {
background-color: #fff;
border: none;
}
.listContainer .listItemActive :global(.vtex-button__label) {
color: #000000;
background-color: #fff;
border-bottom: 2px solid #000000;
padding: 0;
}

3
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,6 +1,5 @@
.container {
padding-right: 40px;
padding-left: 40px;
padding: 0 40px 16px ;
}
.homeIcon,

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

@ -12,3 +12,16 @@
.flexRowContent--buy-button-row {
height: 49px;
}
:global(.vtex-flex-layout-0-x-flexRow--container-main-content) {
padding: 0 40px;
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
padding: 0;
margin: 0;
}
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
}

1
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -15,5 +15,6 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
padding-bottom: 24px;
}
}

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

@ -1,3 +1,7 @@
.container {
padding: 0;
}
.newsletter {
background: $black;
color: $white;
@ -33,22 +37,24 @@
}
}
// TITULO E IMAGENS
.container {
padding: 0 40px;
.thumbImg {
border-radius: 8px;
}
// TITULO E IMAGENS
.productNameContainer {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
margin-bottom: 8px;
color: $gray-100;
}
.productImage {
.productImageTag {
width: unset !important;
max-height: unset !important;
}
}
@ -75,6 +81,7 @@ margin-top: 16px;
flex-direction: column;
.skuSelectorSubcontainer--cor {
margin-bottom: 16px;
order: 2;
.frameAround,
@ -108,6 +115,8 @@ margin-top: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
@ -183,6 +192,9 @@ margin-top: 16px;
transform: rotateY(180deg);
}
}
.skuSelectorItem--sku-size {
margin: 0 16px 0 0;
}
}
.subscriberContainer {
@ -226,6 +238,14 @@ margin-top: 16px;
}
}
:global(.vtex-store-components-3-x-skuSelectorNameContainer) {
margin: 0;
:global(.vtex-store-components-3-x-skuSelectorOptionsList) {
margin: 0;
}
}
// CEP
.shippingContainer {
display: flex;
@ -309,6 +329,10 @@ margin-top: 16px;
}
}
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
}
// ENTREGA
.shippingTable {
@ -330,6 +354,7 @@ margin-top: 16px;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding-right: 112px;
color: $black-100;
}
@ -399,3 +424,88 @@ margin-top: 16px;
display: none;
}
}
// PRODUTO INDISPONÍVEL
.subscriberContainer {
.title {
font-size: 0;
&::after {
content: "Produto Indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $gray-300;
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-300;
}
}
}
.form {
.content {
display: grid;
grid-template-areas: " nome email"
" submit submit";
justify-content: inherit;
gap: 8px;
.inputName {
grid-area: nome;
}
.inputEmail {
grid-area: email;
}
.submit {
grid-area: submit;
width: 100%;
:global(.vtex-button) {
width: 100%;
height: 49px;
cursor: pointer;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "avise-me";
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $white;
}
}
}
}
}
}
// DESCRIÇÃO
.productDescriptionContainer {
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
color: $gray-100;
}
}

47
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,47 @@
.container--structure {
padding: 0 40px;
}
.contentContainer {
padding: 0 32px;
}
.listContainer {
border-bottom: 1px solid $gray-500;
height: 43px;
justify-content: space-between;
padding: 0 64px;
margin-bottom: 32px;
.listItem {
:global(.vtex-button) {
&:hover {
background-color: transparent;
}
}
:global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 18px;
color: $gray-400;
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
}
}
.listItemActive {
:global(.vtex-button) {
background-color: $white;
border: none;
}
:global(.vtex-button__label) {
color: $black;
background-color: $white;
border-bottom: 2px solid $black;
padding: 0;
}
}
}

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

@ -11,6 +11,9 @@ $white: #fff;
$gray: #929292;
$gray-100: #575757;
$gray-200: #cccccc;
$gray-300: #868686;
$gray-400: #bfbfbf;
$gray-500: #b9b9b9;
$color-gray: #6c6c6c;