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 (
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;
+ }
+ }
+ }
+}