diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ec471f5..17f986d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,38 +7,56 @@ export default class Footer {
async init() {
await this.selectors();
- this.catalogoApi();
+ await this.catalogoApi();
this.footerBanner();
this.footerDev();
- // this.onUpdate();
+ 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.footerPrateleira = document.querySelector(".footerCheckout__prateleira");
+ this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+ this.checkoutPagamento = await waitElement(".cart-template");
this.footerLogo = document.querySelector(".footerCheckout__stamps");
+ this.paymentText = document.querySelector(".notification");
this.footerDeveloped = document.querySelector(".footerCheckout__developedBy");
}
footerBanner() {
- this.footerLogo.innerHTML = `
-
-
-
-
-
-
`;
@@ -49,22 +67,25 @@ export default class Footer {
Powered By
- @TODO: vtex icon
+
+
Developed By
- @TODO: m3 icon
+
+
`;
}
- catalogoApi() {
- this.addCarrossel();
+ async catalogoApi() {
this.footerPrateleira.innerHTML = `
Você também pode gostar:
`;
@@ -76,14 +97,11 @@ export default class Footer {
const novaUl = document.querySelector(".products-list");
const name = product.productName;
const link = product.link;
- for (let i = 0; i < product.items.length; i++) {
- product.items.name;
- }
const image = product.items[0].images[0].imageUrl;
novaUl.innerHTML += `
-
${name}
@@ -101,9 +119,10 @@ export default class Footer {
});
});
});
+ this.addCarrossel();
}
- onUpdate() {
+ /*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
@@ -111,17 +130,81 @@ export default class Footer {
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
- console.log(mutation.type);
+ if (carrinhoEstaVazio()) {
+ target.style.display = "none";
+ }
});
});
observer.observe(target, config);
- }
- async addCarrossel() {
- const elemento = await waitElement(".products-list");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
+ }*/
+
+ 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 target = this.checkoutVazio;
+ let myCart = document.querySelector("#cart-title");
+ let observer = new MutationObserver((mutations) => {
+ mutations.forEach(() => {
+ if (target.style.display == "none") {
+ this.footerPrateleira.classList.remove("desable");
+ myCart.classList.remove("desable");
+ this.catalogoApi();
+ } else {
+ this.footerPrateleira.classList.add("desable");
+ myCart.classList.add("desable");
+ this.footerPrateleira.innerHTML = "";
+ }
+ });
+ /*window.addEventListener("hashchange", () => {
+ if ((window.location.hash = "#/cart")) {
+ if (target.style.display == "none") {
+ this.footerPrateleira.classList.remove("desable");
+ this.catalogoApi();
+ }
+ } else {
+ this.footerPrateleira.classList.add("desable");
+ }
+ });*/
+ });
+
+ observer.observe(this.checkoutVazio, {
+ attributes: true,
});
}
+
+ async addCarrossel() {
+ const elemento = await waitElement(".products-list");
+ setTimeout(() => {
+ $(elemento).slick({
+ slidesToShow: 4,
+ slidesToScroll: 1,
+ responsive: [
+ {
+ breakpoint: 1025,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ },
+ },
+
+ {
+ breakpoint: 601,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ },
+ },
+ ],
+ });
+ }, 1500);
+
+ /* if (window.innerWidth <= 1024) {
+ $(elemento).slick({
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ });
+ }*/
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 0677f03..f83b3ce 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -12,6 +12,9 @@
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
+ @media (max-width: 1024px) {
+ margin-right: 16px;
+ }
&:hover {
color: lighen($color-black, 10);
@@ -50,6 +53,9 @@
.client-email {
margin: 0 0 16px;
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
input {
box-shadow: none;
@@ -61,8 +67,16 @@
border-radius: 5px 0 0 5px;
width: 443px;
- @media (max-width: 490px) {
- width: auto;
+ @media (max-width: 1024px) {
+ width: 84.498% !important;
+ display: flex;
+ margin-left: 16px;
+ }
+
+ @media (max-width: 375px) {
+ width: 57.6% !important;
+ display: flex;
+ margin-left: 16px;
}
}
@@ -81,11 +95,17 @@
right: 0;
top: 0;
- @media (max-width: 490px) {
- height: 48px;
- margin: 0;
+ @media (max-width: 1024px) {
+ margin-right: 16px;
position: absolute;
}
+
+ @media (max-width: 490px) {
+ height: 52px;
+ margin-right: 16px;
+ position: absolute;
+ top: -5px;
+ }
}
span.help.error {
@@ -147,10 +167,27 @@
padding: 16px;
.accordion-heading {
+ .icon-user,
+ .icon-home,
+ .icon-credit-card {
+ display: none;
+ }
+
span {
- color: #303030;
+ color: $color-black;
margin-bottom: 8px;
padding: 0;
+ font-family: font-family-secundary;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 37px;
+ }
i::before {
fill: #303030;
@@ -159,7 +196,7 @@
a {
align-items: center;
- background-color: #303030;
+ background-color: $color-blue2;
border-radius: 8px;
border: none;
color: $color-white;
@@ -172,10 +209,28 @@
.accordion-inner {
padding: 0;
+ div.form-step.box-info {
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ }
+ }
+
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ }
+
/* General configurations */
.client-notice {
+ display: none;
color: $color-black;
+ @media (max-width: 1024px) {
+ display: none;
+ }
}
p {
@@ -186,9 +241,10 @@
select,
input {
- border-radius: 0;
- border: 1px solid $color-gray4;
+ border-radius: 5px;
+ border: 1px solid $color-gray6;
box-shadow: none;
+ width: 95.331%;
}
.help.error {
@@ -199,6 +255,7 @@
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
+ display: none;
color: $color-black;
font-weight: 500;
text-decoration: underline;
@@ -211,18 +268,20 @@
button.submit {
border: none;
- border-radius: 5px;
- background: $color-black;
+ border-radius: 8px;
+ width: 100%;
+ background: $color-blue2;
+ color: $color-white;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
&:hover {
- background: lighten($color-black, 5);
+ background: $color-blue2;
}
&:active {
- background: darken($color-black, 5);
+ background: $color-blue2;
}
}
@@ -299,7 +358,50 @@
padding-left: 16px;
}
- .vtex-omnishipping-1-x-summaryChange {
+ .vtex-omnishipping-1-x-addressFormPart1 {
+ p.input.ship-postalCode.required.text {
+ display: flex;
+ flex-direction: column;
+
+ #ship-postalCode {
+ padding-right: 67.612%;
+ }
+ }
+
+ .input.ship-country.text {
+ display: none;
+ }
+ }
+
+ .input .ship-complement .text {
+ display: inline-block;
+ width: 95.331%;
+ }
+
+ .vtex-omnishipping-1-x-address {
+ display: flex;
+ flex-direction: column;
+
+ #ship-number {
+ width: 98.67%;
+ }
+
+ #ship-city {
+ width: 98.67%;
+ }
+
+ #ship-state {
+ width: 98.712%;
+ }
+
+ div {
+ display: grid;
+ }
+ }
+
+
+
+ .vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index b24d13e..91d555b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -118,7 +118,7 @@
font-size: 14px;
line-height: 16px;
- @include mq(md, max) {
+ @media (max-width: 1024px) {
&.quantity-price,
&.shipping-date {
display: none;
@@ -127,7 +127,7 @@
}
.product-image {
- height: auto;
+ height: 60px;
padding: 0;
width: 60px;
@@ -138,7 +138,7 @@
img {
height: 60px;
max-width: 100%;
- width: auto;
+ width: 60px;
@include mq(sm, max) {
height: 72px;
@@ -179,12 +179,33 @@
}
}
+ th.shipping-date,
+ th.quantity,
+ th.product,
+ th.product-price {
+ @media (max-width: 1024px) {
+ display: none;
+ }
+ }
+
+ th.quantity-price {
+ @media (max-width: 1024px) {
+ display: none;
+ }
+ }
+
td.shipping-date {
color: $color-gray2;
font-size: 12px;
line-height: 14px;
- @include mq(md, max) {
+ @media (max-width: 1024px) {
+ display: none;
+ }
+ }
+
+ td.quantity-price {
+ @media (max-width: 1024px) {
display: none;
}
}
@@ -239,7 +260,7 @@
input {
background-color: $color-white;
- border: 1px solid $color-gray3;
+ border: 1px solid transparent;
border-radius: 0;
border-width: 0 1px;
display: block;
@@ -477,7 +498,7 @@
}
.srp-postal-code {
- .ship-country {
+ #ship-country {
display: none;
}
@@ -730,6 +751,11 @@
.accordion-group {
tr {
border-color: #e5e5e5;
+ th {
+ @media (max-width: 1024px) {
+ display: none;
+ }
+ }
td {
&.empty {
@@ -792,7 +818,7 @@
text-align: center;
margin-bottom: 16px;
- @include mq(md, max) {
+ @media (max-width: 1024px) {
margin-bottom: 0px;
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..f4ebfdd 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -1,4 +1,8 @@
body .container-main.container-order-form .orderform-template.active {
+ @media (max-width: 1024px) {
+ display: flex;
+ flex-direction: column;
+ }
.mini-cart {
width: 32.3242%;
margin-left: unset;
@@ -6,6 +10,162 @@ body .container-main.container-order-form .orderform-template.active {
float: right;
}
.orderform-template-holder {
+ @media (max-width: 1024px) {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
width: 66.1132%;
}
+
+ .row-fluid {
+ .box-client-info-pf {
+ label,
+ input {
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 38px;
+ height: 51px;
+ }
+ }
+
+ button {
+ font-weight: 700;
+ font-size: 28px;
+ line-height: 38px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ }
+ }
+ .box-client-info-pj {
+ display: none;
+ }
+ label.checkbox.newsletter-label {
+ display: flex;
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 33px;
+ }
+
+ #opt-in-newsletter {
+ width: 6.53%;
+ }
+ }
+ @media (max-width: 1024px) {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ }
+
+ .span6 {
+ @media (max-width: 1024px) {
+ width: 100% !important;
+ margin: 0;
+ }
+ }
+ .client-email {
+ @media (max-width: 1024px) {
+ margin: auto;
+ margin-left: 16px;
+ }
+ }
+ #client-email {
+ @media (max-width: 1024px) {
+ width: 94.7792% !important;
+ margin: auto;
+ }
+ }
+ .client-first-name {
+ width: 42.933%;
+ margin-right: 25px;
+ @media (max-width: 1024px) {
+ width: 45.603% !important;
+ margin-left: 16px;
+ }
+
+ @media (min-width: 2500px) {
+ width: 42.573%;
+ margin-left: 30px;
+ }
+ #client-first-name {
+ width: 100% !important;
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
+ }
+ }
+
+ .client-last-name {
+ width: 42.933%;
+ @media (max-width: 1024px) {
+ width: 45.603%;
+ margin-left: 14.5px;
+ }
+
+ @media (min-width: 2500px) {
+ width: 42.573%;
+ }
+ #client-last-name {
+ width: 100%;
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
+ }
+ }
+
+ .client-document {
+ width: 42.933%;
+ margin-right: 25px;
+ @media (max-width: 1024px) {
+ width: 45.603%;
+ margin-left: 16px;
+ }
+
+ @media (min-width: 2500px) {
+ width: 42.573%;
+ }
+ #client-document {
+ width: 100%;
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
+ }
+ }
+
+ .client-phone {
+ width: 42.933%;
+ @media (max-width: 1024px) {
+ width: 45.603%;
+ margin-left: 14.5px;
+ }
+
+ @media (min-width: 2500px) {
+ width: 42.573%;
+ }
+ #client-phone {
+ width: 100%;
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
+ }
+ }
+ }
+}
+#holder-document-0,
+.FormFieldLabel {
+ display: none;
+}
+
+.PaymentCardNumber input {
+ display: block;
+ width: 223px;
+ height: 25px;
+}
+
+.steps-view {
+ width: 393px;
+ height: 292px;
+ margin-right: 0px;
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index bda6846..e339b9e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -14,6 +14,7 @@
}
&-title {
+ margin-top: 170px;
font-size: 20px;
font-style: normal;
font-weight: 700;
@@ -21,25 +22,45 @@
line-height: 33px;
text-align: center;
text-transform: uppercase;
+
+ @media (min-width: 2500px) {
+ font-weight: 700;
+ font-size: 48px;
+ line-height: 65px;
+ text-align: center;
+ text-transform: uppercase;
+ }
}
&-links {
.link-choose-products {
+ display: flex;
+ justify-content: center;
+ align-items: center;
background: $color-white;
- border: 1px solid #000000;
+ border: 1px solid $color-black2;
transition: ease-in 0.22s all;
outline: none;
border-radius: 0px;
- font-family: $font-family;
+ font-family: $font-family-secundary;
width: 287px;
height: 24px;
- color: $color-black;
+ color: $color-black2;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
margin: auto;
+ margin-bottom: 264px;
+
+ @media (min-width: 2500px) {
+ width: 638.67px;
+ height: 66px;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 33px;
+ }
&:hover {
background: $color-white;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index bead8ae..7d2b0ad 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -50,6 +50,10 @@ body {
.container-order-form,
.container-cart {
width: 80%;
+
+ @media (max-width: 1024px) {
+ width: 100%;
+ }
}
}
@@ -66,6 +70,10 @@ body {
color: $color-black !important;
}
+.hide {
+ display: none;
+}
+
#cart-title,
#orderform-title {
color: $color-black;
@@ -77,8 +85,14 @@ body {
letter-spacing: 0.1em;
text-transform: uppercase;
- @include mq(md, max) {
- margin-left: 30px;
+ @media (max-width: 1024px) {
+ margin-left: 16px;
+ }
+
+ @media (min-width: 2500) {
+ font-weight: 700;
+ font-size: 48px;
+ line-height: 65px;
}
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b2431d2..9166388 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,4 +1,7 @@
/* _footer.scss */
+.desable {
+ display: none;
+}
.footerCheckout {
border-top: none;
color: $color-gray2;
@@ -30,7 +33,7 @@
margin: 5px;
}
- .product-image {
+ .products-image {
width: 97.19%;
}
@@ -81,8 +84,13 @@
border-top: 1px solid $color-black2;
.container {
+ width: 100%;
display: flex;
justify-content: space-between;
+
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ }
}
}
@@ -95,9 +103,13 @@
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
-
- @include mq(md, max) {
- margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ @media (min-width: 2500px) {
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 27px;
+ width: 537px;
max-width: 100%;
}
}
@@ -108,8 +120,38 @@
justify-self: center;
list-style: none;
- img {
- width: 35px;
+ .logo-footer-cards {
+ display: flex;
+
+ .logo1,
+ .logo6,
+ .logo7 {
+ width: 35.65px;
+ @media (min-width: 2500px) {
+ width: 69.63px;
+ }
+ }
+ .logo2,
+ .logo3,
+ .logo5 {
+ width: 34.78px;
+ @media (min-width: 2500px) {
+ width: 67.93px;
+ }
+ }
+ .logo4 {
+ width: 36.52px;
+ @media (min-width: 2500px) {
+ width: 71.33px;
+ }
+ }
+
+ .logo8 {
+ width: 53px;
+ @media (min-width: 2500px) {
+ width: 103.52px;
+ }
+ }
}
@include mq(md, max) {
@@ -132,6 +174,18 @@
list-style-type: none;
margin: 0;
+ .logo-m3 {
+ margin: 0;
+ width: 28.66px;
+ height: 15.65px;
+ }
+
+ .logo-vtex {
+ margin: 0;
+ width: 44.92px;
+ height: 16px;
+ }
+
li:last-child {
margin-left: 16px;
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 2c30d63..59fa4ce 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,10 +1,20 @@
/* _header.scss */
.headerCheckout {
+ width: 100%;
+ height: 96px;
+ border-bottom: 1px solid $color-black;
.container {
width: auto !important;
+ width: 79.532% !important;
.progress-bar {
width: 446px;
+ @media (min-width: 2500px) {
+ width: 790.7px;
+ }
+ @media (max-width: 1024px) {
+ display: none;
+ }
ul {
list-style-type: none;
@@ -101,10 +111,6 @@
}
}
- @media (max-width: 1024px) {
- display: none;
- }
-
@media screen and (max-width: 1024px) {
width: 100% !important;
}
@@ -117,18 +123,26 @@
align-items: center;
display: flex;
justify-content: space-between;
-
- @media screen and (max-width: 1024px) {
- margin: 29px 16px 0 16px;
+ @media (min-width: 2500px) {
+ margin-top: 10px;
}
}
&__logo {
width: 155.58px;
height: 99.35%;
+
+ @media (min-width: 2500px) {
+ width: 382.07px;
+ height: 91.2px;
+ }
img {
max-width: 100%;
}
+
+ @media (max-width: 1024px) {
+ margin-left: 16px;
+ }
}
&__safeBuy {
@@ -151,5 +165,8 @@
i {
margin-right: 8px;
}
+ @media (max-width: 1024px) {
+ margin-right: 16px;
+ }
}
}
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index bb163c6..13cf688 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -10,12 +10,12 @@ $color-black2: #000000;
$color-white: #fff;
-
$color-gray: #6c6c6c;
$color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
+$color-gray6: #E0E0E0;
$color-blue: #4267b2;
$color-blue2: #00C8FF;
- 
- 
- 
- 
- 
- 
+ this.paymentText.innerHTML = `
+ Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
+ `;
+
+ this.footerLogo.innerHTML = `
+ 
+
+ 
+ 
+