refactor(pdp): Separa componente placeholder e remove paddings default #4

Merged
cainamilech merged 1 commits from feature/product-page into master 2023-02-08 20:38:47 +00:00
16 changed files with 74 additions and 31 deletions

3
react/SetPlaceholder.ts Normal file
View File

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

View File

@ -3,11 +3,6 @@ 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);

View File

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

View File

@ -162,7 +162,8 @@
"html#skus", "html#skus",
"html#qtd-btn", "html#qtd-btn",
"availability-subscriber", "availability-subscriber",
"html#shipping-simulator" "html#shipping-simulator",
"SetPlaceholder"
] ]
}, },

View File

@ -8,5 +8,8 @@
}, },
"Pix": { "Pix": {
"component": "Pix" "component": "Pix"
},
"SetPlaceholder": {
"component": "SetPlaceholder"
} }
} }

View File

@ -6,10 +6,11 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.container--breadcrumb { .container--breadcrumb {
margin-left: 40px; padding: 0;
margin-right: 40px; margin: 16px 40px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -30,6 +31,7 @@
} }
.container--breadcrumb .homeLink--breadcrumb { .container--breadcrumb .homeLink--breadcrumb {
vertical-align: top; vertical-align: top;
padding: 0;
padding-left: 0; padding-left: 0;
} }
.container--breadcrumb .homeLink--breadcrumb::after { .container--breadcrumb .homeLink--breadcrumb::after {
@ -42,6 +44,9 @@
} }
.container--breadcrumb .link--breadcrumb--1 { .container--breadcrumb .link--breadcrumb--1 {
padding-right: 0; padding-right: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
font-size: 0; font-size: 0;
color: #929292; color: #929292;
} }
@ -57,6 +62,8 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: #929292;
padding-top: 0;
padding-bottom: 0;
} }
.container--breadcrumb .termArrow--breadcrumb, .container--breadcrumb .termArrow--breadcrumb,
.container--breadcrumb .term--breadcrumb { .container--breadcrumb .term--breadcrumb {

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
/*NOME PRODUTO*/ /*NOME PRODUTO*/
.flexRowContent--name { .flexRowContent--name {

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.product-identifier--productReference .product-identifier__label { .product-identifier--productReference .product-identifier__label {
display: none; display: none;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.installments--parcelamentos { .installments--parcelamentos {
font-style: normal; font-style: normal;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.quantitySelectorStepper { .quantitySelectorStepper {
display: flex; display: flex;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.nameContainer { .nameContainer {
text-align: center; text-align: center;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.container--title-prateleira { .container--title-prateleira {
margin-top: 16px; margin-top: 16px;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.sliderLayoutContainer--prateleira { .sliderLayoutContainer--prateleira {
padding-left: 40px; padding-left: 40px;

View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.container--details { .container--details {
padding-left: 40px; padding-left: 40px;
@ -28,8 +29,7 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.listContainer { .listContainer {
margin-top: 16px; margin-top: 16px;
padding-bottom: 8px; padding-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;
border-top: 1px solid #b9b9b9; border-top: 1px solid #b9b9b9;
flex-direction: column; flex-direction: column;
@ -40,19 +40,27 @@
.listItem { .listItem {
background-color: transparent; background-color: transparent;
padding: 0 14px 0 14px; padding: 0 16px 0 16px;
margin: 0; margin: 0;
height: 42px; height: 38px;
width: 114px;
}
@media screen and (min-width: 1921px) {
.listItem {
width: 142px;
}
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.listItem { .listItem {
margin: 5px 0; margin-top: 16px;
padding: 0; padding: 0;
width: unset;
} }
} }
.listItem :global(.vtex-button) { .listItem :global(.vtex-button) {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
border: none;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.listItem :global(.vtex-button) { .listItem :global(.vtex-button) {
@ -60,10 +68,6 @@
display: flex; display: flex;
} }
} }
.listItem :global(.vtex-button) {
background-color: transparent;
border: none;
}
.listItem :global(.vtex-button__label) { .listItem :global(.vtex-button__label) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -71,7 +75,7 @@
color: #bfbfbf; color: #bfbfbf;
text-transform: capitalize; text-transform: capitalize;
margin: 0; margin: 0;
padding: 0; padding: 0 !important;
} }
@media screen and (min-width: 1921px) { @media screen and (min-width: 1921px) {
.listItem :global(.vtex-button__label) { .listItem :global(.vtex-button__label) {

View File

@ -1,6 +1,6 @@
.container--breadcrumb { .container--breadcrumb {
margin-left: 40px; padding: 0;
margin-right: 40px; margin: 16px 40px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@ -20,6 +20,7 @@
.homeLink--breadcrumb { .homeLink--breadcrumb {
vertical-align: top; vertical-align: top;
padding: 0;
padding-left: 0; padding-left: 0;
&::after { &::after {
content: "Home"; content: "Home";
@ -33,6 +34,9 @@
.link--breadcrumb--1 { .link--breadcrumb--1 {
padding-right: 0; padding-right: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
font-size: 0; font-size: 0;
color: $color-gray6; color: $color-gray6;
@ -50,6 +54,8 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-gray6; color: $color-gray6;
padding-top: 0;
padding-bottom: 0;
} }
.termArrow--breadcrumb, .termArrow--breadcrumb,

View File

@ -16,8 +16,7 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
margin-top: 16px; margin-top: 16px;
padding-bottom: 8px; padding-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid $color-gray12; border-bottom: 1px solid $color-gray12;
border-top: 1px solid $color-gray12; border-top: 1px solid $color-gray12;
flex-direction: column; flex-direction: column;
@ -28,28 +27,30 @@
.listItem { .listItem {
background-color: transparent; background-color: transparent;
padding: 0 14px 0 14px; padding: 0 16px 0 16px;
margin: 0; margin: 0;
height: 42px; height: 38px;
width: 114px;
@media screen and (min-width: 1921px) {
width: 142px;
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
margin: 5px 0; margin-top: 16px;
padding: 0; padding: 0;
width: unset;
} }
:global(.vtex-button) { :global(.vtex-button) {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
border: none;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
width: 100%; width: 100%;
display: flex; display: flex;
} }
} }
:global(.vtex-button) {
background-color: transparent;
border: none;
}
:global(.vtex-button__label) { :global(.vtex-button__label) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -57,7 +58,7 @@
color: $color-gray9; color: $color-gray9;
text-transform: capitalize; text-transform: capitalize;
margin: 0; margin: 0;
padding: 0; padding: 0 !important;
@media screen and (min-width: 1921px) { @media screen and (min-width: 1921px) {
font-size: 24px; font-size: 24px;
} }