diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 21c054b..1693ac5 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -40,50 +40,47 @@ export default class Footer {
observer.observe(target, config);
}
- mostraFooter(){
+ mostraFooter() {
let pratileira = this.footerPratileira;
- // let adress = this.footerAddress;
- // let developedBy = this.footerDevelopedBy;
- // let icon = this.footerStamps;
-
pratileira.innerHTML = `
- Você Também pode gosta:
+
`
fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
- .then((Response)=> Response.json())
- .then(function (data){
- return data.map(function (produto){
+ .then((Response) => Response.json())
+ .then(function (data) {
+ return data.map(function (produto) {
- let li = document.createElement("li")
- li.setAttribute("id", produto.productId)
- li.innerHTML = `
+ let li = document.createElement("li")
+ li.setAttribute("id", produto.productId)
+ li.innerHTML = `
-
- 
-
+ 
+
+ ${produto.productName}
-
- ${produto.items.map((name)=> {return `` })}
-
-
+
+
+
`
- pratileira.children[1].appendChild(li)
- console.log(pratileira)
+ pratileira.children[1].appendChild(li)
+ // console.log(pratileira)
+
+ });
});
- });
-
this.footerStamps.innerHTML = `
@@ -91,39 +88,61 @@ export default class Footer {
+
-
- `
+ `;
+
+
+ this.footerDevelopedBy.innerHTML = `
+
+
+ Power By
+ 
+
+ Developed By
+ 
+
+
+
+
+
+
+
+ `;
}
+
+
async addCarrossel() {
const elemento = await waitElement(".container-carrossel-item");
$(elemento).slick({
+
+ infinite: false,
+ arrows: true,
+ variabreWidth: true,
slidesToShow: 4,
slidesToScroll: 1,
});
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..c533b61 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
+@import "./partials/prateleira";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 88afc52..3ab3252 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,14 +3,15 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
+
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
- width: 94.9734%;
- margin: auto auto 0 auto;
+ width: 100%;
+ // margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..7f4161f 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -1,6 +1,7 @@
/* Slider */
.slick-slider {
+
position: relative;
display: block;
box-sizing: border-box;
@@ -62,6 +63,7 @@
}
}
.slick-slide {
+
float: left;
height: 100%;
min-height: 1px;
@@ -103,12 +105,21 @@
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
+ border: none;
+ background-color: transparent;
+ top: 39%;
z-index: 4;
left: 10px;
}
.slick-next {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+ no-repeat center center;
+ border: none;
+ background-color: transparent;
+ bottom: 57%;
+ right: 27px;
z-index: 4;
- right: 10px;
+
}
.slick-arrow.slick-hidden {
display: none;
@@ -133,4 +144,9 @@
}
}
}
+
+
+
+
+
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index de67b67..a16dde4 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -7,13 +7,39 @@
&__wrapper {
align-items: center;
display: flex;
- justify-content: space-between;
- // position: fixed;
- // bottom: 0;
- // left: 0;
+ // justify-content: space-between;
+ // position: fixed;
+ // bottom: 0;
+ // left: 0;
}
+ .container {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ justify-content: space-between;
+
+ @media (min-width: 1200px) {
+ width: 100%;
+
+ }
+
+ }
+
+ .color-img {
+ background-color: rgb(238, 238, 238);
+
+ }
+
+ &__listImage {
+ // margin: 0 12px;
+ }
+
+
+
&__address {
+ margin: 27px 0 24px 0;
+ width: 269px;
color: $color-gray2;
font-family: $font-family;
font-style: normal;
@@ -21,15 +47,35 @@
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
- max-width: 40%;
+ // max-width: 40%;
@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
}
+
+
+ @media (min-width: 2500px) {
+ width: 537px;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 27px;
+
+
+ text-transform: capitalize;
+
+
+
+ color: #292929;
+
+ }
}
&__stamps {
+ width: 404px;
+ margin: 16px 189px 16px 137px;
align-items: center;
display: flex;
justify-self: center;
@@ -47,18 +93,46 @@
margin: 0 8px;
width: 1px;
}
+
+ @media (min-width: 2500px) {width: 690px;}
+
+
}
&__developedBy {
+ width: 217px;
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
li:last-child {
- margin-left: 16px;
+ // margin-left: 16px;
}
+ .vtex-rigth1 {
+ width: 15%;
+
+ }
+
+ .vtex-rigth2 {
+ width: 8%;
+ }
+
+ .list{
+ font-family: 'Open Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 18px;
+line-height: 25px;
+
+/* Neutras/Preto */
+
+color: #292929;
+
+ }
+
+
a {
align-items: center;
color: $color-gray2;
@@ -73,6 +147,10 @@
span {
margin-right: 8px;
}
+
+ }
+ @media (min-width: 2500px) {
+ width:388px ;
}
}
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 3c79b6a..0ef06cb 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -110,7 +110,7 @@
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
li #progress-bar-circle-3.active {
- border: none;
+ // border: none;
background-color: $color-liPonto;
}
@@ -119,7 +119,7 @@
position: absolute;
left: 26%;
transform: translateY(-50%);
- bottom: 3px;
+ bottom: 4px;
width: 98%;
height: 1px;
border-top: 1px solid $color-liPonto;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..acdd774 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,155 @@
/* _prateleira.scss */
+
+.footerCheckout{
+
+ .container-carrossel-item{
+ margin: 0 132px;
+ }
+.slick-slide{
+ width: 242px;
+ margin: 0 16px 0 0;
+}
+
+.text-foot{
+ display: flex;
+ justify-content: center;
+ margin: 0 0 20px 0;
+ font-family: 'Tenor Sans';
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ /* identical to box height, or 158% */
+
+ text-align: center;
+
+ color: #000000;
+
+ @media (min-width: 2500px) {
+
+ font-family: 'Tenor Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 48px;
+line-height: 76px;
+/* identical to box height, or 158% */
+
+text-align: center;
+
+color: #000000;
+
+ }
+}
+
+.container-tamanho-cores{
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+
+
+ .tamanho{
+ // width: 26px;
+ // background: #00C8FF;
+ // border-radius: 8px;
+ margin-left: 5px;
+ background: #00C8FF;
+ border-radius: 8px;
+ min-width: 9.3%;
+ padding: 4px;
+ justify-content: center;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #FFFFFF;
+ text-decoration: none;
+
+ @media (min-width: 2500px) {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 35px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+
+ color: #FFFFFF;
+
+
+ }
+ }
+
+}
+
+.numeProduct{
+ margin: 20px 0;
+ display: flex;
+ justify-content: center;
+
+ @media (min-width: 2500px) {
+ font-family: 'Open Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 26px;
+line-height: 35px;
+text-align: center;
+
+color: #000000;
+ }
+}
+
+
+
+
+.bottons {
+ margin-bottom: 56px;
+// display: flex;
+// justify-content: center;
+ width: 100%;
+ height: 42px;
+ background: #00c8ff;
+ border: none;
+ border-radius: 8px;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #FFFFFF;
+
+ @media (min-width: 2500px) {font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 26px;
+ line-height: 35px;
+
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+
+ color: #FFFFFF;}
+
+
+
+}
+
+}
+
+
+
+
