diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 0e2c4e2..99f3d49 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,8 +8,9 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
- this.createPayments();
- this.createDevelopedBy()
+ this.createfooterShelf();
+ this.insertImagesPayments();
+ this.insertImagesDevelopedBy();
}
async selectors() {
@@ -37,7 +38,7 @@ export default class Footer {
observer.observe(target, config);
}
- createPayments() {
+ insertImagesPayments() {
this.footerCheckoutPayments.innerHTML = `
@@ -50,7 +51,7 @@ export default class Footer {
this.footerCheckoutVtexPci.innerHTML =
` 
`
}
- createDevelopedBy() {
+ insertImagesDevelopedBy() {
this.footerCheckoutDevelopedBy.innerHTML = `
@@ -63,13 +64,71 @@ export default class Footer {
`;
+ }
+ async createfooterShelf() {
+ this.footerCheckoutShelf.innerHTML = ``;
+ this.footerCheckoutShelf.innerHTML += `
+
+
+ `;
+
+ const requestApi = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+ .then((response) => response.json())
+
+ requestApi.forEach((produtos) => {
+
+ const getImage = produtos.items[0].images[0].imageUrl;
+ const getNameProduto = produtos.productName;
+ const getLink = produtos.link
+ const footerCheckouShielfList = document.querySelector(".footerCheckout__prateleira__list")
+
+ console.log(footerCheckouShielfList);
+ footerCheckouShielfList.innerHTML += `
+
+ `;
+ });
+ this.addCarrossel();
+
+
}
async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
+ const elementToUseInSlick = document.querySelector(".footerCheckout__prateleira__list");
+
+ $(elementToUseInSlick).slick({
slidesToShow: 4,
slidesToScroll: 1,
+ infinite: true,
+ arrows: true,
+ responsive: [
+ {
+ breakpoint: 1025,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ }
+ },
+ {
+ breakpoint: 491,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ }
+ }
+ ]
});
}
+
}
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..ca85619 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -13,7 +13,9 @@
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
+
}
+
.slick-list {
position: relative;
overflow: hidden;
@@ -30,6 +32,7 @@
cursor: hand;
}
}
+
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
@@ -47,6 +50,8 @@
margin-left: auto;
margin-right: auto;
+
+
&:before,
&:after {
content: "";
@@ -60,18 +65,30 @@
.slick-loading & {
visibility: hidden;
}
+
+
}
+
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
outline: none;
+ margin: 0 8px;
+
+ @media (min-width: 2500px) {
+ margin: 0 8.5px;
+
+ }
+
[dir="rtl"] & {
float: right;
}
+
img {
display: block;
}
+
&.slick-loading img {
display: none;
}
@@ -96,26 +113,61 @@
border: 1px solid transparent;
}
}
+
.slick-arrow {
font-size: 0;
position: absolute;
+ border: none;
+ width: 13.64px;
+ height: 29.47px;
+ bottom: 43.33%;
+
+ @media (min-width: 2500px) {
+ width: 26px;
+ height: 58px;
+ }
+
+ @media (max-width: 490px) {
+ bottom: 45.33%
+ }
}
+
.slick-prev {
- background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
- no-repeat center center;
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center;
z-index: 4;
- left: 10px;
+ left: 20px;
+
+ @media (min-width: 2500px) {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
+ }
+
+ @media (max-width: 490px) {
+ left: 13px;
+ }
}
+
.slick-next {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center center;
z-index: 4;
- right: 10px;
+ right: 20px;
+
+ @media (min-width: 2500px) {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
+ }
+
+ @media (max-width: 490px) {
+ right: 13px;
+ }
}
+
.slick-arrow.slick-hidden {
display: none;
}
+
.slick-dots {
li {
margin: 0.5em;
+
button {
overflow: hidden;
text-indent: 999999999px;
@@ -123,14 +175,16 @@
width: 1em;
border-radius: 1em;
background-color: #fff;
+
:focus {
outline: none;
}
}
+
&.slick-active button {
&:focus {
outline: none;
}
}
}
-}
+}
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 51d3c4f..28dc37b 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -30,192 +30,199 @@
content: none;
}
- & .footerCheckout__address {
- color: $color-gray2;
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 10px;
- line-height: 12px;
- text-transform: capitalize;
- width: 100%;
- max-width: 269px;
-
- @media(min-width:2500px) {
- font-size: 20px;
- line-height: 27px;
- max-width: none;
- width: 537px;
- min-width: 537px;
- }
-
- @media(max-width:1024px) {
- margin-bottom: 16px;
- order: 2;
- }
-
-
-
- @include mq(md, max) {
- margin-bottom: 24px;
- max-width: 100%;
- }
- }
-
- & .footerCheckout__stamps {
- align-items: center;
- display: flex;
- justify-content: center;
- justify-self: center;
- list-style: none;
- width: 100%;
-
- @media (min-width: 2500px) {
- min-width: 690px;
-
- }
-
- @media (max-width: 1024px) {
- justify-content: flex-start;
- margin: 0;
- margin-bottom: 23px;
- margin-left: -5px;
- order: 1;
- }
-
- @include mq(md, max) {
- align-self: center;
- margin-bottom: 12px;
- }
-
- img {
- width: 34.78px;
- height: 20px;
-
- @media(min-width:2500px) {
- width: 69.63px;
- height: 39.06px;
- }
- }
-
-
- &__divider {
- background-color: $color-gray4;
- display: inline-block;
- height: 24px;
- margin: 0 8px;
- width: 1px;
- }
-
- }
-
- & .footerCheckout__vtexpci {
- img {
- width: 53px;
- height: 33px;
-
- @media(min-width:2500px) {
- width: 103.52px;
- height: 64.44px;
- }
- }
- }
-
- & .footerCheckout__developedBy {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- list-style-type: none;
- margin: 0;
- width: 33%;
- gap: 10.73px;
- margin: 0;
-
-
- li:first-child {
-
- a {
- display: flex;
-
- &::after {
- content: "";
- background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") no-repeat center center;
- background-size: 100%;
- display: block;
- min-width: 44.92px;
- height: 16px;
-
- @media (min-width: 2500px) {
- width: 87.73px;
- height: 31.25px;
- }
- }
-
- span {
- width: 100%;
- min-width: 61px;
- margin-right: 10.12px;
- }
- }
- }
-
- li:last-child {
- margin-left: 16px;
-
- a {
- display: flex;
-
- &::after {
- content: "";
- background: url(" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") no-repeat center center;
- background-size: 100%;
- display: block;
- width: 28.66px;
- height: 15.65px;
-
- @media(min-width:2500px) {
- width: 55.98px;
- height: 30.55px;
- }
- }
-
- span {
-
- width: 100%;
- min-width: 61px;
- margin-right: 10.12px;
- }
- }
-
- }
-
- a {
- align-items: center;
- color: $color-gray2;
- display: flex;
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 10px;
- line-height: 12px;
- text-decoration: none;
-
- @media(min-width:2500px) {
- font-size: 18px;
- line-height: 25px;
- }
-
- span {
- width: 100%;
- }
-
- }
-
-
-
- }
}
}
+ &__address {
+ color: $color-gray2;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: capitalize;
+ width: 100%;
+ max-width: 269px;
+
+ @media(min-width:2500px) {
+ font-size: 20px;
+ line-height: 27px;
+ max-width: none;
+ width: 537px;
+ min-width: 537px;
+ }
+
+ @media(max-width:1024px) {
+ margin-bottom: 16px;
+ order: 2;
+ }
+
+
+
+ @include mq(md, max) {
+ margin-bottom: 24px;
+ max-width: 100%;
+ }
+ }
+
+ &__stamps {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ justify-self: center;
+ list-style: none;
+ width: 100%;
+
+ @media (min-width: 2500px) {
+ min-width: 690px;
+
+ }
+
+ @media (max-width: 1024px) {
+ justify-content: flex-start;
+ margin: 0;
+ margin-bottom: 23px;
+ margin-left: -5px;
+ order: 1;
+ }
+
+ @include mq(md, max) {
+ align-self: center;
+ margin-bottom: 12px;
+ }
+
+ img {
+ width: 34.78px;
+ height: 20px;
+
+ @media(min-width:2500px) {
+ width: 69.63px;
+ height: 39.06px;
+ }
+ }
+
+
+ &__divider {
+ background-color: $color-gray4;
+ display: inline-block;
+ height: 24px;
+ margin: 0 8px;
+ width: 1px;
+ }
+
+ }
+
+ &__vtexpci {
+ img {
+ width: 53px;
+ height: 33px;
+
+ @media(min-width:2500px) {
+ width: 103.52px;
+ height: 64.44px;
+ }
+ }
+ }
+
+ &__developedBy {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ list-style-type: none;
+ margin: 0;
+ width: 33%;
+ gap: 10.73px;
+ margin: 0;
+
+ @media (max-width:375px),
+ (max-width:1024px) {
+ order: 3;
+ margin-top: 16px;
+ justify-content: flex-start;
+ }
+
+ li:first-child {
+
+ a {
+ display: flex;
+
+ &::after {
+ content: "";
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png") no-repeat center center;
+ background-size: 100%;
+ display: block;
+ min-width: 44.92px;
+ height: 16px;
+
+ @media (min-width: 2500px) {
+ width: 87.73px;
+ height: 31.25px;
+ }
+ }
+
+ span {
+ width: 100%;
+ min-width: 61px;
+ margin-right: 10.12px;
+ }
+ }
+ }
+
+ li:last-child {
+ margin-left: 16px;
+
+ a {
+ display: flex;
+
+ &::after {
+ content: "";
+ background: url(" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png") no-repeat center center;
+ background-size: 100%;
+ display: block;
+ width: 28.66px;
+ height: 15.65px;
+
+ @media(min-width:2500px) {
+ width: 55.98px;
+ height: 30.55px;
+ }
+ }
+
+ span {
+
+ width: 100%;
+ min-width: 61px;
+ margin-right: 10.12px;
+ }
+ }
+
+ }
+
+ a {
+ align-items: center;
+ color: $color-gray2;
+ display: flex;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 10px;
+ line-height: 12px;
+ text-decoration: none;
+
+ @media(min-width:2500px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ span {
+ width: 100%;
+ }
+
+ }
+
+
+
+ }
+
}
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..fa22e0f 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,181 @@
/* _prateleira.scss */
+
+
+.footerCheckout__prateleira {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ li {
+ list-style: none;
+ }
+
+ &__sugestionTitle {
+ font-family: $font-family-secundary;
+ color: $color-black2;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ text-align: center;
+
+ @media (min-width:2500px) {
+ font-size: 48px;
+ line-height: 76px;
+
+ }
+ }
+
+ &__list {
+ display: flex;
+ gap: 16px;
+ margin: 0 0 56px;
+
+ @media (min-width:2500px) {
+ gap: 16.94px;
+ }
+
+ .footerCheckout__card {
+ width: 100%;
+
+ height: 100%;
+
+ @media (min-width:2500px) {
+ min-width: 485.07px;
+ height: 686px;
+
+ }
+
+ @media (min-width:1270px) {
+ min-width: 242px;
+ }
+
+
+
+
+ .footerCheckout__container {
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ height: auto;
+
+ li,
+ a {
+
+ font-family: $font-family;
+ background-color: $color-blue2;
+ color: $color-white;
+ border-radius: 8px;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ padding: 5px;
+
+
+ @media (min-width:2500px) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+
+ &__img {
+ width: 100%;
+ height: auto;
+
+ @media (min-width:2500px) {
+ min-width: 485.07px;
+ height: 485.07px;
+ }
+
+ @media (min-width:370px) and (max-width:376px) {
+ width: 164px;
+
+ }
+
+ @media (max-width:490px) {
+ height: 164px;
+
+ }
+ }
+
+ .footerCheckout__subContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ row-gap: 20px;
+ height: auto;
+ width: 100%;
+
+ &__name {
+ margin: 0;
+ font-family: $font-family;
+ color: $color-black2;
+ border-radius: 8px;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+
+ @media (min-width:2500px) {
+ font-size: 26px;
+ line-height: 35px;
+
+ }
+
+ @media (max-width:490px) {
+ text-align: center;
+
+ }
+ }
+
+
+ &__sku {
+ width: 100%;
+ margin: 0;
+
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: center;
+ gap: 5px;
+ display: flex;
+ align-items: center;
+
+ @media (max-width:1270px) {
+ flex-wrap: wrap;
+ min-height: 61px;
+
+ &__skuName {
+ height: 28px;
+ }
+ }
+ }
+
+ &__link {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 12px 0;
+
+ &:hover,
+ &:active {
+ text-decoration: none;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.none {
+ display: none;
+}
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 37ed550..f8ce165 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -6,6 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
+$color-black2: #000000;
$color-white: #fff;
@@ -14,8 +15,12 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
+$color-gray6: #C4C4C4;
+$color-gray7: #e0e0e0;
$color-blue: #4267b2;
+$color-blue2: #00C8FF;
+;
$color-green: #4caf50;
+
+