Merge pull request 'feature/checkout-cart-fill' (#5) from feature/checkout-cart-fill into develop

Reviewed-on: #5
This commit is contained in:
Henrique Santos Santana 2022-12-16 21:26:02 +00:00
commit d8a33abb9b
8 changed files with 525 additions and 89 deletions

View File

@ -25,6 +25,7 @@ export default class Footer {
this.paymentContainer = await waitElement(".footerCheckout__stamps"); this.paymentContainer = await waitElement(".footerCheckout__stamps");
this.developedByContainer = await waitElement(".footerCheckout__developedBy"); this.developedByContainer = await waitElement(".footerCheckout__developedBy");
this.checkoutContainer = await waitElement(".container-main"); this.checkoutContainer = await waitElement(".container-main");
this.self = await waitElement(".footerCheckout__prateleira");
} }
innerToPayments() { innerToPayments() {
@ -86,10 +87,22 @@ export default class Footer {
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
if (this.checkoutEmpty && this.checkoutContainer) { if (this.checkoutEmpty && this.checkoutContainer) {
if (this.checkoutContainer.classList.contains("container-cart-fill")) { if (this.checkoutEmpty.style.display === "none") {
this.checkoutContainer.classList.remove("container-cart-fill");
} else {
this.checkoutContainer.classList.add("container-cart-fill"); this.checkoutContainer.classList.add("container-cart-fill");
} else {
this.checkoutContainer.classList.remove("container-fill");
}
if (
this.checkoutContainer.classList.contains("container-cart-fill") &&
this.checkoutContainer.classList.contains("container-cart") &&
window.location.href.endsWith("#/cart")
) {
this.innerSelfList();
this.innerToSelf();
this.addCarrossel();
} else {
this.self.innerHTML = "";
} }
let target = this.checkoutEmpty; let target = this.checkoutEmpty;
@ -97,10 +110,22 @@ export default class Footer {
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
for (let i = 0; i < mutations.length; i++) { for (let i = 0; i < mutations.length; i++) {
if (mutations[i].attributeName === "style") { if (mutations[i].attributeName === "style") {
if (this.checkoutContainer.classList.contains("container-cart-fill")) { if (this.checkoutEmpty.style.display === "none") {
this.checkoutContainer.classList.remove("container-cart-fill");
} else {
this.checkoutContainer.classList.add("container-cart-fill"); this.checkoutContainer.classList.add("container-cart-fill");
} else {
this.checkoutContainer.classList.remove("container-cart-fill");
}
if (
this.checkoutContainer.classList.contains("container-cart-fill") &&
this.checkoutContainer.classList.contains("container-cart") &&
window.location.href.endsWith("#/cart")
) {
this.innerSelfList();
this.innerToSelf();
this.addCarrossel();
} else {
this.self.innerHTML = "";
} }
break; break;
@ -109,13 +134,113 @@ export default class Footer {
}); });
observer.observe(target, config); observer.observe(target, config);
window.addEventListener("hashchange", () => {
if (
this.checkoutContainer.classList.contains("container-cart-fill") &&
this.checkoutContainer.classList.contains("container-cart") &&
window.location.href.endsWith("#/cart")
) {
this.innerSelfList();
this.innerToSelf();
this.addCarrossel();
} else {
this.self.innerHTML = "";
}
});
} }
} }
async addCarrossel() {
const elemento = await waitElement("#my-element"); addCarrossel() {
$(elemento).slick({ $(this.self.children[1]).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
},
},
],
}); });
} }
async getProducts() {
let url = (name) => {
let domain = "https://m3academy.myvtex.com/";
return domain + name;
};
let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
let response = await API.then((res) => res.json());
return response;
}
async innerToSelf() {
let datas = await this.getProducts();
datas.forEach(() => {
$(this.self.children[1]).slick("unslick");
this.createdCardsProducts(datas);
this.addCarrossel();
});
}
createdCardsProducts(data) {
let structure = "";
data.forEach((data) => {
structure += `<li>
<div>
<div>
<figure>
<img src="${data.items[0].images[0].imageUrl}" alt="">
</figure>
<h3>
${data.productName}
</h3>
</div>
<div>
${data.items.reduce((acc, item) => {
return (acc += `<div>
<span>${item.name}</span>
</div>`);
}, "")}
</div>
<a href="${data.link}">
<span>
Ver Produto
</span>
</a>
</div></li>`;
});
this.self.children[1].innerHTML = `
${structure.trim()}
`;
}
innerSelfList() {
this.self.innerHTML = `
<div>
<h2>Você também pode gostar:</h2>
</div>
<ul class="self-list"></ul>`;
}
} }

View File

@ -29,7 +29,6 @@ function OnProgress(target) {
<div class="progress-content"> <div class="progress-content">
<p>Dados Pessoais</p> <p>Dados Pessoais</p>
<span class="progress-bullet"></span> <span class="progress-bullet"></span>
<span class="progress-line"></span>
</div> </div>
</div> </div>
</li> </li>

View File

@ -1,7 +1,13 @@
.container { @mixin btn-primary-blue-black() {
@include mq(md, max) { border: none;
width: 100%; color: $clr-common-black;
} background: $clr-primary-blue-500;
}
@mixin btn-primary-blue-white() {
border: none;
color: $clr-common-white;
background: $clr-primary-blue-500;
} }
.cart-template { .cart-template {
@ -341,6 +347,7 @@
.summary { .summary {
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
float: none;
width: max-content; width: max-content;
.srp-container { .srp-container {
@ -400,15 +407,10 @@
width: calc(100vw - 32px); width: calc(100vw - 32px);
} }
@include mq(md, max) {
margin-bottom: 40px;
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $clr-gray-600; @include btn-primary-blue-white();
border: none;
border-radius: 5px; border-radius: 5px;
color: $clr-common-white;
outline: none; outline: none;
width: 100%; width: 100%;
@ -444,12 +446,12 @@
} }
&__current { &__current {
border: 1px solid $clr-blue-500; border: 1px solid $clr-common-black;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $clr-blue-500; color: $clr-common-black;
} }
label { label {
@ -481,23 +483,17 @@
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px;
} }
& ~ button { & ~ button {
background-color: $clr-gray-600; @include btn-primary-blue-white();
border: none;
border-radius: 5px; border-radius: 5px;
color: $clr-common-white;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
outline: none; outline: none;
position: absolute;
right: -150px;
top: 36px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
@ -590,9 +586,9 @@
} }
} }
&-totalizers { &-totalizers.totalizers {
padding: 0; padding: 0;
width: 346px; float: none;
.coupon-data { .coupon-data {
#cart-link-coupon-add { #cart-link-coupon-add {
@ -608,7 +604,6 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $clr-blue-500;
text-decoration: none; text-decoration: none;
} }
} }
@ -673,10 +668,9 @@
} }
button { button {
background: $clr-gray-600; @include btn-primary-blue-white();
border: none;
border-radius: 5px; border-radius: 5px;
color: $clr-common-white;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
@ -715,6 +709,7 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
font-family: $font-family-200;
line-height: 16px; line-height: 16px;
color: $clr-gray-600; color: $clr-gray-600;
padding: 12px 0; padding: 12px 0;
@ -731,21 +726,25 @@
} }
tfoot { tfoot {
td.info, tr {
td.monetary { td.info,
font-style: normal; td.monetary {
font-weight: normal; font-style: normal;
font-size: 18px; font-weight: 700;
line-height: 21px; font-size: 18px;
color: $clr-gray-600; line-height: 21px;
font-family: $font-family-100;
color: $clr-gray-600;
}
} }
} }
} }
} }
} }
.cart-links-bottom { .cart-links-bottom.cart-links {
display: flex; display: flex;
float: none;
flex-direction: column; flex-direction: column;
width: 343px; width: 343px;
@ -776,14 +775,13 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $clr-blue-500;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $clr-green-500; @include btn-primary-blue-black();
border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
font-size: 0; font-size: 0;
@ -799,8 +797,8 @@
font-family: $font-family-100; font-family: $font-family-100;
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
color: inherit;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $clr-common-white;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
@ -810,3 +808,307 @@
} }
} }
} }
.container-cart.container-cart-fill {
width: 100%;
padding: 0 !important;
#cart-title {
display: flex !important;
width: 100%;
padding: 0 16px;
text-align: left;
}
.ship-country {
display: none;
}
.cart-template {
.item-quantity-change {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: #00c8ff;
border-radius: 100%;
.icon-plus-sign,
.icon-minus-sign {
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $clr-common-white;
}
}
.icon-plus-sign {
&::after {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
width: 2px;
height: 10px;
transform: translate(-50%, -50%);
background-color: $clr-common-white;
}
&::before {
width: 10px;
height: 2px;
}
}
.icon-minus-sign {
&::before {
width: 10px;
height: 2px;
}
}
}
}
.link-coupon-add,
.link-choose-more-products {
color: $clr-common-black;
span {
color: $clr-common-black;
}
}
.cart-more-options {
padding: 0 16px;
}
.srp-container,
.cart-more-options,
.cart-more-options .srp-data {
width: 100%;
}
.cart-template {
th.shipping-date {
font-size: 0px;
&::before {
content: "Frete";
font-size: 14px;
}
}
th.product-price {
font-size: 0px;
&::before {
content: "Unidade";
font-size: 14px;
}
}
}
.srp-postal-code__form {
width: 100%;
}
.vtex-shipping-preview-0-x-postalCodeForgotten {
display: flex;
gap: 8px;
width: 100%;
align-items: center;
justify-content: flex-start;
}
.ship-postalCode {
width: 62.682215743%;
display: flex;
align-items: flex-start;
flex-direction: column;
.input-small {
width: 100%;
}
}
.srp-pc-input {
width: 34.985422741%;
margin-top: 5px;
}
.srp-data {
margin-bottom: 48.35px;
}
.totalizers {
padding: 0 16px;
width: 100%;
}
.cart-more-options {
.srp-container {
padding: 0;
max-width: none;
}
}
.cart-links-bottom {
width: 100%;
padding: 0 16px;
margin-bottom: 43.42px;
.link-choose-more-products-wrapper {
margin: 0 0 14.91px;
}
}
.coupon-column .coupon-fields {
span {
width: 100%;
display: flex;
align-items: center;
}
}
.cart-template .cart-items td.quantity {
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
input {
border: none;
padding: 0 10px;
box-sizing: content-box;
}
}
@media screen and (min-width: 600px) {
.totalizers {
padding: 0 16px;
margin: 0;
}
.cart-more-options {
.srp-container {
padding: 0 16px;
}
.srp-data {
width: 343px;
}
}
.cart-template .cart-items th {
vertical-align: top;
}
.cart-template-holder {
padding: 0 16px;
}
}
@media screen and (min-width: 1280px) {
width: fluid(1018px, 1280px);
.cart-template .cart-items td.quantity {
margin: 6px auto 0 0;
}
.cart-template {
.shipping-date,
.product-price,
.quantity-price {
text-align: left;
padding: 5px 0;
}
}
.cart-template-holder {
padding: 0;
}
.product-name {
width: auto;
}
.cart-template .cart-items th {
text-align: left;
padding-bottom: 16px;
}
#cart-title {
padding: 0;
}
.cart {
margin-bottom: 48px;
}
.cart-more-options {
padding: 0;
.srp-container {
padding: 0;
}
.srp-data {
margin-bottom: 0;
}
}
.row-fluid.summary {
width: 100%;
margin: 0 auto;
}
.cart-more-options {
width: fluid(280px, 1018px);
float: left;
.srp-container {
.srp-content {
.srp-main-title {
margin-top: 0;
}
}
}
}
.cart-links-bottom.cart-links {
width: fluid(354px, 1018px);
display: flex;
align-items: flex-end;
float: right;
padding: 0;
margin: 0 auto;
}
.btn-place-order-wrapper {
width: 100%;
}
.link-choose-more-products-wrapper {
width: 100%;
text-align: center;
}
.cart-totalizers.totalizers {
width: fluid(354px, 1018px);
float: right;
padding: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
}
}
}

View File

@ -10,9 +10,10 @@
background-color: $clr-common-white; background-color: $clr-common-white;
} }
.container-cart { .container-main.container-cart {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 16px !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -21,43 +22,37 @@
#cart-title { #cart-title {
display: none !important; display: none !important;
} }
.cart-template,
.checkout-container {
min-height: auto;
}
.checkout-container {
padding: 0 16px;
}
.checkout-container,
.cart-template { .cart-template {
min-height: auto;
margin: 0; margin: 0;
} }
@media screen and (min-width: 375px) { .link-choose-products {
.checkout-container { width: fluid(250px, 343px);
width: fluid(300px, 375px); max-width: 250px;
margin: 0 auto; margin: 0 auto;
} }
.link-choose-products { .transactions-container {
width: fluid(250px, 300px); display: none;
max-width: 250px;
margin: 0 auto;
}
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.checkout-container { width: fluid(400px, 1280px);
width: fluid(400px, 1280px); padding: 0 !important;
padding: 0; max-width: none;
}
.link-choose-products { .link-choose-products {
width: fluid(327px, 400px); width: fluid(327px, 400px);
max-width: none; max-width: 327px;
} }
} }
@media screen and (min-width: 2500px) {
width: fluid(659px, 2500px);
}
} }
.empty-cart { .empty-cart {

View File

@ -57,10 +57,6 @@ body {
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) {
margin-left: 30px;
}
} }
.dropdown { .dropdown {

View File

@ -1,15 +1,15 @@
.footerCheckout { .footerCheckout {
padding: 16px 25px 18.88px 8px;
@include mq("md", min) {
padding: 16px 0;
}
}
.footerCheckout {
border-top: 1px solid $clr-common-black;
color: $clr-gray-400; color: $clr-gray-400;
&__wrapper {
border-top: 1px solid $clr-common-black;
padding: 16px 25px 18.88px 8px;
@include mq("md", min) {
padding: 16px 0;
}
}
&__stamps { &__stamps {
order: 0; order: 0;
margin: 0 0 16px; margin: 0 0 16px;
@ -182,3 +182,16 @@
} }
} }
} }
.footerCheckout__prateleira {
div {
h2 {
width: 100%;
font-size: 14px;
text-align: center;
font-weight: 400;
font-family: $font-family-200;
color: $clr-common-black;
}
}
}

View File

@ -161,7 +161,7 @@ body :where(ul, li, ol) {
.progress-item { .progress-item {
&--left, &--left,
&--right { &--right {
width: 39.9183%; width: 40%;
.progress-line { .progress-line {
position: absolute; position: absolute;
@ -183,14 +183,18 @@ body :where(ul, li, ol) {
} }
} }
&--center {
width: 90px;
}
&--right { &--right {
.progress-container { .progress-container {
align-items: flex-end; align-items: flex-end;
} }
.progress-line { .progress-line {
left: 29%; right: 72%;
transform: translateX(-50%); transform: translateX(50%);
} }
} }
} }

View File

@ -21,6 +21,8 @@ $clr-blue-500: #4267b2;
$clr-green-500: #4caf50; $clr-green-500: #4caf50;
$clr-primary-blue-500: #00c8ff;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xxs: 0, xxs: 0,