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

feat(pdp): Adiciona bloco de frete

Browse Source
This commit is contained in:
Cainã Milech 2023-01-22 20:02:29 -03:00
parent 21b382f909
commit 8206b0932e
5 changed files with 195 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,8 +123,8 @@
/*"flex-layout.row#buy-button",*/
"html#qtd-btn",
"availability-subscriber",
"shipping-simulator",
"share#default"
"shipping-simulator"
/*"share#default"*/
]
},
@ -216,5 +216,11 @@
"Pinterest": true
}
}
},
"shipping-simulator": {
"props": {
"blockClass": "frete"
}
}
}

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

@ -22,11 +22,13 @@
border-right: none;
height: 50px;
}*/
/*.hideDecorators {
.hideDecorators {
border: 1px solid red;
border-left: none;
border-right: none;
}*/
height: 49px;
}
/*.numeric-stepper__plus-button {
border: none;
height: 50px;
@ -41,7 +43,6 @@
}
*/
.quantitySelectorContainer--quantidade {
border: 1px solid green;
margin-right: 5px;
padding: 0;
height: 100%;
@ -53,3 +54,30 @@
border: 1px solid orange;
height: 49px;
}*/
:global(.vtex-numeric-stepper__input) {
height: 49px;
width: 30px;
border-right: 0;
border-left: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-numeric-stepper__plus-button) {
height: 49px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}
:global(.vtex-numeric-stepper__minus-button) {
background-color: transparent;
height: 49px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}

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

@ -65,3 +65,60 @@
line-height: 19px;
color: #000000;
}
.shippingContainer {
border: 1px solid red;
display: flex;
align-items: end;
margin-top: 16px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
position: relative;
padding: 0;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
border-radius: 0%;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
/*background-color: red;*/
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
top: 28px;
right: -180px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
border: none;
border-radius: inherit;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}

33
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -14,11 +14,12 @@
height: 50px;
}*/
/*.hideDecorators {
.hideDecorators {
border: 1px solid red;
border-left: none;
border-right: none;
}*/
height: 49px;
}
/*.numeric-stepper__plus-button {
border: none;
@ -36,7 +37,6 @@
}
*/
.quantitySelectorContainer--quantidade {
border: 1px solid green;
margin-right: 5px;
padding: 0;
height: 100%;
@ -48,3 +48,30 @@
border: 1px solid orange;
height: 49px;
}*/
:global(.vtex-numeric-stepper__input) {
height: 49px;
width: 30px;
border-right: 0;
border-left: 0;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
:global(.vtex-numeric-stepper__plus-button) {
height: 49px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}
:global(.vtex-numeric-stepper__minus-button) {
background-color: transparent;
height: 49px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}

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

@ -60,3 +60,71 @@
color: #000000;
}
}
//FRETE
.shippingContainer {
border: 1px solid red;
display: flex;
align-items: end;
margin-top: 16px;
:global(.vtex-address-form__postalCode) {
position: relative;
padding: 0;
}
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
:global(.vtex-input-prefix__group) {
height: 49px;
border-radius: 0%;
}
:global(.vtex-address-form-4-x-input) {
/*background-color: red;*/
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
top: 28px;
right: -180px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
border: none;
border-radius: inherit;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
}
}