TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

cart popup started

This commit is contained in:
Kakabay 2024-07-08 19:00:44 +05:00
parent 296fd82e6e
commit 052dfee54d
5 changed files with 288 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/TPS/Shop/publishable/assets/icons/red-trash.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="15" height="21" viewBox="0 0 15 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_23_418)">
<path d="M13.5581 2.875H10.3851V2.281C10.391 1.8155 10.2121 1.36665 9.88765 1.03281C9.56318 0.698972 9.11961 0.507373 8.65413 0.5L6.34613 0.5C5.88065 0.507373 5.43707 0.698972 5.11261 1.03281C4.78814 1.36665 4.60925 1.8155 4.61513 2.281V2.875H1.44213C1.05427 2.88106 0.684649 3.04069 0.414326 3.31888C0.144003 3.59708 -0.00495239 3.97113 0.000125706 4.359V6.438C-0.00201204 6.59325 0.0575495 6.743 0.165733 6.85437C0.273917 6.96575 0.421878 7.02963 0.577125 7.032H0.892124L1.39212 17.804C1.40649 18.2546 1.594 18.6823 1.91565 18.9982C2.23731 19.3141 2.66835 19.4938 3.11913 19.5H11.8801C12.332 19.4945 12.7643 19.3145 13.0865 18.9977C13.4087 18.6809 13.596 18.2517 13.6091 17.8L14.1091 7.028H14.4241C14.5785 7.02537 14.7256 6.96192 14.8335 6.85144C14.9413 6.74097 15.0012 6.59239 15.0001 6.438V4.359C15.0052 3.97113 14.8562 3.59708 14.5859 3.31888C14.3156 3.04069 13.946 2.88106 13.5581 2.875ZM5.77013 2.281C5.76799 2.12575 5.82755 1.976 5.93573 1.86463C6.04392 1.75325 6.19188 1.68937 6.34713 1.687H8.65512C8.81037 1.68937 8.95833 1.75325 9.06652 1.86463C9.1747 1.976 9.23426 2.12575 9.23212 2.281V2.875H5.76913L5.77013 2.281ZM1.15412 4.359C1.1532 4.32035 1.15992 4.28191 1.17392 4.24587C1.18792 4.20984 1.2089 4.17693 1.23568 4.14905C1.26245 4.12116 1.29447 4.09885 1.3299 4.08339C1.36533 4.06794 1.40348 4.05965 1.44213 4.059H13.5581C13.5968 4.05965 13.6349 4.06794 13.6703 4.08339C13.7058 4.09885 13.7378 4.12116 13.7646 4.14905C13.7913 4.17693 13.8123 4.20984 13.8263 4.24587C13.8403 4.28191 13.8471 4.32035 13.8461 4.359V5.844H1.15412V4.359ZM12.4541 17.747C12.4495 17.8974 12.387 18.0402 12.2797 18.1456C12.1724 18.251 12.0286 18.311 11.8781 18.313H3.11913C2.9687 18.311 2.82484 18.251 2.71753 18.1456C2.61023 18.0402 2.54775 17.8974 2.54312 17.747L2.04312 7.031H12.9531L12.4541 17.747Z" fill="#C3000E"/>
<path d="M7.49974 17.125C7.65728 17.125 7.80837 17.0624 7.91977 16.951C8.03116 16.8396 8.09375 16.6885 8.09375 16.531V8.81197C8.09703 8.73198 8.08411 8.65214 8.05577 8.57727C8.02742 8.5024 7.98423 8.43404 7.9288 8.37628C7.87336 8.31852 7.80683 8.27257 7.73318 8.24118C7.65954 8.20979 7.5803 8.1936 7.50024 8.1936C7.42018 8.1936 7.34096 8.20979 7.26732 8.24118C7.19367 8.27257 7.12713 8.31852 7.0717 8.37628C7.01626 8.43404 6.97308 8.5024 6.94473 8.57727C6.91638 8.65214 6.90347 8.73198 6.90675 8.81197V16.531C6.90675 16.6883 6.96918 16.8393 7.08036 16.9506C7.19155 17.062 7.34237 17.1247 7.49974 17.125Z" fill="#C3000E"/>
<path d="M10.3781 17.1251C10.5357 17.1251 10.6868 17.0625 10.7982 16.9511C10.9096 16.8397 10.9721 16.6886 10.9721 16.5311V8.81207C10.9658 8.65888 10.9006 8.51405 10.79 8.40788C10.6794 8.30172 10.532 8.24243 10.3787 8.24243C10.2253 8.24243 10.078 8.30172 9.96735 8.40788C9.85673 8.51405 9.79145 8.65888 9.78516 8.81207V16.5311C9.78516 16.6884 9.84759 16.8394 9.95877 16.9507C10.07 17.0621 10.2208 17.1248 10.3781 17.1251Z" fill="#C3000E"/>
<path d="M4.62326 17.1251C4.7808 17.1251 4.93189 17.0625 5.04329 16.9511C5.15469 16.8397 5.21727 16.6886 5.21727 16.5311V8.81207C5.21098 8.65888 5.14569 8.51405 5.03508 8.40788C4.92447 8.30172 4.77708 8.24243 4.62376 8.24243C4.47044 8.24243 4.32306 8.30172 4.21245 8.40788C4.10183 8.51405 4.03656 8.65888 4.03027 8.81207V16.5311C4.03027 16.6884 4.09271 16.8394 4.20389 16.9507C4.31507 17.0621 4.4659 17.1248 4.62326 17.1251Z" fill="#C3000E"/>
</g>
<defs>
<clipPath id="clip0_23_418">
<rect width="15" height="20" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
packages/TPS/Shop/publishable/assets/images/popup-cart-item-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

149
packages/TPS/Shop/publishable/assets/styles/style.css vendored
View File

@ -2010,6 +2010,155 @@ body.no-scroll {
color: #c3000e;
}
.popup-cart-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 20;
pointer-events: none;
opacity: 0;
transition: all 0.3s ease-out;
}
.popup-cart-overlay.active {
pointer-events: all;
opacity: 1;
}
.popup-cart-content {
width: 100%;
max-width: 635px;
display: flex;
flex-direction: column;
padding: 40px 40px 0;
position: fixed;
top: 0;
right: 0;
height: 100%;
transform: translateX(100%);
transition: all 0.3s ease;
box-shadow: 0 4px 16px 8px rgba(0, 0, 0, 0.3);
}
.popup-cart-item-list {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.popup-cart-item-img {
background-color: #f2f2f2;
padding: 10px;
border-radius: 6px;
margin-right: 20px;
}
.popup-cart-item-block {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.popup-cart-item {
display: flex;
align-items: center;
}
.popup-cart-item-header h4 {
font-size: 18px;
}
.popup-cart-item-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.popup-cart-footer {
padding: 20px 0;
}
.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-footer {
font-size: 12px;
}
.popup-cart-footer-line {
width: 100%;
height: 1px;
background-color: #f2f2f2;
margin: 20px 0;
}
.popup-cart-btn {
background-color: #c3000e;
font-size: 16px;
padding: 20px;
border-radius: 6px;
color: #fff;
border: 0;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease-out;
}
.popup-cart-btn:hover {
background-color: #a5000b;
font-size: 16px;
padding: 20px;
border-radius: 6px;
color: #fff;
border: 0;
font-weight: 600;
cursor: pointer;
}
.popup-cart-overlay.active .popup-cart-content {
background-color: #fff;
transform: translateX(0%);
}
.popup-cart-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 50px;
}
.popup-cart-footer-results {
display: flex;
align-items: center;
justify-content: space-between;
color: #4e4e4e;
font-size: 14px;
}
.popup-cart-footer-results div {
font-size: 14px;
}
.review-details {
width: 100%;
display: flex;

94
packages/TPS/Shop/publishable/pages/index.html
View File

@ -2096,9 +2096,6 @@
<h3 class="close-review-popup-button" id="closeReviewPopupText">Закрыть окно</h3>
</div>
</div>
</div>
</div>
</section>
@ -2228,6 +2225,57 @@
</footer>
<!-- Popup-cart -->
<div class="popup-cart-overlay" id="popup-cart-overlay">
<div class="popup-cart-content" id="popup-cart-content">
<h2 class="popup-cart-title">Товар добавлен в корзину</h2>
<div class="popup-cart-item-list">
<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="">
</div>
<div class="popup-cart-item-header">
<div class="popup-cart-item-counter">
<div class="popup-cart-item-plus">-</div>
<div class="">1</div>
<div class="popup-cart-item-minus">+</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> <!--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 ============================================================================ -->
@ -2236,7 +2284,7 @@
<script src="../assets/scripts/script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Review popup start
// Review popup start =======================================
const popup = document.getElementById('review-popup');
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
@ -2250,7 +2298,7 @@
const nameInput = document.getElementById("name");
const reviewInput = document.getElementById("review");
// Create the loader element
// Create the loader element ==============================================================
const loader = document.createElement("div");
loader.className = "loader";
@ -2314,7 +2362,7 @@
}
});
// Review rating click effect start
// Review rating click effect start ============================================
const ratingContainers = document.querySelectorAll(".review-rating--popup");
ratingContainers.forEach(container => {
@ -2356,7 +2404,7 @@
});
});
// Send review
// Send review ========================================================================
sendReviewButton.addEventListener("click", function() {
// Hide the first popup content
firstPopupContent.style.display = 'none';
@ -2389,10 +2437,38 @@
// Hide the entire popup
closePopup();
});
// 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")
addtoCartBtns.forEach(button => {
button.addEventListener('click', () => {
popupOverlay.classList.add('active');
document.body.classList.add('no-scroll')
});
});
popupCartBtn.addEventListener("click", () => {
popupOverlay.classList.remove('active');
document.body.classList.remove('no-scroll')
})
window.addEventListener('click', (event) => {
if (event.target === popupOverlay) {
popupOverlay.classList.remove('active');
document.body.classList.remove('no-scroll')
}
});
// Add to cart popup end ====================================================
});

41
packages/TPS/Shop/publishable/pages/reviews.html
View File

@ -7,6 +7,8 @@
<title>ElektronikaTM</title>
<link rel="stylesheet" href="../assets/styles/style.css" />
<link rel="stylesheet" href="../assets/styles/reviews.css" />
<link rel="stylesheet" href="../assets/styles/categories-tv.css">
</head>
<body>
<!-- LOGIN/SIGNUP ====================================================================== -->
@ -475,6 +477,20 @@
</header>
<!-- HEADER end ======================================================================== -->
<!-- Breadcrumb ======================================================================== -->
<section class="breadcrumb">
<div class="container">
<div class="breadcrumb-container">
<ul class="breadcrumb">
<li><a href="#">Главная</a></li>
<li><a href="#" class="current">Отзывы о нас</a></li>
</ul>
</div>
</div>
</section>
<!-- Breadcrumb end ======================================================================== -->
<!-- Navigation start ================================================================== -->
<section class="navigation-section">
<div class="container">
@ -657,6 +673,31 @@
</section>
<!-- Reviews section end ============================================================= -->
<section>
<div class="container">
<div class="product-section-pagination-wrapper">
<div class="product-section-pagination">
<div class="pagination-buttons">
<form>
<button class="pagination-button pagination-button-left">
<div>
<img src="../assets/icons/arrow-down-sign-to-navigate.svg" alt="">
</div>
</button>
<span class="mid-button-text">1</span>
<button class="pagination-button pagination-button-right">
<div>
<img src="../assets/icons/arrow-down-sign-to-navigate.svg" alt="">
</div>
</button>
</form>
</div>
<span class="page-count">Всего 20 страниц</span>
</div>
</div>
</div>
</section>
<!-- FOOTER ================================================================================ -->
<footer class="footer">
<div class="container">