diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..91e4707 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,6 +7,9 @@ export default class Footer {
async init() {
await this.selectors();
+ this.icons();
+ this.vtexIcon();
+ this.poweredDevelopeIcon();
// this.onUpdate();
}
@@ -14,27 +17,85 @@ export default class Footer {
//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.payments = await waitElement(".footerCheckout__payments");
+ this.vtexpci = await waitElement(".footerCheckout__vtexpci");
+ this.devIncons = await waitElement(".footerCheckout__developedBy");
}
- 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);
+ icons() {
+ this.payments.innerHTML = `
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+ `;
}
- async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
- });
+
+ vtexIcon() {
+ this.vtexpci.innerHTML = `
+
+ `;
+ }
+
+ poweredDevelopeIcon() {
+ this.devIncons.innerHTML = `
+
+
+ PoweredBy
+
+
+
+
+
+
+ DevelopedBy
+
+
+
+ `;
}
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..2524c33 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,59 +1,82 @@
/* _footer.scss */
.footerCheckout {
- border-top: none;
- color: $color-gray2;
-
- &__wrapper {
- align-items: center;
- display: flex;
- justify-content: space-between;
+ // width: 1280px;
+ // height: 65px;
+ border-top: 1px solid #292929;
+ // position: relative;
+ // display: flex;
+ // top: 800px;
+ .container{
+ position: relative;
+ display: flex;
+ max-width: max-content;
+ justify-content: space-between;
+ margin-top: 22px;
}
+ &__wrapper {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ }
- &__address {
+ &__address {
color: $color-gray2;
- font-family: $font-family;
+ font-family: "Open Sans",sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
- max-width: 40%;
+ min-width: 40%;
+ margin-left: -80px;
+ margin-right: -45px;
+ margin-top: 10px;
- @include mq(md, max) {
- margin-bottom: 24px;
- max-width: 100%;
- }
- }
-
- &__stamps {
- align-items: center;
- display: flex;
- justify-self: center;
- list-style: none;
-
- @include mq(md, max) {
- align-self: center;
- margin-bottom: 12px;
+ @include mq(md, max) {
+ margin-bottom: 24px;
+ max-width: 100%;
+ }
}
- &__divider {
- background-color: $color-gray4;
- display: inline-block;
- height: 24px;
- margin: 0 8px;
- width: 1px;
+ .payments-icons-wrapper{
+ display: flex;
+ list-style: none;
}
+
+ img {
+ max-width: 100%;
+ min-width: 36px;
+ min-height: 20px;
+ vertical-align: middle;
+ border: 0;
+ }
+
+ &__stamps {
+ align-items: center;
+ display: flex;
+ list-style: none;
+ margin-right: 30px;
+
+ @include mq(md, max) {
+ align-self: center;
+ margin-bottom: 12px;
+ }
+
+ &__divider {
+ background-color: $color-gray4;
+ display: inline-block;
+ height: 24px;
+ margin: 0 8px;
+ width: 1px;
+ }
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
- margin: 0;
-
- li:last-child {
- margin-left: 16px;
- }
+ margin-left: -1px;
+}
a {
align-items: center;
@@ -70,5 +93,8 @@
margin-right: 8px;
}
}
+ .li-2{
+ margin-left: 35px;
+ }
}
-}
+
diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html
index 6246210..8c79f0c 100644
--- a/checkout/src/template-checkout/checkout-footer.html
+++ b/checkout/src/template-checkout/checkout-footer.html
@@ -23,14 +23,13 @@
Powered By
- @TODO: vtex icon
+
Developed By
- @TODO: m3 icon