forked from M3-Academy/m3-academy-template-checkout
feat: adiciona css checkout dados pessoais entrega 1280px
This commit is contained in:
parent
7c7e02b873
commit
92495b560a
@ -12,11 +12,9 @@ export default class Footer {
|
||||
if (window.location.hash === "#/cart") {
|
||||
await this.cartUpdate();
|
||||
}
|
||||
this.emptyTitle = await waitElement(".empty-cart-title");
|
||||
this.emptyButton = await waitElement(".link-choose-products");
|
||||
this.paymentsMethods = await waitElement(".footerCheckout__payments");
|
||||
this.certification = await waitElement(".footerCheckout__vtexpci");
|
||||
this.emptyCartTitle();
|
||||
this.emptyCartButton();
|
||||
this.addPaymentsMethodsIcons();
|
||||
this.addCertificationIcon();
|
||||
@ -41,6 +39,7 @@ export default class Footer {
|
||||
|
||||
events() {
|
||||
window.addEventListener("hashchange", this.outPrateleira.bind(this));
|
||||
window.addEventListener("resize", this.onRisize.bind(this));
|
||||
}
|
||||
|
||||
async cartUpdate() {
|
||||
@ -54,8 +53,6 @@ export default class Footer {
|
||||
mutations.map((mutation) => {
|
||||
const cartStatus = mutation.target.attributes.style.nodeValue;
|
||||
|
||||
console.log(cartStatus);
|
||||
|
||||
if (cartStatus === "display: none;") {
|
||||
this.renderPrateleira();
|
||||
this.cartTitle.classList.remove("inactive");
|
||||
@ -93,7 +90,6 @@ export default class Footer {
|
||||
</div>
|
||||
<ul
|
||||
class="footerCheckout__prateleira-container"
|
||||
data-slick='{"slidesToShow": 4, "slidesToScroll": 1}'
|
||||
></ul>
|
||||
`;
|
||||
|
||||
@ -142,10 +138,6 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
|
||||
emptyCartTitle() {
|
||||
this.emptyTitle.innerHTML = `Seu Carrinho está Vazio`;
|
||||
}
|
||||
|
||||
emptyCartButton() {
|
||||
this.emptyButton.innerHTML = `Continuar Comprando`;
|
||||
}
|
||||
@ -184,9 +176,17 @@ export default class Footer {
|
||||
`;
|
||||
}
|
||||
|
||||
async onRisize(e) {
|
||||
const windowSize = e.target.innerWidth;
|
||||
|
||||
console.log(windowSize);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement(".footerCheckout__prateleira-container");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: false,
|
||||
prevArrow:
|
||||
"<button><img class='a-left control-c prev slick-prev' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg' /></button>",
|
||||
|
||||
@ -289,6 +289,10 @@
|
||||
|
||||
/* Shipping configurations */
|
||||
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode small a {
|
||||
color: #303030;
|
||||
font-weight: 500;
|
||||
@ -303,8 +307,9 @@
|
||||
}
|
||||
|
||||
.shp-lean {
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid $color-gray11;
|
||||
border-radius: 0;
|
||||
border-radius: 8px;
|
||||
|
||||
label {
|
||||
background-color: $color-white;
|
||||
@ -331,11 +336,19 @@
|
||||
|
||||
.address-summary {
|
||||
background: none;
|
||||
border-color: $color-gray4;
|
||||
border-radius: 0;
|
||||
border-color: $color-gray11;
|
||||
border-radius: 8px;
|
||||
color: #303030;
|
||||
padding: 12px;
|
||||
|
||||
&:first-child::before {
|
||||
content: "";
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
|
||||
background-size: 21px 20px;
|
||||
width: 21px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
}
|
||||
@ -345,6 +358,10 @@
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ship-street {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.shp-summary-group-price,
|
||||
@ -366,12 +383,46 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: #d8c8ac;
|
||||
border: 1px solid #d8c8ac;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray2;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
// text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
color: $color-gray2;
|
||||
text-transform: uppercase;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionInactive {
|
||||
color: $color-gray8;
|
||||
text-transform: uppercase;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.totalizers-list {
|
||||
td {
|
||||
padding: 25px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-container {
|
||||
.ship-postalCode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
input {
|
||||
width: 280px;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -133,6 +133,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fixed-transition {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
background-color: $color-white;
|
||||
}
|
||||
@ -187,13 +191,17 @@
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 6.062%;
|
||||
padding: 0;
|
||||
// width: 6.062%;
|
||||
// padding: 0;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 60px !important;
|
||||
// width: 100%;
|
||||
// max-width: 100%;
|
||||
// height: 60px !important;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
|
||||
@ -56,13 +56,27 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
|
||||
&::after {
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -84,13 +98,31 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
|
||||
&::after {
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-toggle-active {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-gray2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,11 @@
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
|
||||
@ -106,8 +106,12 @@
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 1108px) and (max-width: 1167px) {
|
||||
font-size: 11.7px;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1107px) {
|
||||
font-size: 11.5px;
|
||||
font-size: 9.7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -145,6 +149,11 @@
|
||||
width: 95%;
|
||||
height: 65px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
@ -162,6 +171,10 @@
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
@ -213,6 +226,10 @@
|
||||
margin: 0;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
a {
|
||||
align-items: center;
|
||||
|
||||
@ -9,6 +9,12 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 80% !important;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
width: 439px;
|
||||
height: 35px;
|
||||
@ -103,13 +109,17 @@
|
||||
justify-content: space-between;
|
||||
height: 37.14px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15.194%;
|
||||
width: auto;
|
||||
img {
|
||||
height: 37.14px;
|
||||
width: 100%;
|
||||
@ -118,11 +128,9 @@
|
||||
|
||||
&__safeBuy {
|
||||
display: flex;
|
||||
width: 11.622%;
|
||||
width: auto;
|
||||
height: 17px;
|
||||
@media (min-width: 1025px) and (max-width: 1276px) {
|
||||
width: 14.5%;
|
||||
}
|
||||
|
||||
img {
|
||||
// width: 10.09%;
|
||||
width: 12px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user