feat: adiciona o placeholder

This commit is contained in:
Leonardo Pereira Rocha 2023-02-08 16:26:33 -03:00
parent 973a3b5564
commit 741b36d69d
6 changed files with 77 additions and 9 deletions

View File

@ -414,6 +414,7 @@
text-align: center; text-align: center;
text-decoration-line: line-through; text-decoration-line: line-through;
} }
[class*="vtex-slider-layout-0-x-slide--shelf "] [class*="vtex-slider-layout-0-x-slide--shelf "]
:global(.vtex-store-components-3-x-installmentsPrice) { :global(.vtex-store-components-3-x-installmentsPrice) {
font-size: 0; font-size: 0;
@ -439,3 +440,43 @@
text-align: center; text-align: center;
color: #575757; color: #575757;
} }
[class*="subscriberContainer"] :global(.vtex-store-components-3-x-title) {
font-size: 0;
}
[class*="subscriberContainer"]
:global(.vtex-store-components-3-x-title)::after {
content: "Produto Indisponível";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
display: flex;
align-items: center;
font-weight: bold;
color: #868686;
}
[class*="subscriberContainer"]
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
}
[class*="subscriberContainer"]
:global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
[class*="container--home"] {
width: 94.44%;
margin-right: auto;
margin-left: auto;
}

View File

@ -1,10 +1,20 @@
import React from "react"; import React, { useEffect } from "react";
import { useProduct } from "vtex.product-context"; import { useProduct } from "vtex.product-context";
import styles from './styles.css' import styles from "./styles.css";
const ProductContext = () => { const ProductContext = () => {
useEffect(() => {
const intervalId = setInterval(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
if (cepInput) {
cepInput.setAttribute("placeholder", "Digite seu CEP");
console.log(cepInput);
clearInterval(intervalId);
}
}, 50);
}, []);
const productContextValue = useProduct(); const productContextValue = useProduct();
console.log(productContextValue);
return ( return (
<div className={styles.pixWrapper}> <div className={styles.pixWrapper}>
@ -15,7 +25,9 @@ const ProductContext = () => {
/> />
</div> </div>
<div className={styles.textBox}> <div className={styles.textBox}>
<p className={styles.textPrice}>{productContextValue?.product?.priceRange?.sellingPrice?.highPrice}</p> <p className={styles.textPrice}>
{productContextValue?.product?.priceRange?.sellingPrice?.highPrice}
</p>
<p className={styles.textDescount}>10 % de desconto</p> <p className={styles.textDescount}>10 % de desconto</p>
</div> </div>
</div> </div>

View File

@ -127,14 +127,13 @@
}, },
"product-images": { "product-images": {
"props": { "props": {
"width": "40%",
"contentType": "images", "contentType": "images",
"showNavigationArrows": false, "showNavigationArrows": false,
"showPaginationDots": false, "showPaginationDots": false,
"thumbnailsOrientation": "horizontal", "thumbnailsOrientation": "horizontal",
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "auto",
"phone": "16:9" "phone": "auto"
}, },
"displayThumbnailsArrows": true "displayThumbnailsArrows": true
} }
@ -154,7 +153,6 @@
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"width": "60%",
"preventVerticalStretch": true, "preventVerticalStretch": true,
"rowGap": 0 "rowGap": 0
}, },

View File

@ -0,0 +1,11 @@
@media screen and (max-width: 1024px) {
.flexRowContent {
display: flex;
flex-direction: column;
}
}
.flexRowContent {
margin-right: 40px;
margin-left: 40px;
}

View File

@ -3,6 +3,13 @@
padding: 0 0.5rem; padding: 0 0.5rem;
} }
@media screen and (max-width: 1024px) {
.flexRowContent {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 40em) { @media screen and (min-width: 40em) {
.flexRowContent--menu-link, .flexRowContent--menu-link,
.flexRowContent--main-header { .flexRowContent--main-header {

View File

@ -11,7 +11,6 @@
text-align: right; text-align: right;
position: absolute; position: absolute;
right: 0; right: 0;
margin-right: 40px;
} }
.product-identifier--productReference { .product-identifier--productReference {