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 +367 -29
7 changed files with 367 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 529f0db009 - Show all commits

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

@ -3,9 +3,10 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
// "flex-layout.row#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"tab-layout",
"shelf.relatedProducts",
"product-questions-and-answers",
"newsletter"
@ -68,14 +69,14 @@
]
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
"specificationName": "On Sale",
"visibleWhen": "True",
"displayValue": "SPECIFICATION_NAME"
}
},
// "product-specification-badges": {
// "props": {
// "specificationGroupName": "Group",
// "specificationName": "On Sale",
// "visibleWhen": "True",
// "displayValue": "SPECIFICATION_NAME"
// }
// },
"flex-layout.col#stack": {
"children": ["stack-layout"],
@ -110,7 +111,6 @@
"flex-layout.row#selling-price",
"product-installments",
"sku-selector",
// "flex-layout.row#buy-button",
"html#buy-button",
"product-gifts",
"availability-subscriber",
@ -148,15 +148,6 @@
"children": ["product-quantity#size", "add-to-cart-button"]
},
// "flex-layout.row#buy-button": {
// "props": {
// "marginTop": 4,
// "marginBottom": 7,
// "blockClass": "buy-button"
// },
// "children": ["product-quantity#size", "add-to-cart-button"]
// },
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@ -197,6 +188,137 @@
}
},
"tab-layout": {
"children": ["tab-list", "tab-content"],
"props": {
"blockClass": "tabLayout"
}
},
"tab-list": {
"children": [
"tab-list.item#1",
"tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
],
"props": {
"blockClass": "tabList"
}
},
"tab-content": {
"children": [
"tab-content.item#1",
"tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
],
"props": {
"blockClass": "tabContent"
}
},
"tab-list.item#1": {
"props": {
"tabId": "description#1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "description#2",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description#3",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description#4",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description#5",
"label": "Descrição"
}
},
"tab-content.item#1": {
"children": ["product-images", "rich-text#1"],
"props": {
"tabId": "description#1"
}
},
"tab-content.item#2": {
"children": ["product-images", "rich-text#2"],
"props": {
"tabId": "description#2"
}
},
"tab-content.item#3": {
"children": ["product-images", "rich-text#3"],
"props": {
"tabId": "description#3"
}
},
"tab-content.item#4": {
"children": ["product-images", "rich-text#4"],
"props": {
"tabId": "description#4"
}
},
"tab-content.item#5": {
"children": ["product-images", "rich-text#5"],
"props": {
"tabId": "description#5"
}
},
"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.",
"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.",
"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.",
"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.",
"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.",
"textPosition": "CENTER"
}
},
"newsletter": {
"props": {
"label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail",

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -25,8 +26,7 @@
}
.container {
margin: 0 36px;
padding: 0 4px;
padding: 0 40px;
}
@media screen and (min-width: 112.5em) {
.container {
@ -308,4 +308,35 @@
}
.shippingTable .shippingTableRadioBtn {
display: none;
}
.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 .form :global(.vtex-input-prefix__group) {
border-radius: 0;
border: 1px solid #989898;
}
.subscriberContainer .form :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}

17
styles/css/vtex.styleguide.css Normal file
View File

@ -0,0 +1,17 @@
/*
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 */
/* Grid breakpoints */
.subscriberContainer .hideDecorators::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.subscriberContainer :global(.vtex-styleguide-9-x-input) {
border: 1px solid red;
}

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

@ -0,0 +1,55 @@
/*
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 */
/* Grid breakpoints */
:global(.vtex-tab-layout-0-x-container) {
padding: 0 40px;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
border-bottom: 1px solid #bfbfbf;
height: 43px;
justify-content: space-between;
padding: 0 70px;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover {
height: 43px;
border: none;
background-color: white;
padding: 0;
margin: 0;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 18px;
color: #bfbfbf;
text-transform: capitalize;
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) {
background-color: white;
border: none;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
color: #000000;
background-color: #fff;
border-bottom: 2px solid #000000;
padding: 0;
}
: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 {
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

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

@ -25,8 +25,7 @@
}
.container {
margin: 0 36px;
padding: 0 4px;
padding: 0 40px;
@media screen and (min-width: 112.5em) {
margin: 6px 356px;
@ -86,10 +85,6 @@
// height: 48px;
}
// .skuSelectorInternalBox {
// border-color: $gray-800;
// }
.frameAround {
border-color: $black;
}
@ -360,3 +355,43 @@
display: none;
}
}
.subscriberContainer {
.title {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $gray-50;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-50;
}
}
.form {
:global(.vtex-input-prefix__group) {
border-radius: 0;
border: 1px solid $gray-800;
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
}
}
}

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

@ -0,0 +1,77 @@
:global(.vtex-tab-layout-0-x-container) {
padding: 0 40px;
.listContainer--tabList {
border-bottom: 1px solid $gray-100;
height: 43px;
justify-content: space-between;
padding: 0 70px;
.listItem {
:global(.vtex-button) {
&:hover {
height: 43px;
border: none;
background-color: white;
padding: 0;
margin: 0;
}
}
:global(.vtex-button__label) {
font-weight: 400;
font-size: 18px;
line-height: 18px;
color: $gray-100;
text-transform: capitalize;
padding: 0;
&:hover {
background-color: $white;
padding: 0;
}
}
}
.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;
&:hover {
border-bottom: 2px solid $black;
}
}
}
}
:global(.vtex-tab-layout-0-x-contentContainer) {
:global(.vtex-tab-layout-0-x-contentItem) {
.paragraph {
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
}
}
// .contentItem {
// display: flex;
// flex-direction: row;
// .productImageTag {
// width: 50%;
// }
// }
// .carouselGaleryThumbs {
// display: none;
// }
}

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

@ -2,6 +2,7 @@
$white: #fff;
$gray-50: #868686;
$gray-100: #bfbfbf;
$gray-200: #b9b9b9;
$gray-300: #bababa;