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

development #1

Merged
Vitor_soares merged 20 commits from development into master 2023-02-09 17:48:40 +00:00
Conversation 0 Commits 20 Files Changed 49 +327 -15
13 changed files with 327 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fe082e670b - Show all commits

11
react/components/Pix-bloco/Pix.tsx
View File

@ -4,14 +4,15 @@ import { useProduct } from "vtex.product-context";
import styles from "./style.module.css";
const Pix = () => {
useEffect(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
setTimeout(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
cepInput?.setAttribute("placeholder", "Digite seu CEP");
cepInput?.setAttribute("placeholder", "Digite seu CEP");
console.log(cepInput);
});
console.log(cepInput);
}, 1000);
}, []);
const productContextValue = useProduct();

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

@ -291,6 +291,7 @@
"children": [
"product-summary-image",
"product-summary-name",
"product-summary-space",
"product-summary-price"
]
},
@ -391,5 +392,12 @@
"installmentsCriteria": "max-quality-without-interest",
"blockClass": "fees"
}
},
"newsletter": {
"props": {
"label": "Assine nossa newsletter",
"placeholder": "Digite seu e-mail"
}
}
}

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

@ -36,4 +36,10 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
}
@media only screen and (max-width: 1025px) {
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
flex-direction: column;
}
}

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

@ -24,4 +24,9 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
padding-bottom: 24px;
}
@media only screen and (max-width: 1025px) {
.product-identifier__value {
justify-content: unset;
}
}

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

@ -14,6 +14,9 @@
margin-bottom: 64px;
padding: 0 67px;
}
.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
gap: 16px;
}
.imageContainer {
max-width: 314px;
@ -56,4 +59,9 @@
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
padding: 0 0 0 40px;
}
@media only screen and (max-width: 1025px) {
.sliderLeftArrow::before {
display: block;
}
}

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

@ -14,10 +14,14 @@
.container {
padding: 0;
}
@media only screen and (min-width: 1920px) {
.container {
margin: 0 !important;
}
}
.newsletter {
background: #000000;
color: #fff;
.discountInsideContainer {
display: none;
}
:global(.vtex-numeric-stepper__input) {
@ -58,6 +62,11 @@
margin-bottom: 8px;
color: #575757;
}
@media only screen and (max-width: 1025px) {
.productNameContainer {
text-align: unset;
}
}
.productImage .productImageTag {
width: unset !important;
@ -302,6 +311,11 @@
padding-right: 112px;
color: #202020;
}
@media only screen and (min-width: 1920px) {
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
padding-right: 122px;
}
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
display: flex;
order: 3;
@ -348,6 +362,14 @@
display: flex;
order: 3;
}
.shippingTableBody .shippingTableCellDeliveryName,
.shippingTableBody .currencyContainer,
.shippingTableBody .shippingTableCellDeliveryEstimate {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTableBody .shippingTableRadioBtn {
display: none;
}
@ -421,4 +443,100 @@
line-height: 32px;
margin-bottom: 8px;
color: #575757;
}
@media only screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
margin-bottom: 16px;
}
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionTitle {
padding-top: 16px;
}
}
.productDescriptionContainer .productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media only screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}
@media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionText {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 16px;
}
}
.newsletter {
display: flex;
align-items: flex-end;
justify-content: center;
height: 175px;
background: #000000;
color: #fff;
}
.newsletter .container {
display: flex;
justify-content: center;
max-width: unset;
width: 53.75%;
}
.newsletter .container .form {
padding-bottom: 16px;
}
.newsletter .container .form .label {
display: flex;
flex-direction: column;
gap: 16px;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #fff;
}
.newsletter .container .form .label::after {
content: "Receba ofertas e novidades por e-mail";
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.newsletter .input-group {
display: flex;
}
.newsletter .form {
width: 100%;
margin: 0;
}
.newsletter .buttonContainer {
padding: 0;
}
.newsletter :global(.vtex-button) {
border: none;
border-bottom: 3px solid #bfbfbf;
border-radius: 0;
background-color: transparent;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.newsletter :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid #cccccc;
}
.newsletter :global(.vtex-styleguide-9-x-input) {
padding: 0;
background-color: transparent;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}

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

@ -58,4 +58,10 @@
background-color: #fff;
border-bottom: 2px solid #000000;
padding: 0;
}
@media only screen and (max-width: 1025px) {
:global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) {
flex-direction: column;
}
}

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

@ -25,3 +25,9 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px;
}
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
@include mq(md, max) {
flex-direction: column;
}
}

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

@ -16,5 +16,9 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
padding-bottom: 24px;
@include mq(md, max) {
justify-content: unset;
}
}
}

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

@ -1,6 +1,10 @@
.sliderLayoutContainer {
margin-bottom: 64px;
padding: 0 67px;
:global(.vtex-slider-layout-0-x-sliderTrack--carousel) {
gap: 16px;
}
}
.imageContainer {
@ -46,5 +50,9 @@ visibility: hidden;
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png);
padding: 0 0 0 40px;
@include mq(md, max) {
display: block;
}
}
}

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

@ -1,10 +1,13 @@
.container {
padding: 0;
@include mq(xl, min) {
margin: 0 !important;
}
}
.newsletter {
background: $black;
color: $white;
.discountInsideContainer {
display: none;
}
:global(.vtex-numeric-stepper__input) {
@ -50,6 +53,10 @@
margin-bottom: 8px;
color: $gray-100;
@include mq(md, max) {
text-align: unset;
}
}
.productImage {
@ -357,6 +364,10 @@ margin-top: 16px;
padding-right: 112px;
color: $black-100;
@include mq(xl, min) {
padding-right: 122px;
}
}
.shippingTableHeadDeliveryEstimate {
@ -420,6 +431,16 @@ margin-top: 16px;
order: 3;
}
.shippingTableCellDeliveryName,
.currencyContainer,
.shippingTableCellDeliveryEstimate {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-900;
}
.shippingTableRadioBtn {
display: none;
}
@ -516,5 +537,117 @@ margin-top: 16px;
margin-bottom: 8px;
color: $gray-100;
@include mq(xl, min) {
font-size: 32px;
margin-bottom: 16px;
}
@include mq(md, max) {
padding-top: 16px;
}
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray;
@include mq(xl, min) {
font-size: 18px;
line-height: 25px;
}
@include mq(md, max) {
border-bottom: 1px solid $gray-400;
padding-bottom: 16px;
}
}
}
// NEWSLETTER
.newsletter {
display: flex;
align-items: flex-end;
justify-content: center;
height: 175px;
background: $black;
color: $white;
.container {
display: flex;
justify-content: center;
max-width: unset;
width: 53.75%;
// padding-top: 32px;
// margin: 0;
.form {
padding-bottom: 16px;
.label {
display: flex;
flex-direction: column;
gap: 16px;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $white;
&::after {
content: "Receba ofertas e novidades por e-mail";
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $gray;
}
}
}
}
.input-group {
display: flex;
}
.form {
width: 100%;
margin: 0;
}
.buttonContainer {
padding: 0;
}
:global(.vtex-button ) {
border: none;
border-bottom: 3px solid $gray-400;
border-radius: 0;
background-color: transparent;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $white;
}
:global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid $gray-800;
}
:global(.vtex-styleguide-9-x-input) {
padding: 0;
background-color: transparent;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $gray;
}
}

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

@ -59,3 +59,11 @@
}
}
}
:global(.vtex-tab-layout-0-x-contentItem--content-render) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
@include mq(md, max) {
flex-direction: column;
}
}
}

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

@ -16,6 +16,8 @@ $gray-400: #bfbfbf;
$gray-500: #b9b9b9;
$gray-600: #EDEDED;
$gray-700: #bababa;
$gray-800: #cccccc;
$gray-900: #afafaf;
$color-gray: #6c6c6c;
@ -32,10 +34,9 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
mobile: 768px,
md: 1026px,
xl: 1920px
) !default;
$z-index: (