GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estilizacao da página de autenticacao

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-17 18:23:22 -03:00
parent 045de99933
commit c2574c7096
4 changed files with 129 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,14 @@ export default class Footer {
}
async init() {
await this.getProducts(this.createShelf)
await this.selectors();
this.getProducts(this.createShelf)
this.hideElementscart()
this.changeTextBtnChooseProducts()
this.addCarrossel()
this.setImagesFooter()
this.onUpdate();
this.addCarrossel()
this.vericationStateToSetSlick()
}
async selectors() {
@ -22,6 +23,8 @@ export default class Footer {
this.titleCart = await waitElement("#cart-title");
this.btnChooseProducts = await waitElement("#cart-choose-products");
this.footer = await waitElement(".footerCheckout");
this.footerPrateleira = await waitElement(".footerCheckout__prateleira__container-Slick");
this.textPraleteira = await waitElement(".footerCheckout__prateleira__textYouLike");
this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
}
@ -32,13 +35,31 @@ export default class Footer {
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let title = this.titleCart
let textPrateleira = this.textPraleteira
let prateleira = this.footerPrateleira
let config = { childList: true, attributes: true };
if(target.style.display == "block") {
prateleira.style.display = "none"
textPrateleira.style.display = "none"
} else {
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
}
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
if(mutation.target.style.display == "block") {
title.style.display = "none";
prateleira.style.display = "none"
textPrateleira.style.display = "none"
} else {
title.style.display = "block";
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
$('.footerCheckout__prateleira__container-Slick').slick('unslick');
$(".footerCheckout__prateleira__container-Slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
});
}
//console.log(mutation.target.style.display);
});
@ -180,4 +201,26 @@ export default class Footer {
containerSlick.append(cardProduct)
})
}
vericationStateToSetSlick() {
const prateleira = document.querySelector('.footerCheckout__prateleira__container-Slick')
const textPrateleira = document.querySelector('.footerCheckout__prateleira__textYouLike')
const urlCart = "https://m3academy.myvtex.com/checkout/#/cart"
console.log(prateleira)
if (window.location.href != urlCart) {
textPrateleira.style.display = "none"
prateleira.style.display = "none"
}
window.addEventListener("hashchange", () => {
if (window.location.hash != "#/cart") {
textPrateleira.style.display = "none"
prateleira.style.display = "none"
} else {
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
}
})
}
}

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

@ -1,6 +1,6 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
border-top: 1px solid $color-black;
font-family: $font-family;
padding-top: 8px;
@ -8,6 +8,8 @@
a {
color: $color-black;
font-size: 14px;
font-family: $font-family-secundary;
text-transform: uppercase;
&:hover {
color: lighen($color-black, 10);
@ -25,12 +27,19 @@
margin-bottom: 16px;
span {
color: #303030;
font-size: 24px;
font-family: $font-family-secundary;
text-transform: uppercase;
color: $color-black;
font-weight: 400;
font-size: 1.25rem;
}
small {
color: $color-gray4;
font-family: $font-family-secundary;
text-transform: uppercase;
color: $color-black;
font-weight: 400;
font-size: 1.25rem;
}
}
}
@ -43,7 +52,7 @@
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
border: 1px solid $color-black;
box-sizing: border-box;
border-radius: 5px;
@ -53,13 +62,16 @@
}
button {
background-color: $color-black;
background-color: $color-blue2;
border-radius: 5px;
border: none;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
color: $color-black;
text-transform: uppercase;
font-weight: 700;
@media (max-width: 490px) {
height: 48px;
@ -76,7 +88,7 @@
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border: 1px solid $color-black;
border-radius: 0;
h3 {
@ -113,7 +125,7 @@
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
//border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
@ -213,7 +225,7 @@
}
.shp-lean {
border: 1px solid $color-gray4;
//border: 1px solid $color-gray4;
border-radius: 0;
label {
@ -277,7 +289,7 @@
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
//border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {

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

@ -375,11 +375,12 @@
.srp-main-title {
margin: 32px 0 12px;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
color: $color-gray2;
color: $color-black;
@include mq(md, max) {
margin-top: 0;
@ -414,6 +415,10 @@
background-color: darken($color-gray5, 5);
}
}
.input.ship-country.text {
display: none;
}
}
.srp-data {
@ -428,21 +433,23 @@
}
.srp-pickup-my-location__button {
background-color: $color-black;
background-color: $color-blue2;
border: none;
border-radius: 5px;
border-radius: 0.5rem;
color: $color-white;
outline: none;
width: 100%;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 500;
font-weight: 700;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
padding: 0.75rem 0;
&:hover {
background-color: lighten($color-black, 5);
opacity: 0.8;
}
&:active {
@ -452,7 +459,7 @@
}
.srp-toggle {
margin: 0 0 34px;
margin: 0 0 1.25rem;
&__wrapper {
background-color: $color-white;
@ -467,12 +474,12 @@
}
&__current {
border: 1px solid $color-blue;
border: 1px solid $color-black;
border-radius: 100px;
}
.blue {
color: $color-blue;
color: $color-black;
}
label {
@ -497,7 +504,7 @@
}
input {
border: 1px solid $color-gray3;
border: 1px solid $color-gray6;
border-radius: 5px;
box-shadow: none;
color: $color-gray3;
@ -508,7 +515,7 @@
}
& ~ button {
background-color: $color-black;
background-color: $color-blue2;
border: none;
border-radius: 5px;
color: $color-white;
@ -524,7 +531,7 @@
text-transform: uppercase;
&:hover {
background-color: lighten($color-black, 5);
opacity: 0.8;
}
&:active {
@ -533,12 +540,12 @@
}
small a {
font-family: $font-family;
font-family: $font-family-secundary;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: $color-blue;
color: $color-black;
margin-top: 7px;
}
@ -655,6 +662,9 @@
text-decoration: underline;
}
.coupon-label {
display: flex;
.coupon-label label {
margin-bottom: 12px;
font-family: $font-family;
@ -665,11 +675,26 @@
color: $color-gray2;
cursor: none;
}
}
.coupon-fields {
margin-bottom: 32px;
@include mq(sm, max) {
span {
display: flex;
gap: 0.948rem;
i {
position: absolute;
right: 91px;
opacity: 1;
}
}
/* @include mq(sm, max) {
span {
display: flex;
flex-direction: row;
@ -680,7 +705,7 @@
opacity: 1;
}
}
}
} */
input {
border: 2px solid $color-gray3;
@ -688,9 +713,10 @@
box-shadow: none;
color: $color-gray4;
font-size: 12px;
height: 34px;
height: 36px;
padding: 0 12px;
max-width: 160px;
//max-width: 160px;
flex: 2;
@include mq(sm, max) {
max-width: 100%;
@ -699,22 +725,23 @@
}
button {
background: $color-black;
background: $color-blue2;
border: none;
border-radius: 5px;
color: $color-white;
border-radius: 0.5rem;
color: $color-black;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
margin-left: 6px;
outline: none;
transition: all 0.2s linear;
width: 94px;
//width: 94px;
flex: 1;
text-transform: uppercase;
@include mq(md, max) {
/* @include mq(md, max) {
width: 138px;
}
} */
&:hover {
background-color: lighten($color-black, 5);

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

@ -14,6 +14,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #c4c4c4;
$color-blue: #4267b2;
$color-blue2: #00C8FF;