feat(pdp): Adiciona placeholder cep

This commit is contained in:
Cainã Milech 2023-01-29 23:09:01 -03:00
parent c6d34bfff4
commit 42784946d0
9 changed files with 94 additions and 18 deletions

View File

@ -13,7 +13,7 @@
} }
[class*="html--image-container"] { [class*="html--image-container"] {
width: 50.18%; width: 49.82%;
} }
[class*="html--qtd-btn"] { [class*="html--qtd-btn"] {

View File

@ -1,3 +1,27 @@
.containerPix { .containerPix {
background-color: red; display: flex;
gap: 26px;
align-items: center;
margin-top: 8px;
}
.image {
width: 66px;
height: 24px;
}
.price {
margin: 0;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.discount {
margin: 0;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
} }

View File

@ -3,18 +3,26 @@ import { useProduct } from "vtex.product-context";
import styles from "./Pix.module.css"; import styles from "./Pix.module.css";
const Pix = () => { const Pix = () => {
if (typeof document !== undefined) {
const input = document.querySelector(".vtex-address-form-4-x-input");
input?.setAttribute("placeholder", "Digite seu CEP");
}
const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice; const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice;
const discount = (Number(price) * 10) / 100; const discount = (Number(price) * 10) / 100;
const priceWithDiscount = Number(price) - Number(discount); const priceWithDiscount = Number(price) - Number(discount);
return ( return (
<div className={styles.containerPix}> <div className={styles.containerPix}>
<img <img
className={styles.image}
src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png" src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png"
alt="Imagem do pix" alt="Imagem do pix"
/> />
<div> <div className={styles.texts}>
<p>R$ {priceWithDiscount.toFixed(2)}</p> <p className={styles.price}>
<p>10 % de desconto</p> R$ {priceWithDiscount.toFixed(2).replace(".", ",")}
</p>
<p className={styles.discount}>10 % de desconto</p>
</div> </div>
</div> </div>
); );

View File

@ -45,7 +45,7 @@
"phone": 1 "phone": 1
}, },
"infinite": true, "infinite": true,
"fullWidth": false, /*"fullWidth": false,*/
"blockClass": "prateleira" "blockClass": "prateleira"
} }
}, },

View File

@ -1,12 +0,0 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.html--pdp-breadcrumb {
border: 1px solid red;
}

View File

@ -7,6 +7,15 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.sliderLayoutContainer--prateleira {
padding-left: 40px;
padding-right: 40px;
justify-content: center;
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.1773%;
}
.paginationDotsContainer--prateleira { .paginationDotsContainer--prateleira {
align-items: center; align-items: center;
} }
@ -30,4 +39,14 @@
.sliderArrows--prateleira { .sliderArrows--prateleira {
margin: 14px; margin: 14px;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
} }

View File

@ -195,6 +195,12 @@
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) { .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) {
width: 231px; width: 231px;
} }
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute; position: absolute;
top: 28px; top: 28px;

View File

@ -1,3 +1,13 @@
.sliderLayoutContainer--prateleira {
padding-left: 40px;
padding-right: 40px;
justify-content: center;
.sliderTrackContainer--prateleira {
width: 97.1773%;
}
}
//DOTS //DOTS
.paginationDotsContainer--prateleira { .paginationDotsContainer--prateleira {
@ -27,3 +37,17 @@
.sliderArrows--prateleira { .sliderArrows--prateleira {
margin: 14px; margin: 14px;
} }
.sliderLayoutContainer {
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: unset !important;
}
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
}

View File

@ -217,6 +217,13 @@
:global(.vtex-address-form-4-x-hideDecorators) { :global(.vtex-address-form-4-x-hideDecorators) {
width: 231px; width: 231px;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
} }
} }