SauloKleinNery/challenge-vtex-io-saulo-klein
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:Adiciona o placeholder do input do cep do cálculo do frete

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-08 21:28:55 -03:00
parent c0c60944cd
commit 90bdc0fa7f
13 changed files with 263 additions and 20 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/Placeholder/Placeholder";
export default Placeholder;

34
react/components/Placeholder/Placeholder.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import { useEffect } from "react";
const Placeholder = () => {
async function QuerySelect(selector: string) {
return new Promise<HTMLInputElement>((resolve) => {
const getElement = () => {
const element = document.querySelector<HTMLInputElement>(selector);
if (element) {
resolve(element);
} else {
requestAnimationFrame(getElement);
}
};
getElement();
});
}
async function changePlaceholder() {
const cep = await QuerySelect(
"form[class*=vtex-address-form__postalCode] input"
);
cep?.setAttribute("placeholder", "Digite seu CEP");
}
useEffect(() => {
changePlaceholder();
}, []);
return <></>;
};
export default Placeholder;

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

@ -116,6 +116,7 @@
"flex-layout.col#right-col": {
"props": {
"blockClass": "rightCol",
"preventVerticalStretch": true,
"rowGap": 0
},
@ -134,7 +135,8 @@
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator"
"shipping-simulator",
"placeholder-component"
//"share#default"
]
},
@ -179,10 +181,7 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
"blockClass": "productPanel"
},
"children": [
"flex-layout.col#stack",
@ -197,9 +196,9 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#availability",
"sku-selector",
"flex-layout.row#availability"
"product-identifier.product"
]
},
"flex-layout.row#availability": {

3
store/interfaces.json
View File

@ -5,6 +5,9 @@
"pix-component": {
"component": "Pix"
},
"placeholder-component": {
"component": "Placeholder"
},
"html": {
"component": "html",
"composition": "children"

4
styles/css/vtex.flex-layout.css
View File

@ -8,10 +8,12 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.flexRow .flexCol--info-availability, .flexRow .flexCol--rightCol {
position: relative;
}
.flexRow .flexRowContent--productPanel {
margin: 16px 0;
padding: 0 40px;
position: relative;
}
.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child {
padding: 0;

6
styles/css/vtex.product-identifier.css
View File

@ -8,15 +8,15 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.product-identifier {
.product-identifier--productReference {
position: absolute;
top: 42px;
right: 40px;
right: 0;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.4784313725);
}
.product-identifier__label, .product-identifier__separator {
.product-identifier--productReference__label, .product-identifier--productReference__separator {
display: none;
}

1
styles/css/vtex.product-price.css
View File

@ -9,6 +9,7 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.sellingPrice--hasListPrice {
margin: 51px 0 0;
font-weight: 700;
font-size: 25px;
line-height: 38px;

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -33,6 +34,7 @@
max-width: 90px;
min-height: 90px;
object-fit: fill;
border-radius: 8px;
}
.container .productImageTag--main {
object-fit: fill !important;
@ -41,7 +43,6 @@
}
.container .productNameContainer {
text-align: right;
margin: 0 0 51px;
}
.container .productNameContainer .productBrand--quickview {
font-weight: 300;
@ -88,6 +89,10 @@
justify-content: center;
border: 1px solid #989898;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
border-radius: 50%;
background-image: linear-gradient(to top left, transparent 44%, #d5d5d5, transparent 52%);
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
@ -107,6 +112,74 @@
.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorOptionsList {
margin: 0;
}
.container .subscriberContainer {
margin: 43px 0 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-title)::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel)::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) {
margin: 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 15px;
margin: 16px 0 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) {
margin: 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) :global(.vtex-input) :global(.vtex-input-prefix__group) {
padding: 12px 14px;
border: 1px solid #989898;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 0;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) {
margin: 0;
grid-area: 2/1/2/3;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
padding: 12px 0;
width: 100%;
border: none;
background: #000;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::before {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}
.container .shippingContainer {
display: flex;
position: relative;
@ -152,8 +225,21 @@
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__suffix) {
display: none;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input)::placeholder {
content: "Digite seu cep";
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
display: none;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) {
padding: 16px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input):focus::before {
display: none;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input)::before {
content: "asdasd";
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;

8
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -1,8 +1,14 @@
.flexRow {
.flexCol {
&--info-availability,
&--rightCol {
position: relative;
}
}
.flexRowContent--productPanel {
margin: 16px 0;
padding: 0 40px;
position: relative;
.stretchChildrenWidth:first-child {
padding: 0;

4
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,7 +1,7 @@
.product-identifier {
.product-identifier--productReference {
position: absolute;
top: 42px;
right: 40px;
right: 0;
font-weight: 400;
font-size: 14px;
line-height: 19px;

1
styles/sass/pages/product/vtex.product-price.scss
View File

@ -1,4 +1,5 @@
.sellingPrice--hasListPrice {
margin: 51px 0 0;
font-weight: 700;
font-size: 25px;
line-height: 38px;

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

@ -26,6 +26,7 @@
max-width: 90px;
min-height: 90px;
object-fit: fill;
border-radius: 8px;
}
}
@ -37,7 +38,6 @@
.productNameContainer {
text-align: right;
margin: 0 0 51px;
.productBrand--quickview {
font-weight: 300;
@ -87,6 +87,16 @@
align-items: center;
justify-content: center;
border: 1px solid $color-gray9;
.diagonalCross {
border-radius: 50%;
background-image: linear-gradient(
to top left,
transparent 44%,
$color-gray11,
transparent 52%
);
}
}
&--selected .skuSelectorInternalBox {
@ -120,6 +130,88 @@
}
}
.subscriberContainer {
margin: 43px 0 0;
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
&::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
:global(.vtex-store-components-3-x-form) {
margin: 0;
:global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 15px;
margin: 16px 0 0;
:global(.vtex-store-components-3-x-input) {
margin: 0;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
padding: 12px 14px;
border: 1px solid $color-gray9;
:global(.vtex-styleguide-9-x-input) {
padding: 0;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray9;
}
}
}
}
:global(.vtex-store-components-3-x-submit) {
margin: 0;
grid-area: 2 / 1 / 2 / 3;
:global(.vtex-button) {
padding: 12px 0;
width: 100%;
border: none;
background: $color-black2;
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
}
}
}
}
.shippingContainer {
display: flex;
position: relative;
@ -173,11 +265,25 @@
:global(.vtex-input__suffix) {
display: none;
}
:global(.vtex-input__error) {
display: none;
}
}
:global(.vtex-address-form-4-x-input) {
&::placeholder {
content: "Digite seu cep";
padding: 16px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray10;
&:focus::before {
display: none;
}
&::before {
content: "asdasd";
}
}

2
styles/sass/utils/_vars.scss
View File

@ -16,6 +16,8 @@ $color-gray7: #575757;
$color-gray8: #9292927a;
$color-gray9: #989898;
$color-gray10: #afafaf;
$color-gray11: #d5d5d5;
$color-gray12: #868686;
$color-blue: #4267b2;