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

feature/footer #2

Merged
ednabarboza merged 4 commits from feature/footer into development 2022-12-19 02:26:44 +00:00
Conversation 0 Commits 4 Files Changed 12 +9413 -62
12 changed files with 9413 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -32,9 +32,7 @@ export default class CheckoutUI {
toggleFooterDropdown(event) { toggleFooterDropdown(event) {
event.target.classList.toggle("closed"); event.target.classList.toggle("closed");
event.target.nextElementSibling.classList.toggle( event.target.nextElementSibling.classList.toggle("dropdown__content--closed");
"dropdown__content--closed"
);
} }
init() { init() {
@ -56,14 +54,7 @@ export default class CheckoutUI {
resizeImages() { resizeImages() {
$(".product-image img").each((i, el) => { $(".product-image img").each((i, el) => {
const $el = $(el); const $el = $(el);
$el.attr( $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
"src",
alterarTamanhoImagemSrcVtex(
$el.attr("src"),
this.width,
this.height
)
);
}); });
} }
} }

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

@ -7,6 +7,8 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.footerCheckoutInnerHTML();
this.footerCheckoutDevelopedInnerHTML();
// this.onUpdate(); // this.onUpdate();
} }
@ -14,6 +16,36 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.footerCheckout = document.querySelector(".footerCheckout__stamps");
this.footerCheckoutDeveloped = document.querySelector(".footerCheckout__developedBy");
}
async footerCheckoutInnerHTML() {
this.footerCheckout.innerHTML = `
<div class = "footerCheckout__stamps__div_wrapper">
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"/>
<p class= "pipe"></p>
<img class = "images_footer_vtexPCIM" src = "https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>
</div>
`;
}
async footerCheckoutDevelopedInnerHTML() {
this.footerCheckoutDeveloped.innerHTML = `
<div class = "footerCheckout__stamps__div_wrapperDeveloper">
<p class = "footer_description_1">Powered by</p>
<img class = "images_footer_developed" src = "https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/>
<p class = "footer_description_2">Developed by</p>
<img class = "images_footer_developed" src = "https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/>
</div>
`;
} }
onUpdate() { onUpdate() {

43
checkout/src/arquivos/js/components/Header.js
View File

@ -9,12 +9,18 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarInnerHTML(); this.progressBarInnerHTML();
await this.removeCartTitle();
await this.alterarCartChooseProducts();
await this.alterarEmptyCartTitle();
await this.api();
} }
async selectors() { async selectors() {
this.header = await waitElement(".headerCheckout"); this.header = await waitElement(".headerCheckout");
this.progressBar = document.querySelector(".progress-bar"); this.progressBar = document.querySelector(".progress-bar");
this.cartChooseProducts = document.querySelector("#cart-choose-products");
this.emptyCartTitle = document.querySelector(".empty-cart-title");
} }
async progressBarInnerHTML() { async progressBarInnerHTML() {
@ -60,14 +66,31 @@ export default class Header {
`; `;
} }
// async progressBarProgress(){ async removeCartTitle() {
// if(this.progressBar && window.innerWidth > 1024){ this.ctitle = await waitElement("#cart-title", {
// const progressBarLista = document.querySelectorAll("#progressBar ul li"); timeout: 5000,
// progressBarLista.forEach((li) => { interval: 1000,
// if(window.location.href) === "https://m3academy.myvtex.com/checkout/#/cart"{ });
this.ctitle.style.display = "none";
// } }
// })
// } async alterarCartChooseProducts() {
// } this.cartChooseProducts.innerHTML = "Continuar comprando";
}
async alterarEmptyCartTitle() {
this.emptyCartTitle.innerHTML = "Seu carrinho está vazio";
}
async api() {
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((Response) => {
return Response.json();
})
.then((data) => {
console.log(data);
});
}
} }

9
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -178,6 +178,11 @@
} }
} }
th {
font-family: "Tenor Sans", sans-serif;
font-weight: 400;
}
td.shipping-date { td.shipping-date {
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 12px;
@ -190,6 +195,7 @@
.product-price { .product-price {
min-width: 100px; min-width: 100px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -356,7 +362,8 @@
font-weight: normal; font-weight: normal;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $color-gray2; color: $color-black-100;
// color: $color-gray2;
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;

5
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -4,8 +4,13 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
min-height: 100%;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
} }
} }
.container-main {
min-height: unset;
}

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

@ -9,25 +9,36 @@
} }
} }
&-message {
display: none;
}
&-title { &-title {
font-size: 20px; font-size: 20px;
text-transform: uppercase;
} }
&-links { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; // background: $color-black;
border: none; background: $color-white;
border-radius: 5px; // border: none;
border: 1px solid $color-black-100;
border-radius: 0;
// border-radius: 5px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; // font-family: $font-family;
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; // font-weight: 500;
font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; // color: $color-white;
color: $color-black-100;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {

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

@ -1,15 +1,24 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; border-top: 1px solid $color-black-100;
color: $color-gray2; color: $color-gray2;
padding: 16px 0;
// &__prateleira {
// border-top: 1px solid #e5e5e5;
// width: 100%;
// margin-bottom: 22px;
// }
&__wrapper {
display: flex;
width: 100% !important;
// margin: 0 0 0 0 !important;
}
.container { .container {
display: flex; display: flex;
} width: 100%;
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between; justify-content: space-between;
} }
@ -22,6 +31,8 @@
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
display: flex;
align-items: center;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
@ -47,6 +58,51 @@
margin: 0 8px; margin: 0 8px;
width: 1px; width: 1px;
} }
&__div_wrapper {
width: 404px;
height: 33px;
.images_footer {
height: 22px;
}
.pipe {
display: inline;
border-left: 1px solid $color-gray6;
padding-left: 10px;
}
.images_footer_vtexPCIM {
height: 33px;
}
}
&__div_wrapperDeveloper {
display: flex;
.images_footer_developed {
height: 16px;
}
.footer_description_1,
.footer_description_2 {
font-family: Open Sans;
font-size: 9px;
font-weight: 400;
line-height: 12px;
letter-spacing: 0em;
text-align: left;
}
.footer_description_1 {
padding-right: 10px;
}
.footer_description_2 {
padding: 0 10px;
}
}
} }
&__developedBy { &__developedBy {

4
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,8 +1,10 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
margin: 29px 130px; border-bottom: 1px solid $color-black-100;
width: 100%;
.container { .container {
width: auto !important; width: auto !important;
margin: 30px 130px;
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -15,6 +15,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4;
$color-blue: #4267b2; $color-blue: #4267b2;

23
package-lock.json generated
View File

@ -17,7 +17,8 @@
"dependencies": { "dependencies": {
"@commitlint/cli": "^12.0.1", "@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1", "@commitlint/config-conventional": "^12.0.1",
"slick-carousel": "^1.8.1" "slick-carousel": "^1.8.1",
"yarn": "^1.22.19"
}, },
"devDependencies": { "devDependencies": {
"concurrently": "^6.0.0", "concurrently": "^6.0.0",
@ -45,6 +46,7 @@
"jquery": "^3.6.0", "jquery": "^3.6.0",
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4" "terser-webpack-plugin": "^5.1.4"
}, },
"devDependencies": { "devDependencies": {
@ -17668,6 +17670,19 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/yarn": {
"version": "1.22.19",
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
"hasInstallScript": true,
"bin": {
"yarn": "bin/yarn.js",
"yarnpkg": "bin/yarn.js"
},
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/yocto-queue": { "node_modules/yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@ -19345,6 +19360,7 @@
"m3-utils": "^0.1.0", "m3-utils": "^0.1.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"sass": "^1.38.1", "sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4", "terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1", "webpack": "^5.51.1",
"webpack-merge": "^5.8.0" "webpack-merge": "^5.8.0"
@ -30672,6 +30688,11 @@
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
"integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==" "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
}, },
"yarn": {
"version": "1.22.19",
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ=="
},
"yocto-queue": { "yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

3
package.json
View File

@ -35,6 +35,7 @@
"dependencies": { "dependencies": {
"@commitlint/cli": "^12.0.1", "@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1", "@commitlint/config-conventional": "^12.0.1",
"slick-carousel": "^1.8.1" "slick-carousel": "^1.8.1",
"yarn": "^1.22.19"
} }
} }

9201
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff