add product to cart popup
This commit is contained in:
Kakabay
parent
8879459d2c
commit
2b05ea0736
|
|
@ -2011,7 +2011,10 @@ body.no-scroll {
|
|||
color: #c3000e;
|
||||
}
|
||||
|
||||
.popup-cart-overlay {
|
||||
.add-product-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -2024,159 +2027,105 @@ body.no-scroll {
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-cart-overlay.active {
|
||||
.add-product-overlay.active {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.popup-cart-content {
|
||||
.add-product-content {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
width: 100%;
|
||||
max-width: 635px;
|
||||
display: flex;
|
||||
max-width: 585px;
|
||||
flex-direction: column;
|
||||
padding: 40px 0 0 40px;
|
||||
padding: 40px 80px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.3s ease;
|
||||
top: 20%;
|
||||
transition: opacity 0.3s ease;
|
||||
box-shadow: 0 4px 16px 8px rgba(0, 0, 0, 0.3);
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.popup-cart-item-list {
|
||||
.add-product-item-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.add-product-item {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-right: 40px;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-cart-item-list::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
border: 1px #e6e6e6 solid;
|
||||
}
|
||||
|
||||
.popup-cart-item-list::-webkit-scrollbar-track-piece {
|
||||
margin-right: -100px;
|
||||
}
|
||||
|
||||
.popup-cart-close-btn {
|
||||
.add-product-close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-item-trash {
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.popup-cart-item-list::-webkit-scrollbar-track {
|
||||
margin-left: -100px;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.popup-cart-item-list::-webkit-scrollbar-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.popup-cart-item-img {
|
||||
.add-product-item-img {
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-right: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.popup-cart-item-block {
|
||||
.add-product-item-img img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.add-product-item-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.popup-cart-item {
|
||||
.add-product-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.delete-cart-item {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-cart-item-header h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.popup-cart-item-header {
|
||||
.add-product-item-header h4 {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -2%;
|
||||
}
|
||||
|
||||
.add-product-item-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.popup-cart-footer {
|
||||
padding: 20px 0;
|
||||
.add-product-item-price {
|
||||
font-size: 14px;
|
||||
letter-spacing: -2%;
|
||||
}
|
||||
|
||||
.popup-cart-item-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.popup-cart-item-counter {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 5px 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.popup-cart-item-counter div {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.popup-cart-item-plus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-cart-item-minus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-cart-item-footer {
|
||||
.add-product-item-footer {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.popup-cart-footer {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.popup-cart-footer-line {
|
||||
.add-product-footer-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #f2f2f2;
|
||||
margin: 20px 0;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.popup-cart-btn {
|
||||
.add-product-btn {
|
||||
background-color: #c3000e;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
|
|
@ -2188,7 +2137,7 @@ body.no-scroll {
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.popup-cart-btn:hover {
|
||||
.add-product-btn:hover {
|
||||
background-color: #a5000b;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
|
|
@ -2199,17 +2148,32 @@ body.no-scroll {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-cart-overlay.active .popup-cart-content {
|
||||
.add-product-overlay.active .add-product-content {
|
||||
background-color: #fff;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
.popup-cart-title {
|
||||
|
||||
.add-product-title {
|
||||
font-size: 28px;
|
||||
line-height: 120%;
|
||||
font-weight: 700;
|
||||
margin-bottom: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-cart-footer-results {
|
||||
.add-product-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-product-link {
|
||||
cursor: pointer;
|
||||
color: #4e4e4e;
|
||||
}
|
||||
|
||||
.add-product-footer-results {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -2217,7 +2181,7 @@ body.no-scroll {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.popup-cart-footer-results div {
|
||||
.add-product-footer-results div {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2224,145 +2224,49 @@
|
|||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- FOOTER end ================================================================================ -->
|
||||
|
||||
|
||||
<!-- Popup-cart -->
|
||||
<div class="add-product-overlay" id="add-product-overlay">
|
||||
<div class="add-product-content" id="add-product-content">
|
||||
|
||||
<div class="popup-cart-overlay" id="popup-cart-overlay">
|
||||
<div class="popup-cart-content" id="popup-cart-content">
|
||||
<img src="../assets/icons/popup-close-btn.svg" alt="close-btn" class="add-product-close-btn">
|
||||
|
||||
<img src="../assets/icons/popup-close-btn.svg" alt="close-btn" class="popup-cart-close-btn">
|
||||
|
||||
<h2 class="popup-cart-title">Товар добавлен в корзину</h2>
|
||||
|
||||
<div class="popup-cart-item-list">
|
||||
<h2 class="add-product-title">Товар добавлен в корзину</h2>
|
||||
|
||||
<!-- ITEM -->
|
||||
<div class="popup-item-wrapper">
|
||||
<div class="add-product-item">
|
||||
|
||||
<div class="popup-cart-item">
|
||||
<div class="popup-cart-item-img">
|
||||
<div class="add-product-item-wrapper">
|
||||
|
||||
<div class="add-product-item-img">
|
||||
<img src="../assets/images/popup-cart-item-img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="popup-cart-item-block">
|
||||
<div class="popup-cart-item-header">
|
||||
<div class="add-product-item-block">
|
||||
<div class="add-product-item-header">
|
||||
<h4>Телевизор LG OLED 77C2RLA, 77"</h4>
|
||||
<img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
|
||||
<div class="add-product-item-price">58 410,50 m.</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-header">
|
||||
<div class="popup-cart-item-counter">
|
||||
<div class="popup-cart-item-minus">-</div>
|
||||
<div class="popup-cart-item-count">1</div>
|
||||
<div class="popup-cart-item-plus">+</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-price">58 410,50 m.</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="add-product-footer-line"></div>
|
||||
|
||||
<div class="add-product-footer">
|
||||
<a class="add-product-link">Перейти в корзину</a>
|
||||
<a class="add-product-btn">Оформить заказ 🠆</a>
|
||||
|
||||
</div>
|
||||
<div class="popup-cart-footer-line"></div>
|
||||
</div> <!-- ITEM -->
|
||||
<!-- ITEM -->
|
||||
<div class="popup-item-wrapper">
|
||||
|
||||
<div class="popup-cart-item">
|
||||
<div class="popup-cart-item-img">
|
||||
<img src="../assets/images/popup-cart-item-img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="popup-cart-item-block">
|
||||
<div class="popup-cart-item-header">
|
||||
<h4>Телевизор LG OLED 77C2RLA, 77"</h4>
|
||||
<img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
|
||||
</div>
|
||||
<div class="popup-cart-item-header">
|
||||
<div class="popup-cart-item-counter">
|
||||
<div class="popup-cart-item-minus">-</div>
|
||||
<div class="popup-cart-item-count">1</div>
|
||||
<div class="popup-cart-item-plus">+</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-price">58 410,50 m.</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="popup-cart-footer-line"></div>
|
||||
</div> <!-- ITEM -->
|
||||
<!-- ITEM -->
|
||||
<div class="popup-item-wrapper">
|
||||
</div>
|
||||
<!-- Popup-cart end ========================================================================== -->
|
||||
|
||||
<div class="popup-cart-item">
|
||||
<div class="popup-cart-item-img">
|
||||
<img src="../assets/images/popup-cart-item-img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="popup-cart-item-block">
|
||||
<div class="popup-cart-item-header">
|
||||
<h4>Телевизор LG OLED 77C2RLA, 77"</h4>
|
||||
<img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
|
||||
</div>
|
||||
<div class="popup-cart-item-header">
|
||||
<div class="popup-cart-item-counter">
|
||||
<div class="popup-cart-item-minus">-</div>
|
||||
<div class="popup-cart-item-count">1</div>
|
||||
<div class="popup-cart-item-plus">+</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-price">58 410,50 m.</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="popup-cart-footer-line"></div>
|
||||
</div> <!-- ITEM -->
|
||||
<!-- ITEM -->
|
||||
<div class="popup-item-wrapper">
|
||||
|
||||
<div class="popup-cart-item">
|
||||
<div class="popup-cart-item-img">
|
||||
<img src="../assets/images/popup-cart-item-img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="popup-cart-item-block">
|
||||
<div class="popup-cart-item-header">
|
||||
<h4>Телевизор LG OLED 77C2RLA, 77"</h4>
|
||||
<img src="../assets/icons/red-trash.svg" alt="delete-icon" class="popup-item-trash">
|
||||
</div>
|
||||
<div class="popup-cart-item-header">
|
||||
<div class="popup-cart-item-counter">
|
||||
<div class="popup-cart-item-minus">-</div>
|
||||
<div class="popup-cart-item-count">1</div>
|
||||
<div class="popup-cart-item-plus">+</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-price">58 410,50 m.</div>
|
||||
</div>
|
||||
<div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="popup-cart-footer-line"></div>
|
||||
</div> <!-- ITEM -->
|
||||
|
||||
</div> <!--Popup-cart-item-list-->
|
||||
|
||||
<div class="popup-cart-footer">
|
||||
<div class="popup-cart-footer-results">
|
||||
<div class="">В корзине 2 товара</div>
|
||||
<div class="">Итого: 69 521,61 м.</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="popup-cart-footer-line"></div>
|
||||
|
||||
<div class="popup-cart-footer-results">
|
||||
<div class="">Оформить заказ</div>
|
||||
<button type="button" class="popup-cart-btn" id="popup-cart-btn">Продолжить покупки 🠆</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FOOTER end ============================================================================ -->
|
||||
|
|
@ -2526,18 +2430,29 @@
|
|||
closePopup();
|
||||
});
|
||||
|
||||
// Add to cart popup start ====================================================
|
||||
|
||||
|
||||
|
||||
// Add to cart popup start ====================================================
|
||||
const addtoCartBtns = document.querySelectorAll('.item-gallery-cart');
|
||||
const popupOverlay = document.getElementById('popup-cart-overlay');
|
||||
const cartPopup = document.getElementById("popup-cart-content");
|
||||
const popupCartBtn = document.getElementById("popup-cart-btn");
|
||||
const plusButtons = document.querySelectorAll('.popup-cart-item-plus');
|
||||
const minusButtons = document.querySelectorAll('.popup-cart-item-minus');
|
||||
const currentCountElements = document.querySelectorAll('.popup-cart-item-count');
|
||||
const popupCloseIcon = document.querySelector('.popup-cart-close-btn');
|
||||
const popupOverlay = document.getElementById('add-product-overlay');
|
||||
const cartPopup = document.getElementById("add-product-content");
|
||||
const popupCartBtn = document.getElementById("add-product-btn");
|
||||
const plusButtons = document.querySelectorAll('.add-product-item-plus');
|
||||
const minusButtons = document.querySelectorAll('.add-product-item-minus');
|
||||
const currentCountElements = document.querySelectorAll('.add-product-item-count');
|
||||
const popupCloseIcon = document.querySelector('.add-product-close-btn');
|
||||
const deleteItemBtns = document.querySelectorAll('.popup-item-trash')
|
||||
const popupItems = document.querySelectorAll('.popup-item-wrapper')
|
||||
const popupItems = document.querySelectorAll('.add-product-wrapper')
|
||||
|
||||
// Закрыть корзину при нажатии на overlay
|
||||
window.addEventListener('click', (event) => {
|
||||
console.log("hello")
|
||||
if (event.target === popupOverlay) {
|
||||
popupOverlay.classList.remove('active');
|
||||
document.body.classList.remove('no-scroll');
|
||||
}
|
||||
});
|
||||
|
||||
// Открыть корзину при нажатии на кнопку добавления в корзину
|
||||
addtoCartBtns.forEach(button => {
|
||||
|
|
@ -2558,43 +2473,9 @@
|
|||
document.body.classList.remove('no-scroll');
|
||||
});
|
||||
|
||||
// Закрыть корзину при нажатии на overlay
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === popupOverlay) {
|
||||
popupOverlay.classList.remove('active');
|
||||
document.body.classList.remove('no-scroll');
|
||||
}
|
||||
});
|
||||
|
||||
// Увеличить количество при нажатии на плюс
|
||||
plusButtons.forEach((plusButton, index) => {
|
||||
plusButton.addEventListener('click', () => {
|
||||
let currentCount = parseInt(currentCountElements[index].textContent);
|
||||
|
||||
currentCountElements[index].textContent = currentCount + 1;
|
||||
});
|
||||
});
|
||||
|
||||
deleteItemBtns.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
const itemRemove = popupItems[index]
|
||||
|
||||
itemRemove.remove()
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
// Уменьшить количество при нажатии на минус
|
||||
minusButtons.forEach((minusButton, index) => {
|
||||
minusButton.addEventListener('click', () => {
|
||||
let currentCount = parseInt(currentCountElements[index].textContent);
|
||||
|
||||
console.log(currentCount)
|
||||
if (currentCount > 0) {
|
||||
currentCountElements[index].textContent = currentCount - 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue