diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 733d0c8..ec471f5 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -9,6 +9,7 @@ export default class Footer {
await this.selectors();
this.catalogoApi();
this.footerBanner();
+ this.footerDev();
// this.onUpdate();
}
@@ -62,10 +63,10 @@ export default class Footer {
`;
}
- async catalogoApi() {
+ catalogoApi() {
this.addCarrossel();
this.footerPrateleira.innerHTML = `
-
Você também pode gostar
+ Você também pode gostar:
`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
@@ -81,7 +82,9 @@ export default class Footer {
const image = product.items[0].images[0].imageUrl;
novaUl.innerHTML += `
-
+
${name}
${product.items
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 7b25d5b..b2431d2 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,7 +2,77 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
- width: 100%;
+ &__prateleira {
+ .card-title {
+ font-weight: 400;
+ font-size: 24px;
+ margin-bottom: 20px;
+ line-height: 38px;
+ color: $color-black2;
+ font-family: font-family-secundary;
+ text-align: center;
+ }
+
+ .product-name {
+ font-family: $font-family;
+ font-style: normal;
+ margin-bottom: 20px;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ text-align: center;
+ color: $color-black2;
+ margin-top: 20px;
+ }
+
+ figure {
+ width: 97.19%;
+ margin: 5px;
+ }
+
+ .product-image {
+ width: 97.19%;
+ }
+
+ .size-items {
+ list-style-type: none;
+ justify-content: center;
+ gap: 5px;
+ display: flex;
+ text-transform: uppercase;
+ margin: 0;
+ }
+
+ .size-cards {
+ margin-bottom: 20px;
+ background-color: $color-blue2;
+ border-radius: 8px;
+ color: $color-white;
+ padding: 4.78px;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ /* identical to box height */
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ }
+
+ a.product-link {
+ align-items: center;
+ justify-content: center;
+ height: 42px;
+ background: #00c8ff;
+ text-align: center;
+ border-radius: 8px;
+ width: 97%;
+ color: white;
+ display: flex;
+ }
+ }
&__wrapper {
align-items: center;
@@ -12,7 +82,6 @@
.container {
display: flex;
- height: 65px
justify-content: space-between;
}
}