forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'release/checkout' (#4) from release/checkout into main
Reviewed-on: #4
This commit is contained in:
commit
f0401b1f01
@ -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="">`;
|
||||
});
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -798,7 +798,6 @@
|
||||
|
||||
@include mq(md, min) {
|
||||
margin: 0;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user