cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona layout 1024

Browse Source
This commit is contained in:
Cainã Milech 2022-12-18 02:58:02 -03:00
parent debff0f891
commit 0a300c74d5
8 changed files with 350 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bash.exe.stackdump
View File

@ -2,7 +2,7 @@ Stack trace:
Frame Function Args Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (00000780000, 00000780101, 00000000001, E9C64E3ED582) 000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

15
checkout/src/arquivos/js/components/Footer.js
View File

@ -90,12 +90,21 @@ export default class Footer {
async addCarrossel() { async addCarrossel() {
const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 });
if (window.screen.width > 1024) { if (window.screen.width > 102) {
$(prateleira).slick({ $(prateleira).slick({
slidesToShow: 4, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
infinite: true, infinite: true,
arrows: true, arrows: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
},
},
],
}); });
} }
} }
@ -132,7 +141,7 @@ export default class Footer {
carrinho() { carrinho() {
this.title.innerHTML = ``; this.title.innerHTML = ``;
this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; //this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
this.continuarCompra.innerHTML = `continuar comprando`; this.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`; this.frete.innerHTML = `Frete`;
this.unidade.innerHTML = `Unidade`; this.unidade.innerHTML = `Unidade`;

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

@ -13,6 +13,10 @@ h1#orderform-title {
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
@include mq(tablet, max) {
padding-top: 0;
}
.link-cart { .link-cart {
a { a {
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -28,6 +32,11 @@ h1#orderform-title {
&:hover { &:hover {
color: lighen($color-black-500, 10); color: lighen($color-black-500, 10);
} }
@include mq(tablet, max) {
font-size: 10px;
line-height: 12px;
}
} }
} }
@ -48,6 +57,11 @@ h1#orderform-title {
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(tablet, max) {
font-size: 14px;
line-height: 16px;
}
} }
small { small {
@ -58,6 +72,11 @@ h1#orderform-title {
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(tablet, max) {
font-size: 14px;
line-height: 16px;
}
} }
} }
} }
@ -66,6 +85,11 @@ h1#orderform-title {
/*left: -61px;*/ /*left: -61px;*/
margin: 0 0 24.56px; margin: 0 0 24.56px;
@include mq(tablet, max) {
width: 100%;
text-align: initial;
}
input { input {
/*width: 65.8%;*/ /*width: 65.8%;*/
width: 82%; width: 82%;
@ -82,6 +106,10 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@include mq(tablet, max) {
width: 90%;
}
&::placeholder { &::placeholder {
color: $color-black-500; color: $color-black-500;
} }
@ -108,6 +136,10 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) {
right: 0;
}
&:hover { &:hover {
background: lighten($color-blue2, 5); background: lighten($color-blue2, 5);
} }
@ -130,6 +162,10 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-transform: capitalize; text-transform: capitalize;
@include mq(tablet, max) {
text-align: center;
}
} }
} }
@ -141,6 +177,14 @@ h1#orderform-title {
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
border-radius: 5px; border-radius: 5px;
@include mq(tablet, max) {
width: 309px;
i.icon-lock {
display: none;
}
}
h3 { h3 {
color: $color-black-500; color: $color-black-500;
font-style: normal; font-style: normal;
@ -184,6 +228,139 @@ h1#orderform-title {
} }
} }
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
.row-fluid.orderform-template {
@include mq(tablet, max) {
display: flex;
flex-direction: column;
}
.orderform-template-holder.span8 {
@include mq(tablet, max) {
width: 100% !important;
}
.row-fluid {
@include mq(tablet, max) {
width: 100%;
display: flex;
flex-direction: column;
}
//IDENTIFICAÇÃO
.span6.client-profile-data {
@include mq(tablet, max) {
width: 100%;
}
.client-first-name,
.client-last-name,
.client-document,
.client-phone {
@include mq(tablet, max) {
width: 49.4%;
}
input {
@include mq(tablet, max) {
width: 100%;
}
}
}
.client-first-name,
.client-document {
@include mq(tablet, max) {
margin-right: 1.2%;
}
}
}
//ENTREGA
#shipping-data {
@include mq(tablet, max) {
width: 100%;
margin: 0;
}
.accordion-inner {
#postalCode-finished-loading {
@include mq(tablet, max) {
width: 309px;
height: 36px;
}
}
.ship-postalCode {
@include mq(tablet, max) {
margin-top: 25px;
}
}
.vtex-omnishipping-1-x-summaryPackage {
@include mq(tablet, max) {
justify-content: start;
}
}
.vtex-omnishipping-1-x-SummaryItemContent {
@include mq(tablet, max) {
position: relative;
}
.vtex-omnishipping-1-x-SummaryItemPrice {
@include mq(tablet, max) {
position: absolute;
bottom: 1%;
left: 14%;
}
}
}
}
}
//PAGAMENTO
#payment-data {
@include mq(tablet, max) {
width: 100%;
margin: 0;
}
.payment-group {
@include mq(tablet, max) {
width: 100%;
}
}
.steps-view {
@include mq(tablet, max) {
width: 100%;
box-sizing: border-box;
}
}
}
}
}
//MINICART
.cart-template.mini-cart.span4 {
@include mq(tablet, max) {
width: 100%;
}
.totalizers {
@include mq(tablet, max) {
margin-top: 0;
}
}
.cart-fixed.cart-fixed-transition.affix {
@include mq(tablet, max) {
padding-bottom: 4px;
}
#payment-data-submit {
@include mq(tablet, max) {
position: inherit;
}
}
}
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@ -323,7 +500,6 @@ h1#orderform-title {
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: $color-blue2; background: $color-blue2;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -333,6 +509,10 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(tablet, max) {
margin-bottom: 13px;
}
&:hover { &:hover {
background: lighten($color-blue2, 5); background: lighten($color-blue2, 5);
} }
@ -743,6 +923,8 @@ h1#orderform-title {
.input.ship-postalCode { .input.ship-postalCode {
label { label {
font-size: 0; font-size: 0;
display: flex;
align-items: center;
&::before { &::before {
content: "CEP:"; content: "CEP:";
@ -1140,6 +1322,14 @@ h1#orderform-title {
height: 42px; height: 42px;
margin: 0; margin: 0;
&:hover {
background: lighten($color-green2, 5);
}
&:active {
background: darken($color-green2, 5);
}
i { i {
display: none; display: none;
} }

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

@ -32,6 +32,12 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 32px; margin: 0 0 32px;
@include mq(tablet, max) {
margin-bottom: 22px;
font-size: 18px;
line-height: 25px;
}
} }
.empty-cart-message { .empty-cart-message {
@ -48,6 +54,12 @@
border-radius: 0%; border-radius: 0%;
padding: 15px 64px 17px 65px; padding: 15px 64px 17px 65px;
margin: 0; margin: 0;
font-size: 14px;
line-height: 16px;
@include mq(tablet, max) {
padding: 16px 26px;
}
} }
} }
.empty-cart-title { .empty-cart-title {
@ -89,6 +101,11 @@
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
@include mq(tablet, max) {
padding: 0;
border: none;
}
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
@ -184,6 +201,10 @@
td { td {
text-align: start; text-align: start;
padding: 0; padding: 0;
@include mq(tablet, max) {
vertical-align: top;
}
} }
th { th {
@ -194,6 +215,10 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@include mq(tablet, max) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -255,6 +280,10 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(tablet, max) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -264,6 +293,13 @@
min-width: 100px; min-width: 100px;
top: 13px; top: 13px;
@include mq(tablet, max) {
position: absolute;
right: 0;
top: 40%;
text-align: end;
}
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -311,6 +347,12 @@
padding: 9px 0; padding: 9px 0;
width: max-content !important; width: max-content !important;
@include mq(tablet, max) {
position: absolute;
left: 7.7%;
top: 20%;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
} }
@ -371,6 +413,12 @@
} }
} }
td.quantity-price {
@include mq(tablet, max) {
display: none;
}
}
.quantity-price, .quantity-price,
.best-price { .best-price {
.icon-question-sign { .icon-question-sign {
@ -399,6 +447,7 @@
} }
.item-remove { .item-remove {
text-align: end;
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
@ -431,6 +480,11 @@
.summary { .summary {
margin-top: 48px; margin-top: 48px;
@include mq(tablet, max) {
display: flex;
flex-direction: column;
}
.cart-more-options { .cart-more-options {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -494,6 +548,10 @@
.srp-data { .srp-data {
width: 280px; width: 280px;
@include mq(tablet, max) {
width: 343px;
}
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
} }
@ -586,6 +644,10 @@
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(tablet, max) {
width: 215px;
}
} }
& ~ button { & ~ button {
@ -615,6 +677,11 @@
&:active { &:active {
background-color: darken($color-blue2, 5); background-color: darken($color-blue2, 5);
} }
@include mq(tablet, max) {
width: 120px;
right: -213px;
}
} }
small a { small a {
@ -712,6 +779,11 @@
width: 354px; width: 354px;
margin-bottom: 5px; margin-bottom: 5px;
@include mq(tablet, max) {
margin: 48px 0 0 0;
width: 100%;
}
.coupon-data { .coupon-data {
margin-bottom: 8px; margin-bottom: 8px;
@ -743,6 +815,10 @@
margin: 0; margin: 0;
width: 362px; width: 362px;
@include mq(tablet, max) {
width: 100%;
}
div { div {
text-align: start; text-align: start;
} }
@ -793,6 +869,12 @@
max-width: 204.32px; max-width: 204.32px;
padding: 0 12px; padding: 0 12px;
@include mq(tablet, max) {
width: 86.2%;
box-sizing: border-box;
max-width: none;
}
&::placeholder { &::placeholder {
color: $color-gray7; color: $color-gray7;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -825,6 +907,14 @@
width: 133px; width: 133px;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) {
width: 13.4%;
}
@include mq(tablet, max) {
margin-left: 0;
}
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
@ -849,6 +939,10 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black-500; color: $color-black-500;
@include mq(tablet, max) {
font-size: 0;
}
} }
} }
} }
@ -905,6 +999,11 @@
flex-direction: column; flex-direction: column;
width: 352px; width: 352px;
@include mq(tablet, max) {
width: 100%;
padding-bottom: 0 !important;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -936,6 +1035,10 @@
} }
} }
.link-choose-more-products {
margin: 0;
}
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-blue2; background: $color-blue2;

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

@ -20,7 +20,7 @@ header {
} }
@include mq(tablet, max) { @include mq(tablet, max) {
margin: 0 16px; /*margin: 0 16px;*/
} }
} }
@ -55,7 +55,13 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
box-sizing: border-box; /*teste*/
width: 80%; width: 80%;
@include mq(tablet, max) {
width: 100%;
padding: 0 16px;
}
} }
} }

9
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,5 +1,9 @@
.footerCheckout { .footerCheckout {
&__prateleira { &__prateleira {
@include mq(tablet, max) {
padding: 0 16px;
margin-bottom: 54px;
}
h2 { h2 {
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
@ -102,6 +106,10 @@
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $color-black-500; color: $color-black-500;
@media (min-width: 1025px) and (max-width: 1110px) {
height: 36px;
}
} }
.product-variation { .product-variation {
@ -124,6 +132,7 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: $color-white;
white-space: nowrap;
} }
} }

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

@ -19,6 +19,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@include mq(tablet, max) {
align-items: flex-start;
flex-direction: column;
padding: 16px 8px;
margin: 0;
}
} }
} }
@ -33,6 +40,12 @@
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@include mq(tablet, max) {
margin-bottom: 16px;
margin-left: 8px;
order: 1;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
@ -46,6 +59,10 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
@include mq(tablet, max) {
margin-bottom: 16px;
}
li { li {
display: flex; display: flex;
@ -101,6 +118,12 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
@include mq(tablet, max) {
margin: 0 0 0 8px;
order: 2;
}
li:last-child { li:last-child {
margin-left: 10.73px; margin-left: 10.73px;
figure { figure {

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

@ -5,6 +5,10 @@
.container { .container {
width: 79.53125% !important; width: 79.53125% !important;
@include mq(tablet, max) {
width: 992px !important;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;