FilipeQuintanilha/m3-academy-template-checkout-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(checkout): Ajusta checkout mobile

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-18 01:01:53 -03:00
parent 79f9b413c2
commit a6adc3e486
7 changed files with 328 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
checkout/src/arquivos/js/components/CheckoutContent.js
View File

@ -19,6 +19,13 @@ export default class Content {
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.div = await waitElement(".vtex-omnishipping-1-x-address", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.div.children[0].classList.add("dados-wrapper");
this.btn = await waitElement(".btn-go-to-payment", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise

242
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -3,11 +3,20 @@
padding-bottom: 167px;
}
@include mq(sm, max) {
padding-bottom: 250px;
}
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 14px;
@include mq(sm, max) {
width: 91.4% !important;
// border: none;
}
label {
margin-top: 0;
}
@ -17,6 +26,24 @@
a {
color: $color-black;
font-size: 14px;
line-height: 16px;
font-family: $font-family-secundary;
text-transform: uppercase;
@include mq(sm, max) {
padding-right: 0 !important;
}
@include mq(md, max) {
font-size: 10px;
line-height: 12px;
padding-right: 16px;
}
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
&:hover {
color: lighen($color-black, 10);
@ -44,6 +71,11 @@
text-transform: uppercase;
color: #000000;
@include mq(sm, max) {
font-size: 12px !important;
line-height: 14px !important;
}
@include mq(xl, min) {
font-size: 40px;
line-height: 47px;
@ -66,6 +98,11 @@
color: #000000;
padding: 0;
@include mq(sm, max) {
font-size: 12px !important;
line-height: 14px !important;
}
@include mq(md, max) {
font-size: 14px;
line-height: 16px;
@ -85,6 +122,10 @@
align-items: center;
justify-content: center;
@include mq(sm, max) {
justify-content: normal;
}
@include mq(md, max) {
width: 98%;
}
@ -107,6 +148,10 @@
width: auto;
}
@include mq(sm, max) {
width: 64.3% !important;
}
@include mq(md, max) {
width: 100%;
}
@ -140,6 +185,11 @@
position: absolute;
}
@include mq(sm, max) {
right: 0px;
height: 52px;
}
@include mq(md, max) {
width: 12.4%;
}
@ -163,6 +213,11 @@
top: 50px;
margin-top: 3px;
@include mq(sm, max) {
transform: translateX(100%);
top: 56px;
}
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
@ -253,6 +308,10 @@
.shipping-data,
.payment-data,
.client-profile-data {
@include mq(sm, max) {
padding: 0 16px;
}
.accordion-group {
border: 1px solid #f0f0f0;
border-radius: 8px;
@ -274,6 +333,10 @@
background-size: 20px 20px;
outline: 0;
@include mq(sm, max) {
padding: 0;
}
&::before {
content: "";
}
@ -333,6 +396,16 @@
border: 1px solid #e0e0e0;
border-radius: 5px;
box-shadow: none;
@include mq(sm, max) {
height: 34px;
}
}
#client-email {
@include mq(sm, max) {
height: 40px;
}
}
.help.error {
@ -356,6 +429,10 @@
p.submit {
margin-top: 45px;
@include mq(sm, max) {
margin-bottom: 20px;
}
}
button.submit {
@ -371,6 +448,10 @@
transition: all 0.2s linear;
width: 100%;
@include mq(sm, max) {
margin: 0;
}
&:hover {
background: lighten($color-black, 5);
}
@ -388,6 +469,21 @@
text-decoration: underline;
}
.ship-postalCode {
.input-small {
@include mq(sm, max) {
max-width: 100%;
width: 96.1%;
}
}
small {
@include mq(sm, max) {
margin-top: 10px !important;
}
}
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
@ -495,6 +591,10 @@
color: #00c8ff;
font-weight: 500;
padding: 0 13px 0 14px;
@include mq(sm, max) {
padding: 0 15px 0 15px;
}
}
}
@ -584,6 +684,12 @@
border-radius: 100px;
}
.vtex-omnishipping-1-x-deliveryChannelsWrapper {
@include mq(sm, max) {
width: 100%;
}
}
.vtex-omnishipping-1-x-deliveryOptionActive {
color: #292929;
}
@ -622,9 +728,10 @@
.success {
height: 35px;
padding-right: 203px;
border: 1px solid #c4c4c4;
border-radius: 8px;
width: 96%;
max-width: 100%;
}
small {
@ -646,6 +753,10 @@
font-size: 14px;
line-height: 19px;
color: #7d7d7d;
@include mq(sm, max) {
margin-bottom: 11px;
}
}
.vtex-omnishipping-1-x-leanShippingGroupList {
@ -685,6 +796,12 @@
}
}
.box-client-info-pf {
@include mq(sm, max) {
width: 100%;
}
}
.form-step.box-info {
display: flex;
flex-direction: column-reverse;
@ -704,6 +821,16 @@
.newsletter {
margin-top: -8px;
margin-bottom: 0 !important;
@include mq(sm, max) {
margin: 0;
}
#opt-in-newsletter {
@include mq(sm, max) {
height: 13px;
}
}
}
.box-client-info-pj {
@ -879,6 +1006,11 @@ a#payment-group-Bancolombia\ TransferPaymentGroup {
div#payments-title {
span.accordion-toggle.collapsed.accordion-toggle-active {
margin-bottom: 76px;
@include mq(sm, max) {
margin-bottom: 92px;
}
span {
&::after {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
@ -903,20 +1035,27 @@ div {
}
div.cart-template.mini-cart.span4 {
border: 1px solid #e5e5e5;
border-radius: 8px;
max-height: 403px;
.cart-fixed {
height: auto !important;
h2 {
border: 1px solid #e5e5e5;
border-radius: 8px 8px 0 0;
border-bottom: none;
text-align: left;
padding: 24px 0 34px 17px;
@include mq(sm, max) {
margin: 0;
}
}
div {
.cart {
border: none;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-radius: 0;
padding: 0 17px 19px 17px;
margin: 0;
@ -934,13 +1073,17 @@ div.cart-template.mini-cart.span4 {
}
span {
max-width: 115px;
max-width: 116px;
white-space: initial;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #000000;
@include mq(sm, max) {
max-width: 120px;
}
}
img {
@ -964,6 +1107,13 @@ div.cart-template.mini-cart.span4 {
}
}
.summary {
border: 1px solid #e5e5e5;
border-radius: 0 0 8px 8px;
border-top: none;
width: 99.4%;
}
p#go-to-cart-button {
margin: 0;
max-height: 16px;
@ -985,13 +1135,8 @@ div.cart-template.mini-cart.span4 {
padding-top: 0;
}
.accordion-inner {
// border: 2px solid red;
}
.totalizers-list {
border: 1px solid #e5e5e5;
border-radius: 8px;
border: none;
tr.Items,
tr.Discounts {
@ -1018,9 +1163,8 @@ div.cart-template.mini-cart.span4 {
}
tfoot {
border: 1px solid #e5e5e5;
border-radius: 8px;
border-bottom: none;
border: none;
border-top: 1px solid #e5e5e5;
td.info {
padding: 30px 0 22px 17px;
@ -1041,6 +1185,10 @@ div.cart-template.mini-cart.span4 {
border-radius: 8px;
margin-top: 20px;
@include mq(sm, max) {
margin-top: 0;
}
i {
display: none;
}
@ -1067,6 +1215,70 @@ p.client-profile-summary {
}
}
.client-first-name,
.client-last-name {
@include mq(sm, max) {
width: 45.7%;
}
}
.client-last-name {
@include mq(sm, max) {
position: absolute;
top: 75px;
right: 5px;
}
}
#client-document,
#client-phone {
@include mq(sm, max) {
width: 90.3%;
}
}
.client-phone {
@include mq(sm, max) {
position: absolute;
right: -2px;
}
}
.dados-wrapper {
display: flex;
flex-direction: column;
}
#ship-number {
@include mq(sm, max) {
width: 99.4%;
height: 25px;
}
}
#ship-complement {
@include mq(sm, max) {
width: 100%;
}
}
.summary-totalizers {
@include mq(sm, max) {
padding: 0 !important;
}
}
#btn-go-to-payment {
@include mq(sm, max) {
margin-bottom: 20px;
}
}
.link-box-edit {
@include mq(sm, max) {
padding: 0 !important;
}
}
//Pagamento
label.FormFieldLabel,

68
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -19,6 +19,10 @@
padding: 0 16px;
margin-bottom: 0;
@include mq(sm, max) {
height: 91px;
}
@include mq(md, max) {
margin: 0px 0 48px 0;
border-left: none;
@ -114,6 +118,10 @@
.cart-items {
.product-item {
padding: 16px 0;
@include mq(sm, max) {
padding: 0 !important;
}
}
th {
@ -186,7 +194,7 @@
width: 60px;
@include mq(sm, max) {
width: 72px;
padding: 4px 0 0 0 !important;
}
@include mq(xl, min) {
@ -242,9 +250,9 @@
line-height: 14px;
transition: ease-in 0.22s all;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
@include mq(sm, max) {
top: 6px !important;
left: 53px !important;
}
@include mq(md, max) {
@ -253,6 +261,11 @@
left: 92px;
}
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
@ -290,6 +303,11 @@
padding: 23px 0 0 0;
text-align: initial;
@include mq(sm, max) {
right: -4px !important;
top: 28px !important;
}
@include mq(md, max) {
padding: 0;
position: absolute;
@ -355,6 +373,11 @@
padding: 0;
width: max-content;
@include mq(sm, max) {
left: -8px !important;
top: 7px !important;
}
@media (max-width: 490px) {
margin-left: 84px !important;
}
@ -490,6 +513,11 @@
color: #c4c4c4;
font-size: 15px;
@include mq(sm, max) {
font-size: 13px !important;
top: 2px !important;
}
@include mq(md, max) {
font-size: 18px;
position: absolute;
@ -522,6 +550,10 @@
margin: 0;
width: max-content;
@include mq(sm, max) {
margin-bottom: 0 !important;
}
@include mq(md, max) {
margin-bottom: 68px;
}
@ -585,6 +617,10 @@
margin: 0;
transition: all 0.2s linear;
@include mq(sm, max) {
margin-bottom: 38px;
}
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
@ -619,6 +655,10 @@
width: 100%;
}
@include mq(sm, max) {
margin-bottom: 66px;
}
@include mq(xl, min) {
width: 543px;
}
@ -957,6 +997,7 @@
.coupon-fields {
margin-bottom: 0;
width: 100%;
@include mq(sm, max) {
span {
@ -982,12 +1023,10 @@
max-width: 160px;
@include mq(sm, max) {
max-width: 100%;
width: 100%;
}
@include mq(md, max) {
width: 774px;
width: 78.1%;
max-width: 774px;
}
@ -1017,9 +1056,14 @@
width: 133px;
text-transform: uppercase;
@include mq(sm, max) {
margin-left: 5px;
}
@include mq(md, max) {
margin-left: 2px;
width: 133px;
width: 13.4%;
min-width: fit-content;
}
@include mq(xl, min) {
@ -1193,13 +1237,17 @@
margin-top: 48px;
margin-bottom: 54px;
@include mq(xl, min) {
margin-bottom: 68px;
@include mq(sm, max) {
margin-top: 10px !important;
}
@include mq(md, max) {
margin-bottom: 41px;
}
@include mq(xl, min) {
margin-bottom: 68px;
}
}
}

24
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -4,8 +4,32 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
@include mq(sm, max) {
float: initial;
width: 100%;
display: flex !important;
justify-content: center !important;
border: none;
margin-top: 17px;
}
.cart-fixed {
@include mq(sm, max) {
width: 91.5%;
}
}
.payment-confirmation-wrap {
@include mq(sm, max) {
border: none;
}
}
}
.orderform-template-holder {
width: 66.1132%;
@include mq(sm, max) {
width: 100%;
}
}
}

10
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -49,9 +49,8 @@
width: 28.1%;
margin: 0;
@include mq(xl, min) {
width: 29.9%;
padding: 15px 19px;
@include mq(sm, max) {
width: 56% !important;
}
@include mq(md, max) {
@ -61,6 +60,11 @@
align-items: center;
justify-content: center;
}
@include mq(xl, min) {
width: 29.9%;
padding: 15px 19px;
}
}
.link-choose-products::after {

4
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -22,6 +22,10 @@
justify-content: space-between;
width: auto;
@include mq(sm, max) {
padding-top: 34px !important;
}
@include mq(md, max) {
flex-direction: column;
align-items: flex-start;

1
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -178,6 +178,7 @@
img {
width: 100%;
object-fit: contain;
@include mq(xl, min) {
width: 382px;