PatrickReisSantos/m3-academy-template-checkout-Patrick-Reis
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

release/checkout #4

Merged
PatrickReisSantos merged 2 commits from release/checkout into main 2022-12-27 02:41:18 +00:00
Conversation 0 Commits 2 Files Changed 8 +171 -32
8 changed files with 171 additions and 32 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

@ -29,6 +29,22 @@ export default class Footer {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1026,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
],
});
}
async apiProducts(container) {
@ -65,23 +81,24 @@ export default class Footer {
});
}
async addPrateleira() {
const checkSlick = document.querySelector(".slick-initialized");
const slickContainer = document.createElement("div");
const url = window.location.hash;
const orderForm = await fetch("/api/checkout/pub/orderForm/")
.then((response) => response.json())
.then((response) => response)
.catch((err) => console.error(err));
console.log(orderForm.items);
if (orderForm.items.length > 0 && url === "#/cart") {
/* console.log(orderForm.items); */
if (orderForm.items.length > 0 && url === "#/cart" && checkSlick === null) {
const titlePrateleira = document.createElement("h2");
titlePrateleira.classList.add("title-prateleira");
titlePrateleira.innerText = "Você também pode gostar:";
this.prateleira.appendChild(titlePrateleira);
this.prateleira.appendChild(slickContainer);
await this.apiProducts(slickContainer);
await this.addCarrossel(slickContainer);
} else {
} else if (orderForm.items.length == 0 || url !== "#/cart") {
slickContainer.remove();
console.log(slickContainer);
const slickInitialize = document.querySelector(".slick-initialized");
@ -98,9 +115,9 @@ export default class Footer {
const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"];
query3[0].innerHTML = "";
cardList3.forEach(function (item, index) {
query3[0].innerHTML += `<span>${
query3[0].innerHTML += `<div class="div-addStamps"><span>${
index === 0 ? "Powered By" : "Developed By"
}</span> <img style="width: 42px; height: 16px; " src=${
}</span></div> <img style="width: 42px; height: 16px; " src=${
"https://agenciamagma.vteximg.com.br/arquivos/" + item
} alt="">`;
});
@ -111,7 +128,7 @@ export default class Footer {
const cardList2 = ["masterCardM3Academy.png"];
query2[0].innerHTML = "";
cardList2.forEach(function (item) {
query2[0].innerHTML = `<img style="width: 36px; height: 20px; " src=${"https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"} alt="">`;
query2[0].innerHTML = `<img style="width: 36px; height: 20px; " src=${"https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"} alt="">`;
});
const stampsContainer = await waitElement(".footerCheckout__payments");

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

@ -6,10 +6,12 @@ export default class Header {
constructor() {
this.init();
this.addProgressBar();
this.MeuCarrinhoTittle();
}
async init() {
await this.selectors();
console.log(this.item);
}
@ -47,4 +49,11 @@ export default class Header {
`;
}
async MeuCarrinhoTittle() {
if (orderForm.items.length < 0 && url === "#/cart") {
const MeuCarrinhoTittleCheck = (document.querySelector("#cart-title").style.display =
"none");
}
}
}

1
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -798,7 +798,6 @@
@include mq(md, min) {
margin: 0;
padding-bottom: 50px;
}
.link-choose-more-products-wrapper {

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

@ -10,7 +10,17 @@
}
&-title {
font-size: 20px;
font-family: "Open Sans";
font-style: normal;
text-transform: uppercase;
line-height: 32px;
font-size: 24px;
margin: 0;
font-weight: 700;
@media (min-width: 280px) and (max-width: 1024px) {
font-size: 18px;
}
}
&-links {
@ -23,6 +33,13 @@
padding: 15px 62px 17px 62px;
background-color: transparent;
color: #000000;
border-radius: 0;
margin-top: 32px;
@media (min-width: 280px) and (max-width: 1024px) {
width: 250px;
margin-top: 22px;
padding: 14px 9px 14px 9px;
}
&:hover {
background: #00c8ff8c;

42
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -8,22 +8,44 @@ html {
min-height: 100%;
}
footer .container {
margin-top: 16px;
display: flex;
align-items: center;
margin: 0 32px 0 32px;
height: 100%;
width: 100%;
justify-content: space-between;
gap: 65px;
@media (min-width: 280px) and (max-width: 1024px) {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin: 32px 0 0 16px;
}
&::before {
display: none;
}
&::after {
display: none;
}
}
.footerCheckout__stamps {
margin: 0;
}
footer .footerCheckout__wrapper {
border-top: 1px solid black;
width: 100%;
/* width: 100%; */
/* width: 94.9734%; */
margin: auto auto 0 auto;
width: 2500px;
max-width: 100%;
height: 67px;
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
max-width: 100%;
width: 1016px;
margin: 0 auto;
}
@ -58,7 +80,15 @@ body {
}
.container-order-form,
.container-cart {
width: 80%;
/* width: 80%; */
/* height: 544px; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* @media (min-width: 375px) and (max-width: 1024px) {
height: 532px;
} */
}
}
@ -87,6 +117,8 @@ body {
margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
/* color: transparent;
position: absolute; */
@include mq(md, max) {
margin-left: 30px;

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

@ -1,7 +1,9 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
width: 100%;
&__wrapper {
align-items: center;
@ -10,17 +12,22 @@
}
&__address {
color: $color-gray2;
font-family: $font-family;
color: #292929;
font-family: "Open Sans";
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
font-weight: 400;
@media (min-width: 280px) and (max-width: 1024px) {
order: 2;
display: flex;
}
@include mq(md, max) {
margin-bottom: 24px;
/* margin-bottom: 24px; */
max-width: 100%;
}
}
@ -32,7 +39,7 @@
list-style: none;
@include mq(md, max) {
align-self: center;
/* align-self: center; */
margin-bottom: 12px;
}
@ -46,10 +53,16 @@
}
&__developedBy {
display: flex;
order: 3;
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
gap: 11px;
@media (min-width: 280px) and (max-width: 1024px) {
order: 3;
}
li:last-child {
margin-left: 16px;
@ -72,3 +85,8 @@
}
}
}
.div-addStamps {
@media (max-width: 375px) {
font-size: 9px;
}
}

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

@ -1,6 +1,12 @@
/* _header.scss */
.headerCheckout {
.container {
width: 2500px;
height: 96px;
max-width: 100%;
@media (min-width: 280px) and (max-width: 1024px) {
height: 65px;
}
/* width: auto !important; */
}
&__wrapper {
@ -40,7 +46,11 @@
}
.headerCheckout__wrapper {
margin: 30px 0 30px 0;
height: 100%;
margin: 0 131px 0 131px;
@media (min-width: 280px) and (max-width: 1024px) {
margin: 0 16px 0 16px;
}
}
.headerCheckout__safeBuy {
@ -53,6 +63,12 @@
margin-right: 8px;
}
.headerCheckout__safeBuy span {
@media (min-width: 305px) {
font-size: 11px;
}
}
.checkout-li {
height: 12px;
width: 12px;
@ -62,10 +78,14 @@
}
.progress-bar {
width: 439px;
width: 40%;
@media (max-width: 1024px) {
display: none;
}
}
.progress-bar-container {
margin: 0;
display: flex;
position: relative;
height: fit-content;
@ -82,7 +102,7 @@
position: absolute;
display: block;
content: "";
width: 70%;
width: 67%;
height: 1px;
background-color: black;
z-index: -1;
@ -126,22 +146,31 @@
}
.headerCheckout__logo {
margin-left: 131px;
/* margin-left: 131px; */
@media (min-width: 280px) and (max-width: 1024px) {
margin: 0;
}
@media (max-width: 305px) {
height: 35px;
width: 130px;
}
@media (min-width: 2500px) {
width: 382px;
height: 91px;
}
}
.headerCheckout__safeBuy {
margin-right: 131px;
@media (min-width: 280px) and (max-width: 1024px) {
margin: 0;
}
}
.headerCheckout__safeBuy img {
margin-bottom: 2px;
}
.empty-cart-title {
text-transform: uppercase;
font-size: 50px;
line-height: 32px;
}
.empty-cart-message {
display: none;
}

20
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -23,7 +23,11 @@
}
.btn-item-link {
padding: 12px 75px;
display: flex;
align-items: center;
justify-content: center;
width: 242px;
height: 42px;
color: #ffffff;
font-family: "Open Sans";
font-style: normal;
@ -32,6 +36,9 @@
border-radius: 8px;
background-color: #00c8ff;
text-transform: uppercase;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
}
.btn-tamanho {
@ -40,6 +47,11 @@
width: 242px;
justify-content: center;
margin-bottom: 20px;
@media (min-width: 280px) and (max-width: 1024px) {
display: flex;
flex-wrap: wrap;
width: 94.5%;
}
}
.span-item-name {
@ -59,6 +71,9 @@
font-weight: 400;
font-size: 13px;
color: #000000;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
}
/* .bora {
@ -68,6 +83,9 @@
.product-img {
width: 242px;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
}
.container-produto {