diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index f385334..6efba39 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -10,12 +10,16 @@ export default class Footer {
await this.selectors();
this.footerIcons();
this.onUpdate();
- this.createContainerShelf();
+ if (window.location.hash === "#/cart") {
+ await this.createContainerShelf();
+ }
+ if (window.location.hash !== "#/cart") {
+ await this.removeShelf();
+ }
this.shelfItem = await waitElement(".footerCheckout__shelfList");
await this.createShelf();
- await this.addCarrossel();
+ this.addCarrossel();
console.log(this.list);
- // await this.createShelf();
}
async selectors() {
@@ -35,16 +39,15 @@ export default class Footer {
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
- // console.log(mutation.type);
- if (
- target.attributes.style.nodeValue == "display: none;" &&
- window.location.hash == "#/cart"
- ) {
- // const shelf = document.querySelector(".footerCheckout__prateleira");
- // this.createShelf();
- // console.log("Olá eu sou uma prateleira");
+ console.log(mutation.type);
+ console.log(mutation);
+
+ const footer = document.querySelector(".footerCheckout");
+ console.log(footer);
+ if (target.attributes.style.nodeValue == "display: none;") {
+ footer.children[0].classList.remove("ativado");
} else {
- console.log("Fui embora :(!");
+ footer.children[0].classList.add("ativado");
}
});
});
@@ -52,17 +55,25 @@ export default class Footer {
observer.observe(target, config);
}
- createContainerShelf() {
+ async createContainerShelf() {
if (this.shelf) {
this.shelf.innerHTML = `
+
+
`;
}
}
+ async removeShelf() {
+ if (this.shelf) {
+ this.shelf.innerHTML = "";
+ }
+ }
+
async createShelf() {
let structure = "";
@@ -74,13 +85,13 @@ export default class Footer {
${resp.name}
-
+
`;
});
this.shelfItem.innerHTML = structure;
- console.log("ioaioaioiaoioa");
+ // console.log("ioaioaioiaoioa");
}
async apiRequest() {
@@ -106,6 +117,37 @@ export default class Footer {
slidesToScroll: 1,
infinite: false,
arrows: true,
+ responsive: [
+ {
+ breakpoint: 1025,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ infinite: false,
+ arrows: true,
+ },
+ },
+
+ {
+ breakpoint: 992,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ infinite: false,
+ arrows: true,
+ },
+ },
+
+ {
+ breakpoint: 374,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ infinite: false,
+ arrows: true,
+ },
+ },
+ ],
});
}
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..c7642e7 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -63,7 +63,10 @@
}
.slick-slide {
float: left;
- height: 100%;
+ width: 100%;
+ height: auto;
+ margin-left: 8px;
+ margin-right: 8px;
min-height: 1px;
outline: none;
[dir="rtl"] & {
@@ -71,6 +74,7 @@
}
img {
display: block;
+ width: 100%;
}
&.slick-loading img {
display: none;
@@ -99,16 +103,41 @@
.slick-arrow {
font-size: 0;
position: absolute;
+ outline: 0;
+ border: 0;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
- left: 10px;
+ bottom: 50%;
+ left: 20px;
+ cursor: pointer;
+
+ @include mq(xxl, min) {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+ no-repeat center;
+ bottom: 50%;
+ left: -949px;
+ z-index: 5;
+ width: 100%;
+ }
}
.slick-next {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+ no-repeat center center;
z-index: 4;
- right: 10px;
+ bottom: 50%;
+ right: 20px;
+ cursor: pointer;
+
+ @include mq(xxl, min) {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+ no-repeat center;
+ z-index: 5;
+ right: -910px;
+ width: 100%;
+ }
}
.slick-arrow.slick-hidden {
display: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index f43fedd..c04edf1 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -3,24 +3,6 @@
border-top: none;
color: $color-gray2;
- &__prateleira {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- &__prateleira-title {
- h2 {
- font-family: $font-family-secundary;
- font-style: normal;
- font-weight: 400;
- font-size: 24px;
- line-height: 38px;
- color: $color-black2;
- }
- }
-
.container {
width: 94.9734%;
display: flex;
@@ -41,6 +23,7 @@
}
&__wrapper {
+ margin-top: 68px !important;
align-items: center;
display: flex;
flex-direction: column;
@@ -225,14 +208,143 @@
}
}
}
-}
-.slick-slide {
- &__shelf-card {
- height: 390px;
+ &__prateleira {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
- ul {
- list-style-type: none;
+ &__prateleira-title {
+ margin-bottom: 20px;
+ }
+
+ &__shelfList {
+ width: 1016px;
+
+ @include mq(pg, max) {
+ width: 991px;
+ }
+
+ @include mq(lg, max) {
+ width: 760px;
+ }
+
+ @include mq(md, max) {
+ width: 500px;
+ }
+
+ @include mq(sm, max) {
+ width: 344px;
+ }
+
+ @include mq(csin, max) {
+ width: 240px;
+ }
+
+ @include mq(xxl, min) {
+ width: 1994.07px;
+ }
+
+ ul {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ margin: 0 0 20px;
+ list-style-type: none;
+ // font-size: 0;
+ #text {
+ font-size: 0;
+ }
+
+ li {
+ background: $color-blue2;
+ border-radius: 8px;
+ padding: 5px;
+ color: $color-white;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ font-family: $font-family;
+ text-transform: uppercase;
+
+ @include mq(xxl, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+ }
+
+ figure {
+ margin: 0;
+ }
+
+ figcaption {
+ margin: 20px 0;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ text-align: center;
+ color: $color-black2;
+ font-family: $font-family;
+
+ @include mq(xxl, min) {
+ font-weight: 400;
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+
+ .button-list {
+ width: 100%;
+ padding: 12px 72px;
+ border-radius: 8px;
+ background: $color-blue2;
+ outline: 0;
+ border: 0;
+
+ a {
+ color: $color-white;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ white-space: nowrap;
+ font-family: $font-family;
+
+ @include mq(xxl, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+ }
+
+ button {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ }
+ }
+
+ &__prateleira-title {
+ h2 {
+ font-family: $font-family-secundary;
+ font-style: normal;
+ text-align: center;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: $color-black2;
+
+ @include mq(xxl, min) {
+ font-size: 48px;
+ line-height: 76px;
+ }
+ }
+ }
+
+ .ativado {
+ display: none !important;
}
}
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 056652e..0f0de87 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -17,6 +17,7 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-blue: #4267b2;
+$color-blue2: #00c8ff;
$color-green: #4caf50;
@@ -25,6 +26,7 @@ $grid-breakpoints: (
xs: 0,
csun: 285,
csyn: 355,
+ csin: 370,
cstm: 400,
sm: 576px,
md: 768px,