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

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
Conversation 0 Commits 1 Files Changed 16 +74 -31
16 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/SetPlaceholder.ts Normal file
View File

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

5
react/components/Pix/Pix.tsx
View File

@ -3,11 +3,6 @@ import { useProduct } from "vtex.product-context";
import styles from "./Pix.module.css";
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 discount = (Number(price) * 10) / 100;
const priceWithDiscount = Number(price) - Number(discount);

16
react/components/SetPlaceholder/SetPlaceholder.tsx Normal file
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;

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

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

3
store/interfaces.json
View File

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

11
styles/css/vtex.breadcrumb.css
View File

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

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

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

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

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

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

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

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

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

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

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

1
styles/css/vtex.rich-text.css
View File

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

1
styles/css/vtex.slider-layout.css
View File

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

24
styles/css/vtex.tab-layout.css
View File

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

10
styles/sass/pages/product/vtex.breadcrumb.scss
View File

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

23
styles/sass/pages/product/vtex.tab-layout.scss
View File

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