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 fechado estilizado

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-09 19:10:19 -03:00
parent a5fb8f9811
commit e1139a5185
8 changed files with 184 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Placeholder.tsx Normal file
View File

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

16
react/components/Html/styles.css
View File

@ -55,7 +55,7 @@
margin-top: 16px;
}
.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
display: block;
display: none;
}
.html--buy-button :global(.vtex-button){
display: block;
@ -193,3 +193,17 @@
padding-left: 0px;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) a{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
:global(.vtex-address-form__postalCode-forgottenURL) a span{
display: none;
}

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

@ -1,14 +1,8 @@
import React, { useRef, useEffect } from 'react';
import React from 'react';
import { useProduct } from 'vtex.product-context';
const Pix: React.FC = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (buttonRef.current) {
buttonRef.current.innerHTML = 'Novo texto';
buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
}
}, []);
const Pix = () => {
const { product } = useProduct()
let pixprice = product?.priceRange.sellingPrice.lowPrice

13
react/components/ProductContext/Placeholder.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
const Placeholder = () => {
if (typeof document !== "undefined") {
const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
Placeholder?.setAttribute("Placeholder","Digite seu CEP")
}
return(
<>
</>
)
}
export default Placeholder;

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

@ -1,6 +1,7 @@
{
"store.product": {
"children": [
"html#Placeholder",
"html#breadcrumb",
"condition-layout.product#availability",
"html#departaments",
@ -14,6 +15,9 @@
},
"children": ["Pix"]
},
"html#Placeholder":{
"children": ["Placeholder"]
},
"tab-layout#pdp": {
"children": [
"tab-list#pdp",

3
store/interfaces.json
View File

@ -5,6 +5,9 @@
"Pix": {
"component": "Pix"
},
"Placeholder": {
"component": "Placeholder"
},
"html": {
"component": "html",

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

@ -294,4 +294,76 @@
line-height: 28px;
padding: 14px 14px 16px;
color: #989898;
}
.shippingContainer {
display: grid;
grid-template-columns: 1fr auto 1fr;
position: relative;
align-items: end;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: grid;
grid-column: 1/2;
padding: 0;
}
.shippingContainer :global(.vtex-button) {
display: block;
grid-column: 2/3;
background: #000000;
width: max-content;
height: max-content;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
padding: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "ok";
padding: 14px;
min-height: 21px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
}
.shippingContainer :global(.vtex-input) {
grid-column: 1/2;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: 1px solid #CCCCCC;
height: max-content;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
color: #AFAFAF;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 16.5px 16px;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
grid-column: 3/4;
right: 0;
bottom: 25%;
left: 0;
margin-left: 32px;
}

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

@ -268,5 +268,76 @@
color: #989898;
}
}
.shippingContainer{
display: grid;
grid-template-columns: 1fr auto 1fr;
position: relative;
align-items: end;
:global(.vtex-address-form__postalCode ){
display: grid;
grid-column: 1 / 2;
padding: 0;
}
:global(.vtex-button){
display: block;
grid-column: 2 / 3;
background: #000000;
width: max-content;
height: max-content;
:global(.vtex-button__label){
font-size: 0;
padding: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
&::after{
content: "ok";
padding: 14px;
min-height: 21px;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
}
}
}
:global(.vtex-input){
grid-column: 1 / 2;
:global(.vtex-input-prefix__group){
border: 1px solid #CCCCCC;
height: max-content;
:global(.vtex-address-form-4-x-input){
color: #AFAFAF;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 16.5px 16px;
}
}
:global(.vtex-input__label){
font-size: 0;
&::after{
content: "CALCULAR FRETE:";
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL){
position: absolute;
grid-column: 3 / 4;
right: 0;
bottom: 25%;
left: 0;
margin-left: 32px;
}
}