diff --git a/store/blocks/pdp/product-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc index b43fc2e..ae29803 100644 --- a/store/blocks/pdp/product-tab-layout.jsonc +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -1,13 +1,14 @@ - // Descrição +// Descrição - { - "html#tab-layout": { - "props" : { - "testId": "tab-layout" - } - }, +{ + "html#tab-layout": { + "children": ["tab-layout"], + "props": { + "testId": "product-description" + } + }, - "tab-layout": { + "tab-layout": { "children": ["tab-list", "tab-content"], "props": { "blockClass": "tabLayout" @@ -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" } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 12fc1d4..ffc8bf4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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" }, diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 875005a..c83ac9f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -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; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2db2f49..0f5ac7e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -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; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index f9b9374..e525b2f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -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; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index cada9fb..b58606a 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -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 + } + } } } }