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) {
event.target.classList.toggle("closed");
event.target.nextElementSibling.classList.toggle(
"dropdown__content--closed"
);
event.target.nextElementSibling.classList.toggle("dropdown__content--closed");
}
init() {
@ -56,14 +54,7 @@ export default class CheckoutUI {
resizeImages() {
$(".product-image img").each((i, el) => {
const $el = $(el);
$el.attr(
"src",
alterarTamanhoImagemSrcVtex(
$el.attr("src"),
this.width,
this.height
)
);
$el.attr("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() {
await this.selectors();
this.footerCheckoutInnerHTML();
this.footerCheckoutDevelopedInnerHTML();
// this.onUpdate();
}
@ -14,6 +16,36 @@ export default class Footer {
//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.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() {

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

@ -9,12 +9,18 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarInnerHTML();
await this.removeCartTitle();
await this.alterarCartChooseProducts();
await this.alterarEmptyCartTitle();
await this.api();
}
async selectors() {
this.header = await waitElement(".headerCheckout");
this.progressBar = document.querySelector(".progress-bar");
this.cartChooseProducts = document.querySelector("#cart-choose-products");
this.emptyCartTitle = document.querySelector(".empty-cart-title");
}
async progressBarInnerHTML() {
@ -60,14 +66,31 @@ export default class Header {
`;
}
// async progressBarProgress(){
// if(this.progressBar && window.innerWidth > 1024){
// const progressBarLista = document.querySelectorAll("#progressBar ul li");
// progressBarLista.forEach((li) => {
// if(window.location.href) === "https://m3academy.myvtex.com/checkout/#/cart"{
async removeCartTitle() {
this.ctitle = await waitElement("#cart-title", {
timeout: 5000,
interval: 1000,
});
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 {
color: $color-gray2;
font-size: 12px;
@ -190,6 +195,7 @@
.product-price {
min-width: 100px;
@include mq(md, max) {
min-width: 78px;
}
@ -356,7 +362,8 @@
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: $color-gray2;
color: $color-black-100;
// color: $color-gray2;
@include mq(md, max) {
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-right: 0;
float: right;
min-height: 100%;
}
.orderform-template-holder {
width: 66.1132%;
}
}
.container-main {
min-height: unset;
}

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

@ -1,38 +1,49 @@
.empty-cart {
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
font-family: $font-family;
&-content {
color: $color-black;
text-align: center;
@include mq(md, max) {
padding: 0 16px;
}
}
@include mq(md, max) {
padding: 0 16px;
}
}
&-title {
font-size: 20px;
}
&-message {
display: none;
}
&-links {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase;
&-title {
font-size: 20px;
text-transform: uppercase;
}
&:hover {
background: lighten($color-black, 5);
}
}
}
&-links {
.link-choose-products {
// background: $color-black;
background: $color-white;
// border: none;
border: 1px solid $color-black-100;
border-radius: 0;
// border-radius: 5px;
transition: ease-in 0.22s all;
outline: none;
// font-family: $font-family;
font-family: $font-family-secundary;
font-style: normal;
// font-weight: 500;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
// color: $color-white;
color: $color-black-100;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
}
}
}
}

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

@ -1,15 +1,24 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
border-top: 1px solid $color-black-100;
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 {
display: flex;
}
&__wrapper {
align-items: center;
display: flex;
width: 100%;
justify-content: space-between;
}
@ -22,6 +31,8 @@
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
display: flex;
align-items: center;
@include mq(md, max) {
margin-bottom: 24px;
@ -47,6 +58,51 @@
margin: 0 8px;
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 {

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

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

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

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

23
package-lock.json generated
View File

@ -17,7 +17,8 @@
"dependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"slick-carousel": "^1.8.1"
"slick-carousel": "^1.8.1",
"yarn": "^1.22.19"
},
"devDependencies": {
"concurrently": "^6.0.0",
@ -45,6 +46,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": {
@ -17668,6 +17670,19 @@
"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": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@ -19345,6 +19360,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"
@ -30672,6 +30688,11 @@
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
"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": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

3
package.json
View File

@ -35,6 +35,7 @@
"dependencies": {
"@commitlint/cli": "^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