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

feat: adiciona a prateleira a pagina

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2022-12-14 18:53:05 -03:00
parent 681274c0fd
commit c6f21500ac
4 changed files with 446 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
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.catalogoApi();
// this.onUpdate(); // this.onUpdate();
} }
@ -14,6 +16,33 @@ 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.footerPrateleira = document.querySelector(".footerCheckout__prateleira");
}
async catalogoApi() {
this.addCarrossel();
this.footerPrateleira.innerHTML = `<ul class="products-list"></ul>`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
).then((response) => {
response.json().then((res) => {
res.forEach((product) => {
const novaUl = document.querySelector(".products-list");
const name = product.productName;
const link = product.link;
const image = product.items[0].images[0].imageUrl;
novaUl.innerHTML += `
<li class="product-cards">
<img src ="${image}" />
<h3 class="product-name">${name}</h3>
<a class="product-link" href="${link}">
VER PRODUTO
</a>
</li>
`;
});
});
});
} }
onUpdate() { onUpdate() {
@ -31,7 +60,7 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement(".products-list");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,

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

@ -8,14 +8,63 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); //console.log(this.item);
this.progressBarHtml();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { /* this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar //#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 timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); });*/
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
} }
progressBarHtml() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerLi">
<div>
<p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
<p class="progress-bar-line-1"></p>
</div>
</div>
</li>
<li class="central">
<div class="containerLi">
<div>
<p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
</div>
</div>
</li>
<li>
<div class="containerLi">
<div>
<p class="progress-bar-text">Pagamento</p>
<p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
<p class="progress-bar-line-2"></p>
</div>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = "";
}
}
} }

503
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1,289 +1,318 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $color-black; color: $color-black2;
font-size: 14px; font-size: 14px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
} }
} }
} }
.pre-email { .pre-email {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; color: $color-black2;
font-size: 24px; text-transform: uppercase;
} font-weight: 400;
font-size: 20px;
line-height: 23px;
font-family: $font-family-secundary;
}
small { small {
color: $color-gray4; color: $color-black2;
} text-transform: uppercase;
} font-weight: 400;
} font-size: 20px;
line-height: 23px;
font-family: $font-family-secundary;
}
}
}
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black2;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid $color-black2;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 0 0 5px;
width: 443px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: $color-black; background-color: $color-blue2;
border-radius: 5px; border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family; color: $color-black2;
height: 54px; font-weight: 700;
right: 0; font-size: 14px;
top: 0; line-height: 19px;
text-transform: uppercase;
width: 126.76px;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
} }
span.help.error { span.help.error {
color: red; color: red;
} font-weight: 700;
} font-size: 12px;
line-height: 16px;
}
}
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
h3 { h3 {
color: #303030; color: $color-black2;
margin: 0 0 8px 0; margin: 0 0 8px 0;
} font-weight: 700;
font-size: 12px;
line-height: 16px;
}
ul { ul {
margin: 0; margin: 0;
li { li {
span { span {
color: $color-black; color: $color-black2;
} font-weight: 700;
font-size: 12px;
line-height: 16px;
}
i::before { i::before {
color: $color-black; color: $color-blue2;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
} }
} }
i::before { i::before {
color: $color-black; color: #303030;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; opacity: 0.5;
} }
} }
} }
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; fill: #303030;
} }
} }
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: #303030;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} }
} }
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; color: $color-black;
} }
p { p {
label { label {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
} }
select, select,
input { input {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
box-shadow: none; box-shadow: none;
} }
.help.error { .help.error {
color: red; color: red;
} }
} }
.box-client-info-pj { .box-client-info-pj {
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.state-inscription-box span { .state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: $color-black; background: $color-black;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-black, 5);
} }
} }
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
color: #303030; color: #303030;
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
} }
} }
} }
} }
.delivery-address-title { .delivery-address-title {
color: #303030; color: #303030;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.shp-summary-group-info { .shp-summary-group-info {
border-color: $color-gray4; border-color: $color-gray4;
} }
.address-summary { .address-summary {
background: none; background: none;
border-color: $color-gray4; border-color: $color-gray4;
border-radius: 0; border-radius: 0;
color: #303030; color: #303030;
padding: 12px; padding: 12px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; color: #303030;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
} }
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
} }
.shp-summary-group-price { .shp-summary-group-price {
padding-right: 16px; padding-right: 16px;
} }
.shp-summary-package { .shp-summary-package {
padding-left: 16px; padding-left: 16px;
} }
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: #d8c8ac;
border: 1px solid #d8c8ac; border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} }
} }
} }
} }
} }

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

@ -1,13 +1,105 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
width: 100%;
height: 96px;
border-bottom: 1px solid $color-black;
.container { .container {
display: grid; width: auto !important;
grid-template-rows: 2fr 2fr 1fr; .progress-bar {
width: 79.532% !important; width: 446px;
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 !important;
}
li .containerLi {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
}
li.central .containerLi {
align-items: center;
margin-left: 7px;
}
li:last-child .containerLi {
align-items: flex-end;
}
li .containerLi div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black2;
width: 39.9103%;
@media (min-width: 2500px) {
font-size: 24px;
}
}
li.central {
width: auto;
}
li #progress-bar-circle-1,
li #progress-bar-circle-2,
li #progress-bar-circle-3 {
width: 10px;
height: 10px;
border: 1px solid black;
border-radius: 50%;
@media (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
li #progress-bar-circle-3.active {
border: none;
background-color: black;
}
.progress-bar-line-1 {
position: absolute;
left: 25%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid $color-black2;
}
.progress-bar-line-2 {
position: absolute;
right: 21%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid $color-black2;
}
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
width: 100% !important; width: 100% !important;
@ -33,12 +125,6 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
margin: 29px 16px 0 16px; margin: 29px 16px 0 16px;
} }
.progress-bar {
@media screen and (max-width: 1024px) {
display: none;
}
}
} }
&__logo { &__logo {
@ -46,7 +132,6 @@
height: 99.35%; height: 99.35%;
img { img {
max-width: 100%; max-width: 100%;
height: 100%;
} }
} }