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

feature/pagina-de-produto #1

Merged
EleonoraOtz merged 21 commits from feature/pagina-de-produto into master 2023-02-03 20:04:20 +00:00
Conversation 0 Commits 21 Files Changed 54 +80 -20
7 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 15ad1c3b84 - Show all commits

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

@ -258,63 +258,78 @@
},
"tab-content.item#1": {
"children": ["product-images", "rich-text#1"],
"children": ["product-images#description", "rich-text#1"],
"props": {
"tabId": "description#1"
}
},
"tab-content.item#2": {
"children": ["product-images", "rich-text#2"],
"children": ["product-images#description", "rich-text#2"],
"props": {
"tabId": "description#2"
}
},
"tab-content.item#3": {
"children": ["product-images", "rich-text#3"],
"children": ["product-images#description", "rich-text#3"],
"props": {
"tabId": "description#3"
}
},
"tab-content.item#4": {
"children": ["product-images", "rich-text#4"],
"children": ["product-images#description", "rich-text#4"],
"props": {
"tabId": "description#4"
}
},
"tab-content.item#5": {
"children": ["product-images", "rich-text#5"],
"children": ["product-images#description", "rich-text#5"],
"props": {
"tabId": "description#5"
}
},
"product-images#description": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
"zoomMode": "disabled",
"displayMode": "first-image"
}
},
"rich-text#1": {
"props": {
"text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#2": {
"props": {
"text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#3": {
"props": {
"text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#4": {
"props": {
"text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#5": {
"props": {
"text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.",
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},

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

@ -55,7 +55,7 @@
}
.flexRow--deals {
background-color: #0f3e99;
background-color: #fff;
padding: 14px 0px;
}

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

@ -179,6 +179,7 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding-bottom: 0;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 280px;
@ -241,6 +242,7 @@
display: flex;
flex-direction: column;
border: none;
padding: 4px 0;
}
.shippingTable .shippingTableHead {
display: flex;

23
styles/css/vtex.tab-layout.css
View File

@ -19,7 +19,7 @@
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover {
height: 43px;
border: none;
background-color: white;
background-color: transparent;
padding: 0;
margin: 0;
}
@ -32,7 +32,6 @@
padding: 0;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover {
background-color: #fff;
padding: 0;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) {
@ -48,8 +47,26 @@
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover {
border-bottom: 2px solid #000000;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) :global(.vtex-tab-layout-0-x-contentItem) .paragraph {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
padding: 32px;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-top: 0;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

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

@ -48,7 +48,7 @@
}
.flexRow--deals {
background-color: #0f3e99;
background-color: $white;
padding: 14px 0px;
}

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

@ -201,6 +201,7 @@
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding-bottom: 0;
}
:global(.vtex-input-prefix__group) {
@ -272,6 +273,7 @@
display: flex;
flex-direction: column;
border: none;
padding: 4px 0;
.shippingTableHead {
display: flex;

34
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -8,11 +8,13 @@
padding: 0 70px;
.listItem {
:global(.vtex-button) {
&:hover {
height: 43px;
border: none;
background-color: white;
background-color: transparent;
padding: 0;
margin: 0;
}
@ -27,7 +29,6 @@
padding: 0;
&:hover {
background-color: $white;
padding: 0;
}
}
@ -37,7 +38,6 @@
:global(.vtex-button) {
background-color: white;
border: none;
}
:global(.vtex-button__label) {
color: $black;
@ -53,12 +53,36 @@
}
:global(.vtex-tab-layout-0-x-contentContainer) {
.contentItem {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
padding: 32px;
:global(.vtex-tab-layout-0-x-contentItem) {
.paragraph {
// :global(.vtex-store-components-3-x-content) {
// max-width: 100%;
// }
:global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
// max-width: 872px;
}
:global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: $gray-600;
margin-top: 0;
}
:global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray-500;
// width: 50%;
}
}
}