diff --git a/react/Parcelamento.tsx b/react/Parcelamento.tsx deleted file mode 100644 index 3e42227..0000000 --- a/react/Parcelamento.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Parcelamento from './components/Parcelamento/Parcelamento' - -export default Parcelamento diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 93d430b..b04928c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -5,10 +5,20 @@ margin-bottom: 16px; } -[class*='html--Quantity-Button'] > [class*='button'] { +[class*='html--Quantity-Button'] > [class*='html--addButton'] { width: 100%; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] { height: 49px; background: #000; border: #000; border-radius: 0; } + +[class*='html--Prateleira'] { + display: flex; + flex-direction: column; +} diff --git a/react/components/Parcelamento/Parcelamento.css b/react/components/Parcelamento/Parcelamento.css deleted file mode 100644 index 27a561c..0000000 --- a/react/components/Parcelamento/Parcelamento.css +++ /dev/null @@ -1,3 +0,0 @@ -.ParcelaWrapper { - margin: 0 0 8px 0; -} diff --git a/react/components/Parcelamento/Parcelamento.tsx b/react/components/Parcelamento/Parcelamento.tsx deleted file mode 100644 index 9d9b6b9..0000000 --- a/react/components/Parcelamento/Parcelamento.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { useProduct } from 'vtex.product-context' -import { useCssHandles } from 'vtex.css-handles' - -import "./Parcelamento.css" - -const Parcelamento = () => { - const CSS_HANDLES = ['ParcelaWrapper'] - - const handles = useCssHandles(CSS_HANDLES) - const product = useProduct() - - const Installments = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3] - .NumberOfInstallments, - } - const Price = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, - } - console.log(product) - return ( -

- {Installments.numberOfInstallments} x de R$  - {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem - juros -

- ) -} - -export default Parcelamento diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d5e78fa..ae85142 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#desc", + "html#tab-layout#desc", "flex-layout.row#specifications-title", "list-context.product-list#demo1", "product-questions-and-answers", @@ -106,31 +106,55 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#selling-price", - "Parcelamento", - "pix", - "sku-selector", + "html#selling-price", + "html#product-installments", + "html#pix", + "html#sku-selector", "html#quantityAndButton", "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, - - "shipping-simulator": { + "html#selling-price": { "props": { - "testId": "shipping-simulator" - } + "testId": "product-price" + }, + "children": ["product-selling-price"] }, - "flex-layout.row#product-name": { + "html#product-installments": { "props": { - "marginBottom": 3 + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + "html#pix": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shippingSimulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name", + "blockClass": "productName" }, "children": ["vtex.store-components:product-name"] }, @@ -154,11 +178,31 @@ "showValueNameForImageVariation": true } }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, "html#quantityAndButton": { "props": { "blockClass": "Quantity-Button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "addButton" + }, + "children": ["add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] }, "flex-layout.row#product-availability": { @@ -180,12 +224,19 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", + "html#product-name", + "html#codigo", + "html#sku-selector", "flex-layout.row#availability" ] }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -211,6 +262,14 @@ "children": ["product-description"] }, + "html#tab-layout#desc": { + "props": { + "testId": "product-description", + "blockClass": "tabDescription" + }, + "children": ["tab-layout#desc"] + }, + "tab-layout#desc": { "children": ["tab-list#home", "tab-content#desc"], "props": { @@ -321,18 +380,11 @@ "list-context.product-list#demo1": { "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#demo-products"] + "children": ["html#slider-layout"] }, "product-summary.shelf#demo1": { - "children": [ - "product-summary-name", - "product-summary-description", - "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" - ] + "children": ["html#sliderPrateleira"] }, "product-summary-image": { @@ -343,6 +395,25 @@ } }, + "html#sliderPrateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "Prateleira" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] + }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products"] + }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ab2cb17..487946c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,6 +10,12 @@ :global(.vtex-store-components-3-x-container) { padding: 0 40px; } +@media (max-width: 1024px) { + :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + } +} :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 03890a2..85e9db3 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -36,7 +36,6 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - order: 1; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; @@ -47,7 +46,6 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { display: flex; - order: 2; padding: 0; justify-content: center; } @@ -64,19 +62,13 @@ text-align: center; color: #000; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { - display: flex; - order: 3; - padding: 0; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { display: flex; justify-content: center; align-items: center; - text-decoration-line: line-through; - gap: 1px; + margin: 0; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -84,11 +76,9 @@ line-height: 19px; text-align: center; color: #bababa; - text-transform: lowercase; - text-decoration: none; padding: 0; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -96,23 +86,14 @@ line-height: 19px; text-align: center; color: #bababa; - text-decoration: none; padding: 0; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { - content: "por"; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; padding: 0; + justify-content: center; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; @@ -121,21 +102,6 @@ text-align: center; color: #000; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { - display: none; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) { - display: none; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) { - display: none; -} -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) { - display: none; -} .sliderLayoutContainer .paginationDotsContainer { align-items: center; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a0989dd..a7c5c0e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -133,6 +133,12 @@ .skuSelectorContainer .skuSelectorInternalBox { border-radius: 50%; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin-left: 0 !important; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4fe41e9..2785ab7 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,8 +1,14 @@ :global(.vtex-store-components-3-x-container) { padding: 0 40px; + :global(.vtex-flex-layout-0-x-flexRowContent) { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + } + :global(.vtex-store-components-3-x-productImageTag) { - // max-height: 664px !important; max-height: none; } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 4efa614..170d7fb 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -30,7 +30,6 @@ padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - order: 1; :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { @@ -46,7 +45,6 @@ } :global(.vtex-product-summary-2-x-nameContainer) { display: flex; - order: 2; padding: 0; justify-content: center; @@ -65,44 +63,13 @@ color: #000; } } - :global(.vtex-product-summary-2-x-priceContainer) { + :global(.vtex-product-price-1-x-listPrice) { display: flex; - order: 3; - padding: 0; + justify-content: center; + align-items: center; + margin: 0; - :global(.vtex-store-components-3-x-listPrice) { - display: flex; - justify-content: center; - align-items: center; - text-decoration-line: line-through; - gap: 1px; - - :global(.vtex-store-components-3-x-listPriceLabel) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - text-transform: lowercase; - text-decoration: none; - padding: 0; - } - :global(.vtex-store-components-3-x-listPriceValue) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - text-decoration: none; - padding: 0; - } - } - :global(.vtex-store-components-3-x-listPrice)::after { - content: 'por'; + :global(.vtex-product-price-1-x-listPriceValue) { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -110,39 +77,43 @@ line-height: 19px; text-align: center; color: #bababa; - } - - :global(.vtex-store-components-3-x-sellingPrice) { padding: 0; - - :global(.vtex-product-summary-2-x-currencyContainer) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - text-align: center; - color: #000; - } - - :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; - } } - - :global(.vtex-store-components-3-x-installmentsPrice) { - display: none; + :global(.vtex-product-price-1-x-currencyContainer) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; } } + // :global(.vtex-product-price-1-x-listPriceValue)::after { + // content: 'por'; + // font-family: 'Open Sans', sans-serif; + // font-style: normal; + // font-weight: 400; + // font-size: 14px; + // line-height: 19px; + // text-align: center; + // color: #bababa; + // } - :global(.vtex-product-summary-2-x-buyButtonContainer) { - display: none; - } - :global(.vtex-product-summary-2-x-description) { - display: none; - } - :global(.vtex-product-summary-2-x-SKUSelectorContainer) { - display: none; + :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; + padding: 0; + justify-content: center; + :global(.vtex-product-price-1-x-sellingPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } } } } @@ -152,7 +123,6 @@ } .paginationDotsContainer { align-items: center; - // bottom: -32px; .paginationDot { width: 10px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c478808..f3172d8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -137,6 +137,10 @@ .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + margin-left: 0 !important; + } .skuSelectorTextContainer { .skuSelectorName, .skuSelectorSelectorImageValue {