Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(cep):cep finalizado

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-10 03:17:24 -03:00
parent fa96c824f4
commit f124af7627
7 changed files with 154 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/CEP.tsx Normal file
View File

@ -0,0 +1,3 @@
import CEP from "./components/ProductContext/cep";
export default CEP;

3
react/components/ProductContext/Pix.tsx
View File

@ -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 (
<div className='pix_wrapper'>
<img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />

54
react/components/ProductContext/cep.tsx Normal file
View File

@ -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;

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

@ -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",

3
store/interfaces.json
View File

@ -8,6 +8,9 @@
"Placeholder": {
"component": "Placeholder"
},
"CEP": {
"component": "CEP"
},
"html": {
"component": "html",

41
styles/css/vtex.store-components.css
View File

@ -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;
}

48
styles/sass/pages/product/vtex.store-components.scss
View File

@ -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;
}
}
}
}