AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: calcular frete feito

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-26 22:21:39 -03:00
parent aea8e6e88a
commit fa6a770735
15 changed files with 251 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
react/components/Html/styles.css
View File

@ -8,5 +8,19 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}
[class*="html--quantidadeEBuy"] {
display: flex;
gap: 10px;
}
@media (max-width: 1024px) {
[class*="html--quantidadeEBuy"] {
display: flex;
flex-direction:column;
gap: 10px;
}
}
[class*=""] {
}

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

@ -133,22 +133,41 @@
// "product-gifts",
// "flex-layout.row#buy-button",
// "availability-subscriber"
"rich-text#titleCep",
"shipping-simulator"
// "share#default"
]
},
"shipping-simulator":{
"props":{
"blockClass":"divCep"
// "placeholder": "Digite seu CEP"
}
},
"rich-text#titleCep": {
"props": {
"blockClass": "titleCep",
"text": "CALCULAR FRETE:"
}
},
"html#quantidadeEButtonCustom":{
"props": {
"blockClass": "quantidadeEBuy"
},
"children": ["product-quantity","flex-layout.row#buy-button"]
},
"product-quantity":{
"props":{
"blockClass":"divQuantidade",
"size":"regular"
}
},
"product-installments#custom":{
"props":{
"blockClass":"divParcelamente",
"markers": ["discount"],
"message": " {installmentsNumber}x de {installmentValue} <discount> sem juros </discount> ",
"message": " {installmentsNumber}<discount>x</discount> de {installmentValue} <discount> sem juros </discount> ",
"installmentsCriteria":"max-quantity-without-interest"
}
},
@ -177,6 +196,7 @@
"flex-layout.row#buy-button": {
"props": {
"blockClass":"divButtonBuy",
"marginTop": 4,
"marginBottom": 7
},

21
styles/css/vtex.add-to-cart-button.css Normal file
View File

@ -0,0 +1,21 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.buttonDataContainer {
font-size: 0;
}
.buttonDataContainer .buttonText::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}

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

@ -70,3 +70,11 @@
margin-right: 0px;
}
}
.flexRow--divButtonBuy {
text-align: center;
width: 100%;
}
.flexRow--divButtonBuy :global(.vtex-button) {
background-color: black;
}

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

@ -27,6 +27,9 @@
.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
.installments--divParcelamente .installments-discount--divParcelamente {
font-weight: 700;
}
.installments--divParcelamente .currencyContainer--divParcelamente {
font-weight: 700;
}

12
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,12 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}

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

@ -36,3 +36,12 @@
font-size: 20px;
}
}
.wrapper--titleCep {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -222,3 +222,62 @@
border-radius: 50%;
transform: rotate(-90deg);
}
.shippingContainer {
display: flex;
position: relative;
width: 409px;
height: 49px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0%;
margin: 0%;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
width: 280px;
height: 49px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
display: none;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: 1px solid #cccccc;
border-radius: 0px;
height: 49px;
border-right: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
position: absolute;
right: -57px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
.shippingContainer :global(.vtex-button) {
font-size: 0;
background: black;
width: 49px;
height: 49px;
border: 0;
border-radius: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
padding: 0;
}

12
styles/sass/pages/product/vtex.add-to-cart-button.scss Normal file
View File

@ -0,0 +1,12 @@
.buttonDataContainer {
font-size: 0;
.buttonText::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
// color: #ffffff;
}
}

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

@ -56,3 +56,10 @@
}
}
.flexRow--divButtonBuy{
text-align: center;
width: 100%;
:global(.vtex-button){
background-color: black;
}
}

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

@ -17,6 +17,9 @@
.installmentsNumber--divParcelamente{
font-weight: 700;
}
.installments-discount--divParcelamente{
font-weight: 700;
}
.currencyContainer--divParcelamente{
font-weight: 700;
}

13
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,13 @@
.quantitySelectorContainer{
// width: 128px;
// height: 49px;
.quantitySelectorTitle{
display: none;
}
// .quantitySelectorStepper{
// width: 100%;
// .vtex-numeric-stepper-container{
// width: 100%;
// }
// }
}

8
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -21,3 +21,11 @@
}
}
}
.wrapper--titleCep {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -203,3 +203,62 @@
transform: rotate(-90deg);
}
}
.shippingContainer {
display: flex;
position: relative;
width: 409px;
height: 49px;
:global(.vtex-address-form__postalCode) {
display: flex;
padding: 0%;
margin: 0%;
:global(.vtex-input) {
width: 280px;
height: 49px;
:global(.vtex-input__label) {
display: none;
}
:global(.vtex-input-prefix__group) {
border: 1px solid #cccccc;
border-radius: 0px;
height: 49px;
border-right: 0;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
position: absolute;
right: -57px;
:global(.vtex__icon-external-link) {
display: none;
}
}
}
:global(.vtex-button) {
font-size: 0;
background: black;
width: 49px;
height: 49px;
border: 0;
border-radius: 0;
:global(.vtex-button__label)::after {
content: "Ok";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
padding: 0;
}
}
}