Gabriel_Ferraz_Nogueira/m3-academy-template-checkout-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(meu carrinho): layout tem tamanhos desktop

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-16 17:56:06 -03:00
parent f4f8f80d19
commit cf6515f4c9
6 changed files with 128 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,20 +31,28 @@ export default class Footer {
async selectors() { async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutAtivo = await waitElement(".checkout-container");
this.payments = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy"); this.devIncons = await waitElement(".footerCheckout__developedBy");
this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
this.titulo = await waitElement(".transactions-container"); this.titulo = await waitElement(".transactions-container");
this.cartTitulo = await waitElement("#cart-title");
this.titleSlick = await waitElement(".transactions-container");
} }
onUpdate() { onUpdate() {
let target = this.checkoutVazio; let target = this.checkoutVazio;
let list = this.listaPrateleira; let list = this.listaPrateleira;
let cartTitle = this.cartTitulo;
let slickTitle = this.titleSlick;
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
list.style.display = "flex"; list.style.display = "flex";
list.style.display = "block";
this.fetchApi(); this.fetchApi();
} else { } else {
this.cartTitulo.style.display = "none";
list.style.display = "none"; list.style.display = "none";
} }
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
@ -55,11 +63,18 @@ export default class Footer {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
if (target.style.display != "none") { if (target.style.display != "none") {
list.style.display = "none"; list.style.display = "none";
} else list.style.display = "flex"; cartTitle.style.display = "none";
if (list.style.display == "none") {
slickTitle.style.display = "none";
}
} else {
cartTitle.style.display = "block";
list.style.display = "flex";
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config, cartTitle, slickTitle);
} }
async addCarrossel() { async addCarrossel() {

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

@ -10,9 +10,15 @@
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
.cart-template-holder {
margin-bottom: 48px;
}
.item-unit-label { .item-unit-label {
display: none; display: none;
} }
.cart { .cart {
border: 1px solid $gray-100; border: 1px solid $gray-100;
box-sizing: border-box; box-sizing: border-box;
@ -75,6 +81,10 @@
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $white; background: $white;
.row-fluid summary {
margin-top: 48px;
}
} }
#go-to-cart-button a { #go-to-cart-button a {
@ -95,13 +105,6 @@
color: $white; color: $white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover {
background: lighten($black, 5);
}
&:active {
background: darken($black, 5);
}
} }
} }
@ -168,7 +171,6 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
&:hover { &:hover {
color: darken($black, 10);
text-decoration: none; text-decoration: none;
} }
@ -390,14 +392,10 @@
outline: none; outline: none;
padding: 12px 40px; padding: 12px 40px;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover {
background-color: lighten($gray-50, 5);
} }
&:active { .ship-country {
background-color: darken($gray-50, 5); display: none;
}
} }
} }
@ -413,26 +411,19 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $black; background-color: $blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $white; color: $white;
outline: none; outline: none;
width: 100%; width: 100%;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 11px 0;
&:hover {
background-color: lighten($black, 5);
}
&:active {
background-color: darken($black, 5);
}
} }
} }
@ -442,6 +433,7 @@
&__wrapper { &__wrapper {
background-color: $white; background-color: $white;
border-radius: 100px; border-radius: 100px;
border: 1px solid $gray-125;
width: 100%; width: 100%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -449,15 +441,19 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-transform: uppercase; text-transform: uppercase;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
color: $gray-125;
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $black;
border-radius: 100px; border-radius: 100px;
box-shadow: none;
} }
.blue { .blue {
color: $color-blue; color: $black;
box-shadow: none;
} }
label { label {
@ -471,6 +467,10 @@
.srp-postal-code { .srp-postal-code {
.ship-postalCode { .ship-postalCode {
.ship-country {
display: none;
}
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -482,7 +482,7 @@
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $gray-125;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $color-gray3;
@ -493,9 +493,9 @@
} }
& ~ button { & ~ button {
background-color: $black; background-color: $blue;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $white; color: $white;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
@ -507,14 +507,6 @@
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 96px;
text-transform: uppercase; text-transform: uppercase;
&:hover {
background-color: lighten($black, 5);
}
&:active {
background-color: darken($black, 5);
}
} }
small a { small a {
@ -523,11 +515,16 @@
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue; color: $black;
margin-top: 7px; margin-top: 7px;
} }
small:hover {
text-decoration: underline;
}
span.help.error { span.help.error {
display: none;
color: red; color: red;
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
@ -552,7 +549,7 @@
font-weight: 500; font-weight: 500;
&:hover { &:hover {
text-decoration: underline; text-decoration: none;
} }
} }
@ -606,7 +603,6 @@
#cart-link-coupon-add { #cart-link-coupon-add {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
} }
@ -638,14 +634,16 @@
} }
.coupon-label label { .coupon-label label {
text-align: left;
font-family: $font-family-secundary !important;
cursor: default;
margin-bottom: 12px; margin-bottom: 12px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $gray-150; color: $gray-600;
cursor: none;
} }
.coupon-fields { .coupon-fields {
@ -668,11 +666,15 @@
border: 2px solid $color-gray3; border: 2px solid $color-gray3;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $gray-200; font-family: $font-family-secundary !important;
font-style: normal;
font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px;
color: $gray-200;
height: 34px; height: 34px;
padding: 0 12px; padding: 0 16px;
max-width: 160px; width: 51%;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -681,30 +683,28 @@
} }
button { button {
background: $black; text-align: center;
background: $blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $white; color: $black;
font-size: 12px; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
margin-left: 6px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 35%;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none;
margin-left: 5px;
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
&:hover {
background-color: lighten($black, 5);
}
&:active {
background-color: darken($black, 5);
}
} }
} }
} }
@ -800,10 +800,6 @@
padding: 12px 19px; padding: 12px 19px;
cursor: pointer; cursor: pointer;
&:hover {
background-color: darken($blue, 5);
}
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;

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

@ -11,29 +11,62 @@
} }
} }
&-message {
display: none;
}
&-title { &-title {
font-family: $font-family;
font-size: 20px; font-size: 20px;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
margin-top: 170px;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $black; background: $white;
border: none; border: 1px solid $black;
border-radius: 5px; border-radius: 0;
transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $white; padding: 15px 65px;
color: $black;
text-transform: uppercase; text-transform: uppercase;
a {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
}
a::after {
content: "Continuar comprando";
color: $black;
position: absolute;
left: 0;
right: 0;
}
&:hover { &:hover {
background: lighten($black, 5); background: $white;
text-decoration: none;
} }
} }
} }

11
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -84,13 +84,14 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $gray-500;
font-family: $font-family; font-family: $font-family;
font-weight: 500; color: $gray-500;
font-size: 36px; font-style: normal;
line-height: 42px; font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {

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

@ -23,6 +23,7 @@ footer .footerCheckout__prateleira {
.img-container { .img-container {
margin: 0; margin: 0;
background: #ededed;
} }
.itemtName { .itemtName {

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

@ -15,6 +15,7 @@ $gray-125: #c4c4c4;
$gray-150: #989898; $gray-150: #989898;
$gray-200: #8d8d8d; $gray-200: #8d8d8d;
$gray-500: #292929; $gray-500: #292929;
$gray-600: #7d7d7d;
$blue: #00c8ff; $blue: #00c8ff;