diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 0648800..a2b0ade 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -19,13 +19,18 @@ 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.cartTitulo = await waitElement("#cart-title");
+ this.titleSlick = await waitElement(".transactions-container");
+
this.list = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1000,
});
+
this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
+ this.cartTitle = await waitElement("#cart-title");
}
fetchApiData() {
@@ -47,7 +52,6 @@ export default class Footer {
data.map((item) => {
let colors = "";
for (let i = 0; i < item.items.length; i++) {
- console.log(colors);
colors += `${item.items[i].name}
`;
}
const li = document.createElement("li");
@@ -186,10 +190,14 @@ export default class Footer {
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let lista = this.list;
+ let cartTitle = this.cartTitulo;
+ let slickTitle = this.titleSlick;
+
if (target.style.display == "none" && window.location.hash == "#/cart") {
lista.style.display = "block";
this.fetchApiData();
} else {
+ this.cartTitulo.style.display = "none";
lista.style.display = "none";
}
let config = { childList: true, attributes: true };
@@ -200,7 +208,11 @@ export default class Footer {
mutations.forEach(function (mutation) {
if (target.style.display != "none") {
lista.style.display = "none";
- } else lista.style.display = "block";
+ cartTitle.style.display = "none";
+ } else {
+ cartTitle.style.display = "block";
+ lista.style.display = "block";
+ }
});
});
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index ad07941..94337c1 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -20,7 +20,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
-
+
@@ -37,7 +37,7 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
- if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
+ if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
"active"
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..ded5ba5 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -5,7 +5,8 @@
}
.cart-template {
- font-family: $font-family;
+ font-family: $font-family-secundary;
+
@include mq(md, max) {
padding: 0 0;
}
@@ -13,7 +14,7 @@
display: none;
}
.cart {
- border: 3px solid $color-gray3;
+ border: 1px solid $gray-100;
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
@@ -32,7 +33,7 @@
font-family: $font-family;
width: 100%;
h2 {
- background: $color-white;
+ background: $white;
border: none;
color: #303030;
font-size: 14px;
@@ -48,7 +49,7 @@
}
.cart {
- border: 1px solid $color-gray4;
+ // border: 1px solid $gray-200;
ul li {
border-top: none;
@@ -63,6 +64,9 @@
.shipping-date,
.price {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
color: #7d7d7d;
}
}
@@ -70,7 +74,7 @@
.summary-template-holder {
border-top: none;
- background: $color-white;
+ background: $white;
}
#go-to-cart-button a {
@@ -85,24 +89,17 @@
}
#payment-data-submit {
- background: $color-black;
+ background: $black;
border: none;
border-radius: 0;
- color: $color-white;
+ color: $white;
outline: none;
transition: all 0.2s linear;
- &:hover {
- background: lighten($color-black, 5);
- }
-
- &:active {
- background: darken($color-black, 5);
- }
}
}
.lookatme {
- background-color: $color-white;
+ background-color: $white;
}
.cart-items {
@@ -111,10 +108,11 @@
}
th {
- color: $color-black;
+ // text-align: initial;
+ color: $black;
padding: 0 0 16px;
font-style: normal;
- font-weight: bold;
+ font-weight: 400;
font-size: 14px;
line-height: 16px;
@@ -155,18 +153,13 @@
}
a {
- color: $color-blue;
+ color: $black;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
transition: ease-in 0.22s all;
- &:hover {
- color: darken($color-blue, 10);
- text-decoration: none;
- }
-
@media (max-width: 490px) {
margin-left: 23px;
}
@@ -179,7 +172,7 @@
}
td.shipping-date {
- color: $color-gray2;
+ color: $gray-150;
font-size: 12px;
line-height: 14px;
@@ -200,7 +193,7 @@
}
span.list-price {
- color: $color-gray2;
+ color: $gray-150;
font-size: 12px;
line-height: 14px;
text-decoration-line: line-through;
@@ -218,7 +211,7 @@
td.quantity {
align-items: center;
border: 1px solid $color-gray3;
- border-radius: 0;
+ border-radius: 8px;
box-sizing: border-box;
display: flex;
justify-content: center;
@@ -233,8 +226,8 @@
}
input {
- background-color: $color-white;
- border: 1px solid $color-gray3;
+ background-color: $white;
+ border: 1px solid $white;
border-radius: 0;
border-width: 0 1px;
display: block;
@@ -242,7 +235,7 @@
margin: 0 !important;
padding: 8px 0;
width: 38px;
- color: $color-gray2;
+ color: $black;
box-shadow: none;
@include mq(lg, max) {
@@ -253,7 +246,7 @@
.icon-plus-sign,
.icon-minus-sign {
&::before {
- color: $color-black;
+ color: $black;
display: block;
font-weight: 500;
padding: 1px 12px;
@@ -262,14 +255,14 @@
.icon-minus-sign {
&:before {
- content: "-";
+ color: $blue;
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
- content: "+";
+ color: $blue;
font-size: 14px;
}
}
@@ -297,10 +290,10 @@
}
span {
font-style: normal;
- font-weight: normal;
+ font-weight: 700;
font-size: 14px;
line-height: 16px;
- color: $color-black;
+ color: $gray-500;
}
}
@@ -315,7 +308,7 @@
top: 0;
}
.icon::before {
- color: $color-gray4;
+ color: $gray-200;
font-size: 15px;
@include mq(md, max) {
@@ -326,7 +319,7 @@
.item-unavailable-message {
background-color: #d8c8ac;
- color: $color-white;
+ color: $white;
.icon-warning-sign {
color: #bb4f4f;
@@ -352,11 +345,12 @@
.srp-main-title {
margin: 32px 0 12px;
+ font-family: "Open Sans";
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 24px;
- line-height: 28px;
- color: $color-gray2;
+ line-height: 33px;
+ color: $black;
@include mq(md, max) {
margin-top: 0;
@@ -364,32 +358,26 @@
}
.srp-description {
- color: $color-gray2;
+ color: $gray-150;
+ font-family: "Open Sans";
font-size: 12px;
line-height: 18px;
margin: 0 0 12px;
}
button.shp-open-options {
- background-color: $color-gray5;
+ background-color: $gray-50;
border: none;
border-radius: 5px;
- color: $color-gray2;
+ color: $black;
font-size: 16px;
letter-spacing: 0.05em;
+ font-family: "Open Sans";
line-height: 19px;
font-weight: 500;
outline: none;
padding: 12px 40px;
transition: all 0.2s linear;
-
- &:hover {
- background-color: lighten($color-gray5, 5);
- }
-
- &:active {
- background-color: darken($color-gray5, 5);
- }
}
}
@@ -405,10 +393,10 @@
}
.srp-pickup-my-location__button {
- background-color: $color-black;
+ background-color: $black;
border: none;
border-radius: 5px;
- color: $color-white;
+ color: $white;
outline: none;
width: 100%;
@@ -417,14 +405,6 @@
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
-
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
}
}
@@ -432,7 +412,7 @@
margin: 0 0 34px;
&__wrapper {
- background-color: $color-white;
+ background-color: $white;
border-radius: 100px;
width: 100%;
font-family: $font-family;
@@ -469,7 +449,7 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
- color: $color-black;
+ color: $black;
margin-bottom: 12px;
}
@@ -485,10 +465,10 @@
}
& ~ button {
- background-color: $color-black;
+ background-color: $black;
border: none;
border-radius: 5px;
- color: $color-white;
+ color: $white;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
@@ -499,14 +479,6 @@
transition: all 0.2s linear;
width: 96px;
text-transform: uppercase;
-
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
}
small a {
@@ -542,14 +514,10 @@
color: #303030;
font-size: 16px;
font-weight: 500;
-
- &:hover {
- text-decoration: underline;
- }
}
.srp-shipping-current-single {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
border-radius: 0;
color: #303030;
margin: 16px 0 0;
@@ -561,11 +529,11 @@
}
.srp-delivery-select {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
}
.srp-delivery-select-container {
- border: 1px solid $color-gray4;
+ border: 1px solid $gray-200;
border-radius: 0;
.srp-shipping-current-many {
@@ -583,7 +551,7 @@
}
&__arrow svg {
- fill: $color-gray4;
+ fill: $gray-200;
}
}
}
@@ -597,18 +565,14 @@
.coupon-data {
#cart-link-coupon-add {
text-decoration: none;
- &:hover {
- text-decoration: underline;
- cursor: pointer;
- }
}
span {
- font-family: $font-family;
+ font-family: $font-family-secundary;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-blue;
+ color: $black;
text-decoration: none;
}
}
@@ -630,19 +594,23 @@
}
.coupon-label label {
- margin-bottom: 12px;
- font-family: $font-family;
+ text-align: left;
+ font-family: "Tenor Sans";
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-gray2;
- cursor: none;
+
+ color: $gray-150;
+
+ cursor: default;
}
.coupon-fields {
margin-bottom: 32px;
+ text-align: left;
+
@include mq(sm, max) {
span {
display: flex;
@@ -660,43 +628,47 @@
border: 2px solid $color-gray3;
border-radius: 5px;
box-shadow: none;
- color: $color-gray4;
+ color: $gray-200;
font-size: 12px;
height: 34px;
padding: 0 12px;
- max-width: 160px;
+ width: 204.32px;
@include mq(sm, max) {
max-width: 100%;
width: 100%;
}
+ &::placeholder {
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+
+ text-align: left;
+
+ color: $gray-125;
+ }
}
button {
- background: $color-black;
+ background: $blue;
border: none;
border-radius: 5px;
- color: $color-white;
+ color: $black;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
margin-left: 6px;
outline: none;
transition: all 0.2s linear;
- width: 94px;
+ width: 102px;
text-transform: uppercase;
+ text-shadow: none;
@include mq(md, max) {
width: 138px;
}
-
- &:hover {
- background-color: lighten($color-black, 5);
- }
-
- &:active {
- background-color: darken($color-black, 5);
- }
}
}
}
@@ -716,7 +688,7 @@
font-weight: normal;
font-size: 14px;
line-height: 16px;
- color: $color-black;
+ color: $gray-500;
padding: 12px 0;
}
@@ -733,11 +705,12 @@
tfoot {
td.info,
td.monetary {
+ font-family: $font-family;
font-style: normal;
- font-weight: normal;
+ font-weight: 700;
font-size: 18px;
- line-height: 21px;
- color: $color-black;
+ line-height: 25px;
+ color: $gray-500;
}
}
}
@@ -771,39 +744,36 @@
}
a {
- font-family: $font-family;
+ font-family: $font-family-secundary;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 12px;
line-height: 14px;
- color: $color-blue;
+ color: $black;
}
}
.btn-place-order-wrapper {
a {
- background: $color-green;
+ background: $blue;
border: none;
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
-
- &:hover {
- background-color: darken($color-green, 5);
- }
+ cursor: pointer;
&:after {
content: "finalizar compra";
font-family: $font-family;
- font-weight: 500;
- font-size: 13px;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
letter-spacing: 0.05em;
- color: $color-white;
+ color: $black;
text-transform: uppercase;
vertical-align: middle;
- line-height: 19px;
text-shadow: none;
}
}