Thiago.bronisio/m3-academy-template-checkout-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: checkout carrinho finalizado em todas as telas' (#8) from feature/checkout-style into main

Browse Source 
Reviewed-on: #8
This commit is contained in:
Thiago Bronisio Damascena 2022-12-22 03:25:25 +00:00
commit 7ff2ec6f43
6 changed files with 865 additions and 496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
checkout/src/arquivos/js/components/Footer.js
View File

@ -8,6 +8,7 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.footerHTML(); this.footerHTML();
this.onUpdate()
// this.onUpdate(); // this.onUpdate();
} }
@ -91,7 +92,7 @@ export default class Footer {
} }
onUpdate() { async onUpdate() {
// Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
@ -99,7 +100,7 @@ export default class Footer {
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); console.log(mutation);
}); });
}); });

2
checkout/src/arquivos/sass/checkout.scss
View File

@ -74,7 +74,7 @@ body {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 16px 0 17px 17px; margin: 16px 0 17px 16px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
} }

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

@ -1,12 +1,24 @@
.checkout-container { .checkout-container {
box-sizing: border-box; box-sizing: border-box;
height: 545px;
overflow: none;
@include mq(md, max) {
height: 563px;
}
@include mq(xl, min) {
height: 656px;
}
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; left: 0;
.link-cart { .link-cart {
margin-bottom: 100px;
a { a {
margin: 0 16px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@ -28,10 +40,9 @@
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 21px; margin: 0 16px 21px;
span { span {
margin-bottom: 21px;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
@ -55,6 +66,14 @@
.client-email { .client-email {
margin: 0 0 24.55px; margin: 0 0 24.55px;
@include mq(sm, max) {
width: 86% !important;
}
@include mq(md, max) {
width: 65.74585635359117%;
}
input { input {
box-shadow: none; box-shadow: none;
font-family: $font-family; font-family: $font-family;
@ -69,10 +88,6 @@
line-height: 16px; line-height: 16px;
font-family: $font-family; font-family: $font-family;
color: $color-black; color: $color-black;
@media (max-width: 490px) {
width: auto;
}
} }
button { button {
@ -105,7 +120,7 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
font-family: $font-family; font-family: $font-family;
margin-top: 3px; margin-top: 9px;
} }
} }
@ -114,11 +129,7 @@
background-color: $color-white; background-color: $color-white;
border: 1px solid $black-padrao; border: 1px solid $black-padrao;
border-radius: 5px; border-radius: 5px;
width: 400px; width: 400px !important;
@include mq(md, max) {
width: 100%;
}
h3 { h3 {
color: $black-padrao; color: $black-padrao;
@ -197,6 +208,7 @@
} }
} }
.accordion-body {
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.shipping-summary-info { .shipping-summary-info {
@ -572,3 +584,4 @@
} }
} }
} }
}

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

@ -1,14 +1,25 @@
.container {
@include mq(md, max) {
width: 100%;
}
}
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { .summary-totalizers {
padding: 0 0; @include mq(xl, min) {
width: 688.3px !important;
}
}
.empty-cart-links {
align-items: center;
display: flex;
text-align: center;
a {
font-size: 0;
height: 16px;
&::after {
content: "Continuar comprando";
font-size: 14px;
text-transform: uppercase;
}
}
} }
.item-unit-label { .item-unit-label {
@ -22,18 +33,89 @@
margin-bottom: 48px; margin-bottom: 48px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
}
@include mq(sm, max) {
height: 91px; height: 91px;
} }
.cart-items { .cart-items {
td.quantity-price {
@include mq(xl, min) {
width: 200px;
}
@include mq(xl, min) {
span {
font-size: 28px;
line-height: 33px;
}
}
}
thead { thead {
.product {
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
.shipping-date {
font-size: 0;
height: 16px;
&::after {
content: "Frete";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.product-price {
font-size: 0;
height: 16px;
&::after {
content: "Unidade";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.quantity {
font-size: 0;
height: 16px;
&::after {
content: "Quantidade";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
.quantity-price {
font-size: 0;
height: 0;
&::after {
content: "Total";
font-size: 16px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
}
}
@include mq(md, max) { @include mq(md, max) {
.item-remove { .item-remove {
display: none; display: none;
@ -99,6 +181,10 @@
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $color-white; background: $color-white;
@include mq(xl, min) {
height: 300px;
}
} }
#go-to-cart-button a { #go-to-cart-button a {
@ -138,6 +224,7 @@
padding: 16px 0; padding: 16px 0;
@include mq(md, max) { @include mq(md, max) {
margin: 0; margin: 0;
height: 91px;
} }
} }
@ -162,7 +249,7 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(md, max) {
width: 72px; width: 72px;
} }
@ -173,8 +260,8 @@
max-width: 60px !important; max-width: 60px !important;
margin: 0 16px 16px 0; margin: 0 16px 16px 0;
@include mq(sm, min) { @include mq(md, max) {
margin-top: 16px; margin: 0 !important;
} }
} }
} }
@ -182,9 +269,15 @@
.product-name { .product-name {
padding: 0; padding: 0;
height: 60px; height: 60px;
display: block;
@include mq(lg, max) { @include mq(md, max) {
width: 36.796%; width: 100% !important;
display: flex;
}
@include mq(xl, min) {
width: 100% !important;
} }
a { a {
@ -194,10 +287,24 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $black-padrao; color: $black-padrao;
font-family: $font-family-secundary;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@include mq(md, max) { @include mq(md, max) {
margin-left: 24px; margin-left: 4px;
position: relative;
top: 20px;
}
@include mq(sm, max) {
margin-left: 16px;
top: 0;
}
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
width: 100%;
} }
&:hover { &:hover {
@ -224,6 +331,11 @@
line-height: 14px; line-height: 14px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-gray8; color: $color-gray8;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
@include mq(md, max) { @include mq(md, max) {
@ -240,33 +352,50 @@
position: relative; position: relative;
top: 5px; top: 5px;
@include mq(md, max) {
min-width: 78px;
}
@include mq(sm, max) { @include mq(sm, max) {
top: -45px !important;
left: 0 !important;
}
@include mq(md, max) {
text-align: right; text-align: right;
position: relative; position: relative;
top: -50px; top: -20px;
left: 40px;
float: right; float: right;
margin-right: 5px; margin-right: 5px;
height: 38px; height: 38px;
padding: 0; padding: 0;
} }
span.list-price { .list-price {
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(sm, max) { @include mq(md, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
.old-product-price-label { .old-product-price-label {
text-transform: lowercase; text-transform: lowercase;
} }
} }
.best-price {
span {
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
} }
td.quantity { td.quantity {
@ -282,12 +411,17 @@
padding: 0; padding: 0;
width: max-content !important; width: max-content !important;
position: relative; position: relative;
top: 5px; top: 13px;
@include mq(md, max) {
margin: 0;
position: relative;
top: -20px;
}
@include mq(sm, max) { @include mq(sm, max) {
margin-left: 84px !important; top: -48px;
position: relative; left: 16px;
top: -58px;
} }
input { input {
@ -306,6 +440,11 @@
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} }
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
.icon-plus-sign, .icon-plus-sign,
@ -315,6 +454,10 @@
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; padding: 1px 12px;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -323,6 +466,10 @@
font-size: 20px; font-size: 20px;
color: $color-blue-100; color: $color-blue-100;
padding-left: 0 0 0 11px; padding-left: 0 0 0 11px;
@include mq(xl, min) {
font-size: 28px !important;
line-height: 33px !important;
}
} }
} }
@ -331,6 +478,11 @@
font-size: 20px; font-size: 20px;
color: $color-blue-100; color: $color-blue-100;
padding-right: 0 11px 0 0; padding-right: 0 11px 0 0;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -341,7 +493,7 @@
left: inherit; left: inherit;
height: inherit; height: inherit;
width: inherit; width: inherit;
top: inherit; top: 0;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -384,12 +536,16 @@
display: flex; display: flex;
i { i {
height: 10px;
width: 10px;
@include mq(sm, max) { @include mq(sm, max) {
position: relative; position: relative;
top: 6px; top: 7px !important;
left: 8px !important;
}
@include mq(md, max) {
position: relative;
top: -20px;
left: 20px;
} }
} }
} }
@ -405,6 +561,10 @@
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
} }
@include mq(xl, min) {
font-size: 25px;
}
} }
} }
@ -423,6 +583,9 @@
} }
.summary { .summary {
@include mq(xl, min) {
height: 300px;
}
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;
@ -445,8 +608,20 @@
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@include mq(xl, min) {
font-size: 48px;
line-height: 65px;
}
} }
.srp-content {
@include mq(xl, min) {
font-size: 28px;
line-height: 36px;
width: 512px;
max-width: 512px;
}
.srp-description { .srp-description {
margin: 0 0 10.65px; margin: 0 0 10.65px;
font-weight: 400; font-weight: 400;
@ -454,6 +629,13 @@
line-height: 18px; line-height: 18px;
font-family: $font-family; font-family: $font-family;
color: $color-gray2; color: $color-gray2;
@include mq(xl, min) {
font-size: 28px;
line-height: 36px;
max-width: 100%;
}
}
} }
button.shp-open-options { button.shp-open-options {
@ -478,11 +660,14 @@
background-color: darken($color-gray5, 5); background-color: darken($color-gray5, 5);
} }
} }
}
.srp-data { .srp-data {
width: 280px; width: 280px;
@include mq(xl, min) {
width: 100%;
}
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
} }
@ -491,6 +676,25 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
button {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
.srp-pickup-empty {
&__my-location {
@include mq(xl, min) {
button {
font-size: 28px;
line-height: 38px;
height: 61px;
}
}
}
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-blue-100; background-color: $color-blue-100;
border: none; border: none;
@ -506,6 +710,10 @@
line-height: 19px; line-height: 19px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@include mq(xl, min) {
width: 100%;
}
&:hover { &:hover {
background-color: ($color-blue-hover); background-color: ($color-blue-hover);
} }
@ -515,6 +723,7 @@
} }
} }
} }
}
.srp-toggle { .srp-toggle {
margin: 0 0 20px; margin: 0 0 20px;
@ -523,12 +732,35 @@
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
height: 36px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
@include mq(xl, min) {
width: 543px;
height: 57px;
display: flex;
justify-content: center;
align-items: center;
}
}
&__delivery {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
}
&__pickup {
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
} }
&__current { &__current {
@ -556,6 +788,9 @@
} }
.ship-postalCode { .ship-postalCode {
@include mq(xl, min) {
width: 543px;
}
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -564,17 +799,29 @@
line-height: 14px; line-height: 14px;
margin-bottom: 2px; margin-bottom: 2px;
color: $color-black; color: $color-black;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
color: $black-padrao;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(xl, min) {
width: 334px;
height: 55px;
font-size: 28px;
}
} }
& ~ button { & ~ button {
@ -596,6 +843,15 @@
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase; text-transform: uppercase;
@include mq(xl, min) {
width: 194px;
height: 55px;
font-size: 28px;
line-height: 38px;
right: 0px;
top: 45px;
}
&:hover { &:hover {
background-color: lighten($color-blue-hover, 5); background-color: lighten($color-blue-hover, 5);
} }
@ -612,6 +868,12 @@
line-height: 12px; line-height: 12px;
color: $black-padrao; color: $black-padrao;
margin-top: 4px; margin-top: 4px;
display: flex;
@include mq(xl, min) {
font-size: 20px;
line-height: 38px;
}
} }
span.help.error { span.help.error {
@ -622,6 +884,12 @@
width: 100%; width: 100%;
top: 81px; top: 81px;
right: 0px; right: 0px;
@include mq(xl, min) {
font-size: 20px;
line-height: 38px;
top: 130px;
}
} }
} }
} }
@ -698,6 +966,14 @@
justify-content: center; justify-content: center;
padding-bottom: 8px; padding-bottom: 8px;
margin: 0; margin: 0;
@include mq(xl, min) {
display: flex;
justify-content: center;
align-items: flex-end;
height: 70px;
}
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -711,6 +987,11 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $black-padrao; color: $black-padrao;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -721,6 +1002,13 @@
.coupon-column { .coupon-column {
width: 362px; width: 362px;
@include mq(md, max) {
width: 100%;
}
@include mq(xl, min) {
width: 100%;
}
.coupon { .coupon {
margin: 0; margin: 0;
} }
@ -740,14 +1028,33 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
display: flex; display: flex;
justify-content: start; justify-content: start;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
.coupon-fieldset {
@include mq(xl, min) {
height: 87px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: flex-end;
&:first-child {
display: block;
height: 87px;
width: 100%;
}
}
.coupon-fields { .coupon-fields {
margin-bottom: 54px; margin-bottom: 20px;
text-align: start; text-align: start;
span { span {
@include mq(sm, max) { @include mq(md, max) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -764,7 +1071,7 @@
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray7; color: $color-black;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -774,10 +1081,17 @@
margin-right: 5px; margin-right: 5px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(sm, max) { @include mq(md, max) {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
@include mq(xl, min) {
height: 55px;
width: 398.4px;
font-size: 28px;
line-height: 38px;
}
} }
button { button {
@ -794,14 +1108,21 @@
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
&::placeholder {
padding: 5px;
}
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
@include mq(xl, min) {
height: 55px;
width: 253.3px;
font-size: 28px;
line-height: 38px;
}
&::placeholder {
padding: 5px;
}
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);
} }
@ -812,6 +1133,7 @@
} }
} }
} }
}
.accordion-group { .accordion-group {
tr { tr {
@ -833,6 +1155,13 @@
line-height: 16px; line-height: 16px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black; color: $color-black;
@include mq(xl, min) {
font-size: 28px;
line-height: 33px;
height: 33px;
width: 300px;
}
} }
&.info { &.info {
@ -854,6 +1183,11 @@
line-height: 25px; line-height: 25px;
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
@include mq(xl, min) {
font-size: 36px;
line-height: 49px;
}
} }
} }
} }
@ -877,13 +1211,20 @@
padding-bottom: 43.4px; padding-bottom: 43.4px;
} }
@include mq(xl, min) {
width: 684.3px;
position: relative;
left: 740px;
margin-top: 17px;
}
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 15px;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 15px;
} }
a { a {
@ -893,6 +1234,11 @@
color: $black-padrao; color: $black-padrao;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@ -921,6 +1267,11 @@
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
@include mq(xl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
} }

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

@ -2,6 +2,10 @@
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;
@include mq(xl, min) {
position: inherit;
}
.container { .container {
display: flex; display: flex;
margin: 16px 0; margin: 16px 0;
@ -67,7 +71,7 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
order: -1; order: -1;
margin: 0; margin: 0;
width: 100%; width: 90%;
padding-left: 8px; padding-left: 8px;
justify-content: flex-start; justify-content: flex-start;
} }

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -36,7 +36,7 @@ $color-roxo: #41115d;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 491px,
md: 1025px, md: 1025px,
lg: 2500px, lg: 2500px,
xl: 2501px, xl: 2501px,