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

feat: Inclui data tests id que faltaram #2

Merged
EleonoraOtz merged 1 commits from feature/pagina-de-produto-data-test into master 2023-02-06 23:23:06 +00:00
Conversation 0 Commits 1 Files Changed 6 +117 -70
6 changed files with 117 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
store/blocks/pdp/product-tab-layout.jsonc
View File

@ -1,9 +1,10 @@
// Descrição
// Descrição
{
{
"html#tab-layout": {
"props" : {
"testId": "tab-layout"
"children": ["tab-layout"],
"props": {
"testId": "product-description"
}
},
@ -77,31 +78,31 @@
},
"tab-content.item#1": {
"children": ["product-images#description", "rich-text#1"],
"children": ["product-images#description", "product-description#1"],
"props": {
"tabId": "description#1"
}
},
"tab-content.item#2": {
"children": ["product-images#description", "rich-text#2"],
"children": ["product-images#description", "product-description#2"],
"props": {
"tabId": "description#2"
}
},
"tab-content.item#3": {
"children": ["product-images#description", "rich-text#3"],
"children": ["product-images#description", "product-description#3"],
"props": {
"tabId": "description#3"
}
},
"tab-content.item#4": {
"children": ["product-images#description", "rich-text#4"],
"children": ["product-images#description", "product-description#4"],
"props": {
"tabId": "description#4"
}
},
"tab-content.item#5": {
"children": ["product-images#description", "rich-text#5"],
"children": ["product-images#description", "product-description#5"],
"props": {
"tabId": "description#5"
}
@ -122,39 +123,39 @@
}
},
"rich-text#1": {
"product-description#1": {
"props": {
"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",
"blockClass": "description-rich-text"
"blockClass": "description-product-description"
}
},
"rich-text#2": {
"product-description#2": {
"props": {
"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",
"blockClass": "description-rich-text"
"blockClass": "description-product-description"
}
},
"rich-text#3": {
"product-description#3": {
"props": {
"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",
"blockClass": "description-rich-text"
"blockClass": "description-product-description"
}
},
"rich-text#4": {
"product-description#4": {
"props": {
"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",
"blockClass": "description-rich-text"
"blockClass": "description-product-description"
}
},
"rich-text#5": {
"product-description#5": {
"props": {
"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",
"blockClass": "description-rich-text"
"blockClass": "description-product-description"
}
}
}

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

@ -112,10 +112,10 @@
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#selling-price",
"product-installments",
"html#product-name",
"html#product-code",
"html#product-price",
"html#product-installments",
"html#pix-price",
"html#sku-selector",
"html#buy-button",
@ -135,6 +135,13 @@
}
},
// Nome do produto
"html#product-name": {
"children": ["flex-layout.row#product-name"],
"props": { "testId": "product-name" }
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@ -142,6 +149,15 @@
"children": ["vtex.store-components:product-name"]
},
// Código identificação produto
"html#product-code": {
"children": ["product-identifier.product"],
"props": {
"testId": "product-code"
}
},
// Skus
"html#sku-selector": {
@ -159,8 +175,24 @@
}
},
// Valor do produto
"html#product-price": {
"children": ["flex-layout.row#selling-price"],
"props": {
"testId": "product-price"
}
},
// Parcelamento
"html#product-installments": {
"children": ["product-installments"],
"props": {
"testId": "product-installments"
}
},
"product-installments": {
"props": {
"markers": ["discount"],
@ -294,7 +326,8 @@
"children": [
"product-summary-image",
"product-summary-name",
"product-price"
"product-list-price",
"product-selling-price"
]
},
@ -305,6 +338,13 @@
}
},
"product-list-price": {
"props": {
"message": "de {listPriceValue} por",
"blockClass": "list-price"
}
},
// Newsletter
"newsletter": {
@ -317,7 +357,7 @@
// Informações de frete
"html#shipping-simulator" : {
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},

24
styles/css/vtex.slider-layout.css
View File

@ -43,44 +43,40 @@
padding-right: 16px;
}
:global(.vtex-store-components-3-x-listPrice) {
:global(.vtex-product-price-1-x-listPrice) {
display: block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
margin: 0;
padding-bottom: 8px;
text-decoration: line-through;
}
@media screen and (max-width: 1024px) {
:global(.vtex-store-components-3-x-listPrice) {
:global(.vtex-product-price-1-x-listPrice) {
font-size: 12px;
line-height: 16px;
}
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
content: "de ";
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
content: " por";
:global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue--list-price) {
text-decoration: none;
}
:global(.vtex-store-components-3-x-sellingPrice) {
:global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
:global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
:global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
@media screen and (max-width: 1024px) {
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
:global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
font-size: 18px;
line-height: 25px;
}

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

@ -149,15 +149,15 @@
max-width: 100%;
display: block;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
max-width: 50%;
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
max-width: 100%;
}
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
@ -165,32 +165,41 @@
margin-top: 0;
}
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-size: 32px;
line-height: 32px;
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-size: 20px;
line-height: 32px;
}
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-size: 14px;
line-height: 19px;
}
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) {
padding: 0;
margin: 0;
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) {
margin-bottom: 16px;
}
}

24
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -45,44 +45,36 @@
// Preço sem desconto
:global(.vtex-store-components-3-x-listPrice) {
:global(.vtex-product-price-1-x-listPrice) {
display: block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-300;
margin: 0;
padding-bottom: 8px;
text-decoration: line-through;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
:global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-currencyContainer) {
&::before {
content: "de ";
}
&::after {
content: " por";
}
:global(.vtex-product-price-1-x-listPriceValue--list-price) {
text-decoration: none;
}
}
// Preço com desconto
:global(.vtex-store-components-3-x-sellingPrice) {
:global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
:global(.vtex-product-price-1-x-sellingPriceLabel) {
display: none;
}
:global(.vtex-store-components-3-x-sellingPriceValue) {
:global(.vtex-product-price-1-x-sellingPriceValue) {
font-weight: 700;
font-size: 24px;
line-height: 33px;

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

@ -163,7 +163,7 @@
// Conteúdo de texto da descrição do produto
:global(.vtex-rich-text-0-x-container--description-rich-text) {
:global(.vtex-store-components-3-x-productDescriptionContainer) {
max-width: 50%;
@media screen and (max-width: 1024px) {
@ -172,7 +172,7 @@
// Título da descrição do produto
:global(.vtex-rich-text-0-x-heading) {
:global(.vtex-store-components-3-x-productDescriptionTitle) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
@ -192,7 +192,7 @@
// Texto descrição do produto
:global(.vtex-rich-text-0-x-paragraph) {
:global(.vtex-store-components-3-x-productDescriptionText) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
@ -207,6 +207,15 @@
font-size: 14px;
line-height: 19px;
}
:global(.vtex-store-components-3-x-container--description-product-description) {
padding: 0;
margin: 0;
@media screen and (max-width: 1024px) {
margin-bottom: 16px
}
}
}
}
}