josecarloslins/m3-academy-template-checkout-josecarloslins
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Finalização das alterações pagina 1 cart

Browse Source
This commit is contained in:
José Carlos Lins 2022-12-11 17:30:54 -03:00
parent 6c00ea59fc
commit 5f98446bfa
7 changed files with 10036 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,47 +7,100 @@ export default class Footer {
async init() {
await this.selectors();
await this.addImagesFooter();
await this.addHTMLFooter();
await this.onUpdate();
}
async selectors() {
//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.checkoutPayments = await waitElement(".footerCheckout__stamps");
this.developBy = await waitElement(".footerCheckout__developedBy");
this.titleMyCart = await waitElement("#cart-title");
// this.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutVazio = document.querySelector(".empty-cart-content");
this.checkoutPayments = document.querySelector(".footerCheckout__stamps");
this.developBy = document.querySelector(".footerCheckout__developedBy");
this.titleMyCart = document.querySelector("#cart-title");
// this.pratileira = await waitElement(".footerCheckout__prateleira");
this.pratileira = document.querySelector(".footerCheckout__prateleira");
}
async 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 sliderVisible = Boolean;
let target = this.checkoutVazio;
let titleCart = this.titleMyCart;
let pratileira = this.pratileira;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
let observer = new MutationObserver(mCallback);
function mCallback(mutations) {
mutations.forEach((mutation) => {
if (target.style.display === "block") {
titleCart.classList.add("cartTitleInvisible");
titleCart.classList.add("elementInvisible");
pratileira.classList.add("elementInvisible");
sliderVisible = false;
console.log("oioioi");
} else {
titleCart.classList.remove("cartTitleInvisible");
titleCart.classList.remove("elementInvisible");
pratileira.classList.remove("elementInvisible");
sliderVisible = true;
}
});
});
}
observer.observe(target, config);
if (sliderVisible) {
if (target.style.display === "none") {
await this.api();
}
}
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = document.querySelector(".sliderPratileira");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
}
async addImagesFooter() {
async api() {
const url =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
const dados = await fetch(url);
const dataApi = await dados.json();
this.pratileira.innerHTML = `
<p class="titlePratileira">Você também pode gostar</p>
<ul class="sliderPratileira">
${dataApi.map((dataItem) => {
return `<li class="card-list-pratileira">
<figure>
<img class="image-card-pratileira" src="${
dataItem.items[0].images[0].imageUrl
}" alt="${dataItem.productName}" />
<h4 class="title-item-pratileira">${dataItem.productName}</h4>
</figure>
<ol class="wrapper-list-variables">
${dataItem.items.map((variableItem) => {
return `<li class="variable-pratileira">${variableItem.name}</li>`;
})}
</ol>
<button class="btn-pratileira">Ver Produto</button>
</li>`;
})}
</ul>
`;
this.addCarrossel();
}
async addHTMLFooter() {
this.checkoutPayments.children[0].innerHTML = `
<div class="footerCheckout__payments">
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />

2
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -65,6 +65,6 @@
margin: 0 !important;
}
.cartTitleInvisible {
.elementInvisible {
display: none !important;
}

6
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -9,11 +9,9 @@ html {
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
padding: 16px 0;
border-top: 1px solid #000000;
}
footer .footerCheckout__prateleira,
header {
width: 100%;
border-bottom: 1px solid #000000;

7
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -99,6 +99,9 @@
.slick-arrow {
font-size: 0;
position: absolute;
border: 0;
width: 13.64px;
height: 29.47px;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
@ -107,8 +110,10 @@
left: 10px;
}
.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: 18px;
}
.slick-arrow.slick-hidden {
display: none;

118
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,6 +1,5 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
&__wrapper {
@ -13,8 +12,9 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
width: 94.9734%;
margin: auto auto 0 auto;
padding: 16px 0;
&::before,
&::after {
@ -109,4 +109,116 @@
height: 15.65px;
}
}
&__prateleira {
padding-bottom: 56px;
.titlePratileira {
font-family: $font-family-secundary;
font-weight: 400;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: $color-black-neutra;
}
.sliderPratileira {
width: 80%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
.card-list-pratileira {
list-style-type: none;
min-width: 242px;
height: 390px;
display: flex;
align-items: center;
flex-direction: column;
figure {
width: 100%;
margin: 0;
.image-card-pratileira {
width: 100%;
height: 242px;
}
.title-item-pratileira {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: $color-black-neutra;
margin: 20px 0;
}
}
.wrapper-list-variables {
list-style-type: none;
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
.variable-pratileira {
padding: 5px;
margin-right: 5px;
background: $color-blue-light;
border-radius: 8px;
color: $color-white;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
}
.btn-pratileira {
width: 100%;
background: $color-blue-light;
border: 0;
border-radius: 8px;
padding: 12px 0;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
}
font-size: 0;
.wrapper-list-variables {
.variable-pratileira {
font-size: 13px;
}
}
}
.slick-track {
display: flex;
// left: 13.5%;
// width: 1016px;
}
.slick-slide {
margin-right: 16px;
}
}
}

20
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jquery": "^3.6.0",
"m3-utils": "^0.1.0",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4"
},
"devDependencies": {
@ -3484,6 +3485,8 @@
},
"checkout/node_modules/core-util-is": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"license": "MIT"
},
"checkout/node_modules/cosmiconfig": {
@ -4844,6 +4847,8 @@
},
"checkout/node_modules/get-intrinsic": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.1",
@ -6294,6 +6299,8 @@
},
"checkout/node_modules/micromatch": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"license": "MIT",
"dependencies": {
"braces": "^3.0.2",
@ -6305,6 +6312,8 @@
},
"checkout/node_modules/micromatch/node_modules/braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"license": "MIT",
"dependencies": {
"fill-range": "^7.0.1"
@ -19345,6 +19354,7 @@
"m3-utils": "^0.1.0",
"prettier": "^2.3.2",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1",
"webpack-merge": "^5.8.0"
@ -21672,7 +21682,9 @@
}
},
"core-util-is": {
"version": "1.0.3"
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
},
"cosmiconfig": {
"version": "7.1.0",
@ -22645,6 +22657,8 @@
},
"get-intrinsic": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
"requires": {
"function-bind": "^1.1.1",
"has": "^1.0.3",
@ -23679,6 +23693,8 @@
},
"micromatch": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"requires": {
"braces": "^3.0.2",
"picomatch": "^2.3.1"
@ -23686,6 +23702,8 @@
"dependencies": {
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"requires": {
"fill-range": "^7.0.1"
}

9828
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff