diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..32147f1 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -6,35 +6,97 @@ export default class Footer {
}
async init() {
+ this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
await this.selectors();
+ this.buildIconList();
+ this.buildDevelopedByList();
// this.onUpdate();
}
async selectors() {
+ this.footerIconList = await waitElement(".footerCheckout__stamps");
+ this.footerDevelopedByList = await waitElement(".footerCheckout__developedBy");
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
- this.checkoutVazio = await waitElement(".empty-cart-content");
+ // this.checkoutVazio = await waitElement(".empty-cart-content");
}
- onUpdate() {
- //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
- // 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 config = { childList: true, attributes: true };
- let observer = new MutationObserver((mutations) => {
- mutations.forEach(function (mutation) {
- console.log(mutation.type);
- });
- });
+ buildIconList() {
+ Object.values(this.footerIconList.children).forEach((li, index) => {
+ const child = li.children[0].classList.contains("footerCheckout__payments")
+ ? li.children[0]
+ : null;
+ if (child === null) return;
- observer.observe(target, config);
- }
- async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
+ if (index === 0)
+ child.innerHTML = `
+
+ `;
+ else
+ child.innerHTML = `
+
+ `;
});
}
+
+ buildDevelopedByList() {
+ Object.values(this.footerDevelopedByList.children).forEach((li, index) => {
+ const a = li.children[0];
+
+ if (index === 0)
+ a.innerHTML = `
+ Powered By
+ 
+ `;
+ else
+ a.innerHTML = `
+ Developed By
+ 
+ `;
+ });
+ }
+
+ // onUpdate() {
+ // //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
+ // // 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 config = { childList: true, attributes: true };
+ // let observer = new MutationObserver((mutations) => {
+ // mutations.forEach(function (mutation) {
+ // console.log(mutation.type);
+ // });
+ // });
+
+ // observer.observe(target, config);
+ // }
+ // async addCarrossel() {
+ // const elemento = await waitElement("#my-element");
+ // $(elemento).slick({
+ // slidesToShow: 4,
+ // slidesToScroll: 1,
+ // });
+ // }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index f1eea2d..97787f4 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,27 +3,11 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
-html {
- height: 100%;
- min-height: 100%;
-}
-
-footer .footerCheckout__wrapper {
- width: 94.9734%;
- margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
- width: 79.53125%;
- margin: 0 auto;
+img {
+ display: block;
}
body {
- display: flex;
- flex-direction: column;
- min-height: 100% !important;
- padding-top: 0 !important;
-
@include mq(md, max) {
padding-left: 0;
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index e41b3a5..1f89396 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,47 +1,90 @@
/* _footer.scss */
.footerCheckout {
- border-top: none;
- color: #7d7d7d;
+ border-top: 1px solid $black-500;
+ padding: 16px 32px;
- &__wrapper {
- align-items: center;
+ .container {
+ width: 100%;
display: flex;
+ align-items: center;
justify-content: space-between;
+
+ &::before,
+ &::after {
+ content: "";
+ display: none;
+ }
}
&__address {
- color: #7d7d7d;
+ color: $black-400;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
- max-width: 40%;
- @include mq(md, max) {
- margin-bottom: 24px;
- max-width: 100%;
+ @include mq(4k, min) {
+ font-size: 20px;
+ line-height: 27px;
+ }
+ }
+
+ &__payments-list {
+ list-style-type: none;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: max-content;
+ }
+
+ &__payments-icon {
+ width: 35px;
+ margin-right: 13px;
+
+ @include mq(4k, min) {
+ width: 39px;
}
}
&__stamps {
+ margin: 0;
align-items: center;
display: flex;
justify-self: center;
list-style: none;
- @include mq(md, max) {
- align-self: center;
- margin-bottom: 12px;
+ li {
+ &:not(:first-of-type),
+ &:not(:last-of-type) {
+ height: 24px;
+
+ @include mq(4k, min) {
+ height: 43px;
+ display: flex;
+ align-items: center;
+ }
+ }
}
&__divider {
- background-color: #8d8d8d;
+ background-color: $gray-400;
display: inline-block;
height: 24px;
- margin: 0 8px;
+ margin: 0 10px 0 0;
width: 1px;
+
+ @include mq(4k, min) {
+ height: 43px;
+ }
+ }
+ }
+
+ &__payments-vtex-icon {
+ width: 53px;
+
+ @include mq(4k, min) {
+ width: 103px;
}
}
@@ -52,22 +95,39 @@
margin: 0;
li:last-child {
- margin-left: 16px;
+ margin-left: 10px;
+ }
+
+ li {
+ a {
+ img {
+ height: 16px;
+ width: auto;
+
+ @include mq(4k, min) {
+ height: 30px;
+ }
+ }
+ }
}
a {
align-items: center;
- color: #7d7d7d;
+ color: $black-400;
display: flex;
font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 10px;
+ font-weight: 400;
+ font-size: 9px;
line-height: 12px;
text-decoration: none;
+ @include mq(4k, min) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
span {
- margin-right: 8px;
+ margin-right: 10px;
}
}
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index db15af9..b4167ac 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,15 +1,14 @@
/* _header.scss */
.headerCheckout {
border-bottom: 1px solid $black-500;
- width: 100%;
+ padding: 29px 131px;
+
+ @include mq(mobile, max) {
+ padding: 16px;
+ }
.container {
width: auto !important;
- margin: 29px 131px;
-
- @include mq(mobile, max) {
- margin: 16px;
- }
}
&__wrapper {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index c6f2d7b..3672331 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -9,6 +9,8 @@ $font-family-secundary: "Tenor Sans", sans-serif;
$black-400: #292929;
$black-500: #000;
+$gray-400: #c4c4c4;
+
$white-500: #fff;
/* Grid breakpoints */
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ `;
});
}
+
+ buildDevelopedByList() {
+ Object.values(this.footerDevelopedByList.children).forEach((li, index) => {
+ const a = li.children[0];
+
+ if (index === 0)
+ a.innerHTML = `
+ Powered By
+