+
Powered By
+
+
+
+
+
Developed by
+
+
+
+
`;
+ }
+
+ // API
+ createPrateleira() {
+ fetch(
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+ )
+ .then(function () {
+ console.log("Consumindo API");
+ })
+ .catch(function () {});
+
+ fetch(
+ `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`
+ )
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data[0].items[0].images[0].imageUrl);
+ let content = "";
+
+ for (let i = 0; i < data.length; i++) {
+ content += `
+
+
+
+
+
+
${data[i].productName}
+
+
+
+
+
${data[i].items[0].name}
+
+
+
+
+ VER PRODUTO
+
+
+ `;
+ }
+
+ this.prateleira.innerHTML = content;
+ console.log(content);
+ });
}
onUpdate() {
- //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
+ // Função que 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
+ // sempre que o carrinho estiver vazio o elemento checkoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
@@ -29,11 +198,14 @@ export default class Footer {
});
observer.observe(target, config);
+
+ this.cartChooseProducts.innerHTML = "Continuar Comprando";
}
+
async addCarrossel() {
- const elemento = await waitElement("#my-element");
+ const elemento = await waitElement(".footerCheckout__prateleira");
$(elemento).slick({
- slidesToShow: 4,
+ slidesToShow: 2,
slidesToScroll: 1,
});
}
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 6744524..a7b2ba0 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,14 +8,175 @@ export default class Header {
async init() {
await this.selectors();
- console.log(this.item);
+ this.progressBarHTML();
+ await this.progressbarProgress();
+ this.changeButtonText();
}
async selectors() {
- this.item = await waitElement("#my-element", {
+ this.item = await waitElement("#progressBar", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
+ this.header = await waitElement(".headerCheckout");
+ this.progressBar = await waitElement("#progressBar");
+
+ // CART TITLE
+
+ this.cartChooseProducts = await waitElement("a#cart-choose-products");
+ }
+
+ changeButtonText() {
+ // console.log("Mudando texto do botão");
+ this.cartChooseProducts.innerText = "Continue Comprando";
+ }
+
+ progressBarHTML() {
+ if (this.progressBar && window.innerWidth > 1024) {
+ console.log("Gerando barra de progresso");
+ this.progressBar.innerHTML = `
+
+ `;
+ }
+ if (this.progressBar && window.innerWidth <= 1024) {
+ this.progressBar.innerHTML = "";
+ }
+ }
+
+ 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") {
+ console.log("Cheguei no carrinho");
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
+ "active"
+ );
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-2"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-2"
+ ].classList.remove("active");
+ }
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-3"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-3"
+ ].classList.remove("active");
+ }
+ }
+ } else if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping"
+ ) {
+ console.log("Cheguei nas informações pessoais");
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-1"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-1"
+ ].classList.remove("active");
+ }
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
+ "active"
+ );
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-3"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-3"
+ ].classList.remove("active");
+ }
+ }
+ } else if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+ ) {
+ console.log("Cheguei no pagamento");
+ if (li.children[0].children[0].children["progress-bar-circle-1"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-1"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-1"
+ ].classList.remove("active");
+ }
+ }
+
+ if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+ if (
+ li.children[0].children[0].children[
+ "progress-bar-circle-2"
+ ].classList.contains("active")
+ ) {
+ li.children[0].children[0].children[
+ "progress-bar-circle-2"
+ ].classList.remove("active");
+ }
+ }
+ if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+ li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
+ "active"
+ );
+ }
+ }
+ });
+ }
}
}
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..14b62ba 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -2,4 +2,5 @@
@import "./lib/slick";
@import "./partials/header";
@import "./partials/footer";
+@import "./partials/prateleira";
@import "./checkout/checkout.scss";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..5ebc52d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -114,7 +114,7 @@
color: $color-black;
padding: 0 0 16px;
font-style: normal;
- font-weight: bold;
+ font-weight: 400;
font-size: 14px;
line-height: 16px;
@@ -155,7 +155,7 @@
}
a {
- color: $color-blue;
+ color: #000000;
font-style: normal;
font-weight: normal;
font-size: 12px;
@@ -217,15 +217,17 @@
td.quantity {
align-items: center;
- border: 1px solid $color-gray3;
- border-radius: 0;
+ width: 100px;
+ border: 1px solid #f0f0f0;
+ color: #ffffff;
+ border-radius: 8px;
box-sizing: border-box;
display: flex;
justify-content: center;
margin: 6px auto 0;
max-height: 38px;
max-width: 118px;
- padding: 0;
+ padding: 9px;
width: max-content !important;
@media (max-width: 490px) {
@@ -234,9 +236,9 @@
input {
background-color: $color-white;
- border: 1px solid $color-gray3;
+ border: 0px solid $color-gray3;
border-radius: 0;
- border-width: 0 1px;
+ border-width: 0 0px;
display: block;
max-height: 38px;
margin: 0 !important;
@@ -263,18 +265,29 @@
.icon-minus-sign {
&:before {
content: "-";
- font-size: 16px;
+ font-size: 20px;
+ color: white;
+ background-color: #00c8ff;
+ border-radius: 50%;
+ font-weight: 900;
}
}
.icon-plus-sign {
&:before {
content: "+";
- font-size: 14px;
+ font-size: 20px;
+ color: white;
+ background-color: #00c8ff;
+ border-radius: 50%;
+ font-weight: 900;
}
}
.item-quantity-change {
+ width: 100%;
+ height: 100%;
+
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
bottom: inherit;
@@ -287,6 +300,13 @@
@media (max-width: 490px) {
padding: 0;
}
+
+ .item-quantity-change-decrement {
+ background-color: #00c8ff;
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ }
}
}
@@ -608,7 +628,7 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
- color: $color-blue;
+ color: #000000;
text-decoration: none;
}
}
@@ -731,6 +751,7 @@
}
tfoot {
+ font-weight: 900 !important;
td.info,
td.monetary {
font-style: normal;
@@ -738,6 +759,7 @@
font-size: 18px;
line-height: 21px;
color: $color-black;
+ font-weight: 900;
}
}
}
@@ -782,16 +804,17 @@
.btn-place-order-wrapper {
a {
- background: $color-green;
+ background: #00c8ff;
border: none;
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
+ cursor: pointer;
&:hover {
- background-color: darken($color-green, 5);
+ background-color: darken(#00c8ff, 5);
}
&:after {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..ed2919c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,38 +1,46 @@
.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;
- }
+ &-title {
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ }
- &-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;
+ &-links {
+ .link-choose-products {
+ background: white;
+ border: 1px solid #000000;
+ transition: ease-in 0.22s all;
+ outline: none;
+ font-family: "Tenor Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ color: #000;
+ text-transform: uppercase;
+ cursor: pointer;
+ padding: 16px 65px;
- &:hover {
- background: lighten($color-black, 5);
- }
- }
- }
+ &:hover {
+ background: white;
+ }
+ }
+ }
+
+ &-message {
+ display: none;
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..5ff5b00 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -66,16 +66,24 @@ body {
color: $color-black !important;
}
+.hidden {
+ display: none;
+}
+
+.visible {
+ display: block;
+}
+
#cart-title,
#orderform-title {
- color: $color-gray2;
+ color: #292929;
font-family: $font-family;
- font-weight: 500;
- font-size: 36px;
- line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
@include mq(md, max) {
margin-left: 30px;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..22f05ec 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,12 +1,62 @@
/* _footer.scss */
+
.footerCheckout {
- border-top: none;
color: $color-gray2;
+ width: 100%;
+ bottom: 0;
&__wrapper {
+ border-top: 1px solid black;
+ padding-top: 16px;
+ padding-bottom: 16px;
align-items: center;
display: flex;
justify-content: space-between;
+
+ .container {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ justify-content: space-between;
+ .credit-cards {
+ display: flex;
+
+ .cards-logo {
+ width: 36px;
+ height: 20px;
+ margin: 0;
+ margin-right: 13px;
+ }
+ }
+ }
+
+ .credits {
+ display: flex;
+ gap: 10px;
+ margin: 0;
+ padding: 0;
+ align-items: baseline;
+
+ .credit-text {
+ font-weight: 400;
+ font-size: 9px;
+ line-height: 12px;
+ }
+
+ .logo {
+ width: 44px;
+ height: 16px;
+
+ figure {
+ margin: 0;
+ width: 100%;
+
+ img {
+ height: 16px;
+ }
+ }
+ }
+ }
}
&__address {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..936c773 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,22 +1,115 @@
/* _header.scss */
.headerCheckout {
+ width: 100%;
+ margin: 0;
+ border-bottom: 1px solid black;
.container {
- width: auto !important;
+ width: 100% !important;
}
&__wrapper {
+ width: 80%;
align-items: center;
+ margin: 30px auto;
display: flex;
justify-content: space-between;
+
+ .progress-bar {
+ width: 100%;
+ & ul {
+ display: flex;
+ list-style-type: none;
+ justify-content: space-around;
+ margin: 0;
+
+ & li {
+ .containerLi {
+ & div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+
+ .progress-bar-text {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ }
+
+ .progress-bar-circle-1 {
+ width: 16px;
+ height: 16px;
+ border: 1px solid black;
+ margin: 0;
+ border-radius: 50%;
+ background-color: white;
+ }
+
+ .progress-bar-circle-2 {
+ width: 16px;
+ height: 16px;
+ border: 1px solid black;
+ margin: 0;
+ border-radius: 50%;
+ background-color: white;
+ }
+
+ .progress-bar-circle-3 {
+ width: 16px;
+ height: 16px;
+ border: 1px solid black;
+ margin: 0;
+ border-radius: 50%;
+ background-color: white;
+ }
+
+ .progress-bar-line-1 {
+ border-bottom: 1px solid black;
+ width: 200px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ z-index: -1;
+ }
+
+ .progress-bar-line-2 {
+ border-bottom: 1px solid black;
+ width: 200px;
+ position: absolute;
+ bottom: 0;
+ z-index: -1;
+ }
+ .progress-bar-line-3 {
+ border-bottom: 1px solid black;
+ width: 200px;
+ position: absolute;
+ bottom: 0;
+ right: 50%;
+ z-index: -1;
+ }
+ .active {
+ background-color: black;
+ }
+ }
+ }
+ }
+ }
+ }
}
&__logo {
img {
- height: 52px;
- width: auto;
+ height: 37px;
+ width: 156px;
}
}
&__safeBuy {
+ display: flex;
+ flex-direction: row;
+ img {
+ width: 12px;
+ height: 15px;
+ }
span {
align-items: center;
display: flex;
@@ -27,6 +120,7 @@
font-size: 12px;
line-height: 14px;
color: $color-gray;
+ margin-left: 8px;
}
i {
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..e23400e 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,70 @@
/* _prateleira.scss */
+
+.footerCheckout__prateleira {
+ margin: 43px 132px;
+ display: flex;
+ justify-content: center;
+ color: #000000;
+
+ .prateleira-title {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ text-align: center;
+ }
+ .card-item {
+ margin-right: 16px;
+ width: 242px;
+
+ .item-image {
+ width: 242px;
+ height: 242px;
+ margin: 0;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .item-name {
+ margin-top: 20px;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ text-align: center;
+ }
+
+ .item-sizes {
+ .item-size-name {
+ margin-top: 20px;
+ align-items: center;
+ text-align: center;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ color: white;
+ padding: 6px;
+ background-color: #00c8ff;
+ width: auto;
+ }
+ }
+
+ .item-link {
+ margin-top: 20px;
+ display: block;
+ justify-content: center;
+ background-color: #00c8ff;
+ color: white;
+ text-decoration: none;
+ width: 100%;
+ padding: 12px 0px;
+
+ display: flex;
+ align-items: center;
+ text-align: center;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ }
+ }
+}
diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html
index 258a0d6..a5435cc 100644
--- a/checkout/src/template-checkout/checkout-header.html
+++ b/checkout/src/template-checkout/checkout-header.html
@@ -1,20 +1,25 @@
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
-
- 
- Compra segura
-