diff --git a/react/CEP.tsx b/react/CEP.tsx new file mode 100644 index 0000000..fe88985 --- /dev/null +++ b/react/CEP.tsx @@ -0,0 +1,3 @@ +import CEP from "./components/ProductContext/cep"; + +export default CEP; diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index b43d1b7..d26a5ca 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useProduct } from 'vtex.product-context'; const Pix = () => { - + const { product } = useProduct() let pixprice = product?.priceRange.sellingPrice.lowPrice @@ -13,7 +13,6 @@ const Pix = () => { minimumFractionDigits: 2, maximumFractionDigits: 2, }); - console.log('productContex',product) return (
Logo do Pix diff --git a/react/components/ProductContext/cep.tsx b/react/components/ProductContext/cep.tsx new file mode 100644 index 0000000..9180ec9 --- /dev/null +++ b/react/components/ProductContext/cep.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +const CEP = () => { + function handleButtonClick(){ + setTimeout(() => { + if (typeof document !== "undefined"){ + const tr = document.querySelector('.vtex-store-components-3-x-shippingTableRow'); + const trRow = document.querySelectorAll('.vtex-store-components-3-x-shippingTableBody .vtex-store-components-3-x-shippingTableRow '); + const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate'); + const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate'); + const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice'); + + console.log(trRow) + console.log(tdEstimate) + if(tdEstimate){ + tdEstimate.forEach((row) => { + if(row.parentNode){ + row.parentNode.removeChild(row); + } + }); + + trRow.forEach((row, index) => { + const td = tdEstimate[index]; + row.appendChild(td); + }); + } + if(tr){ + if(thEstimate){ + thEstimate.textContent = "PRAZO"; + tr.removeChild(thEstimate); + tr.appendChild(thEstimate); + } + if(thPrice){ + thPrice.textContent = "FRETE"; + tr.removeChild(thPrice); + tr.insertBefore(thPrice,thEstimate); + } + } + } + }, 1000); + } + if (typeof document !== "undefined") { + const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button"); + console.log(btnCep) + if (btnCep) { + btnCep.addEventListener('click', handleButtonClick); + } + } + return( + <> + + ) +} +export default CEP; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f9ed6df..816e7b7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,6 +3,7 @@ "children": [ "html#Placeholder", "html#breadcrumb", + "html#CEP", "condition-layout.product#availability", "html#departaments", "flex-layout.row#specifications-title", @@ -18,6 +19,9 @@ "html#Placeholder":{ "children": ["Placeholder"] }, + "html#CEP":{ + "children": ["CEP"] + }, "tab-layout#pdp": { "children": [ "tab-list#pdp", diff --git a/store/interfaces.json b/store/interfaces.json index fd3c688..0384170 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,6 +8,9 @@ "Placeholder": { "component": "Placeholder" }, + "CEP": { + "component": "CEP" + }, "html": { "component": "html", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b9a9ba5..eed5941 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -424,4 +424,45 @@ left: auto; bottom: 0; } +} + +.shippingTable { + border: 0; + width: max-content; +} +.shippingTable .shippingTableHead { + display: table-row-group; + vertical-align: middle; + text-align: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow { + width: 100%; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + padding-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell, .shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel, .shippingTable .shippingTableBody .shippingTableRow .currencyContainer { + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + text-align: start; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 270a411..71fd205 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -385,5 +385,53 @@ } } } +.shippingTable{ + border: 0; + width: max-content; + .shippingTableHead{ + display: table-row-group; + vertical-align: middle; + text-align: center; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + .shippingTableRow{ + width: 100%; + .shippingTableHeadDeliveryName,.shippingTableHeadDeliveryEstimate,.shippingTableHeadDeliveryPrice{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + padding-bottom: 15px; + } + } + } + .shippingTableBody{ + .shippingTableRow{ + .shippingTableCell{ + padding-bottom: 15px; + } + .shippingTableCellDeliveryName{ + .shippingTableLabel{ + .shippingTableRadioBtn{ + display: none; + } + } + } + .shippingTableCell,.shippingTableLabel,.currencyContainer{ + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + text-align: start; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + } + } + } +}