From dec37e92c8c10fe4bf4cf1ed1ba2dcfb23ea8911 Mon Sep 17 00:00:00 2001 From: Zakhar Date: Mon, 24 Aug 2026 06:45:21 +0300 Subject: [PATCH] promo! before react --- package-lock.json | 130 ++++++++++++++++++++++++++++++++++++++++++++- package.json | 5 +- src/auto_cart.html | 8 +-- src/autocart.js | 74 ++++++++++++++++++++------ 4 files changed, 196 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index ccf73af..7b51046 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,10 @@ "packages": { "": { "dependencies": { - "http-server": "^14.1.1" + "http-server": "^14.1.1", + "react": "^19.2.8", + "react-dom": "^19.2.8", + "styled-components": "^6.5.3" }, "devDependencies": { "@minify-html/node": "^0.18.1", @@ -14,6 +17,21 @@ "ws": "^8.20.1" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz", + "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, "node_modules/@inversifyjs/common": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/@inversifyjs/common/-/common-1.5.2.tgz", @@ -453,6 +471,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -577,6 +604,32 @@ "node": "*" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -1679,6 +1732,12 @@ "node": ">= 0.4" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -1713,6 +1772,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/react": { + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", + "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", + "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.8" + } + }, "node_modules/reflect-metadata": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", @@ -1783,6 +1863,12 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" + }, "node_modules/secure-compare": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", @@ -1947,6 +2033,48 @@ "node": ">=6" } }, + "node_modules/styled-components": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.5.3.tgz", + "integrity": "sha512-vAX79sfpmUerP9fsTTxoTrBDE0RuO4ahjInyWYoohNgqrdg63Ms4q6FJ/o2Fyity82NU3cujOT8Ewl9TThBdwg==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.4.0", + "css-to-react-native": "3.2.0", + "csstype": "3.2.3", + "stylis": "4.3.6" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "css-to-react-native": ">= 3.2.0", + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-native": ">= 0.68.0" + }, + "peerDependenciesMeta": { + "css-to-react-native": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/stylis": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz", + "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index b2715c6..b58660e 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,10 @@ "build": "./build.js" }, "dependencies": { - "http-server": "^14.1.1" + "http-server": "^14.1.1", + "react": "^19.2.8", + "react-dom": "^19.2.8", + "styled-components": "^6.5.3" }, "devDependencies": { "@minify-html/node": "^0.18.1", diff --git a/src/auto_cart.html b/src/auto_cart.html index d997a0a..c7b5c90 100644 --- a/src/auto_cart.html +++ b/src/auto_cart.html @@ -75,7 +75,7 @@ } .loader:after, .loader:before { - content: 'Собираем...'; + content: 'Брок бегает по супермаркету...'; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; @@ -166,6 +166,7 @@ #total-price { font-size: 20px; line-height: 24px; font-weight: 500; color: #0C3B2E; margin-top: 4px;visibility: hidden;} .checkout-btn { background-color: #5EA12D;height: 54px; color: #ffffff; border: none; padding: 14px 32px; border-radius: 12px; font-size: 16px; font-weight: 370; line-height: 20px; cursor: pointer; transition: background 0.2s; } .total-wrap { display: flex; flex-direction: column; align-items: flex-start; } + .total-wrap > div { display: flex; align-items: center; } .checkout-btn:hover { background-color: #72B541; } .checkout-btn:focus, .checkout-btn:focus-visible { background-color: #72B541;box-shadow: 0 4px 10px rgba(12, 59, 46, 0.1); } .checkout-btn:active { background-color: #4A8D19;} @@ -215,6 +216,7 @@ .day-btn { flex: 1; height: 52px;max-width:140px;border: 2px solid #e1e1e1; border-radius: 8px; background: #ffffff; font-size: 16px; line-height:19px;font-weight: 350; color: #0C3B2E; cursor: pointer; transition: 0.2s; } .day-btn:hover { border-color: #6ba531; } .day-btn.active { background: #E6F696; border-color: #5EA12D; } + .day-btn:focus { outline: none; } /* Семья (Кто будет есть?) */ .family-list { display: flex; flex-direction: column; gap: 12px; } @@ -647,7 +649,7 @@
Ваша корзина на -
-
+
84 товара • @@ -670,7 +672,7 @@
-
+
diff --git a/src/autocart.js b/src/autocart.js index 428877f..76a0816 100644 --- a/src/autocart.js +++ b/src/autocart.js @@ -1897,18 +1897,63 @@ const cartPolicy = trustedTypes.createPolicy('cartPolicy', { }); function renderProducts() { - cartList.innerHTML = cartPolicy.createHTML(''); + const existingNodesByKey = new Map(); + + Array.from(cartList.children).forEach(node => { + existingNodesByKey.set(node.dataset.productKey, node); + }); + visibleProducts.forEach((item, index) => { - let node = renderProduct(item, index) - node.getElementsByClassName('item-image')[0].addEventListener('click', () => openModal( - item.image.replace('65,fit', '335,fit'), - item.name, - item.n, - item.total_price, - () => {console.log('replace')}, - () => {console.log('another')}, - )); - cartList.appendChild(node); + const key = item.name; + const signature = JSON.stringify({ + name: item.name, + n: item.n, + price: item.price, + total_price: item.total_price, + currency: item.currency, + image: item.image, + unit: item.unit, + }); + + let node = existingNodesByKey.get(key); + + if (!node || node.dataset.productSignature !== signature) { + const oldNode = node; + + node = renderProduct(item, index); + node.dataset.productKey = key; + node.dataset.productSignature = signature; + + node.getElementsByClassName('item-image')[0].addEventListener('click', () => openModal( + item.image.replace('65,fit', '335,fit'), + item.name, + item.n, + item.total_price, + () => { console.log('replace') }, + () => { console.log('another') }, + )); + + if (oldNode) { + oldNode.replaceWith(node); + } + } else { + const menuBtn = node.querySelector('.menu-btn'); + if (menuBtn) { + menuBtn.dataset.index = index; + } + } + + const currentNodeAtPosition = cartList.children[index]; + + if (currentNodeAtPosition !== node) { + cartList.insertBefore(node, currentNodeAtPosition || null); + } + + existingNodesByKey.delete(key); + }); + + existingNodesByKey.forEach(node => { + node.remove(); }); const remaining = allProducts.length - visibleProducts.length; @@ -1918,6 +1963,7 @@ function renderProducts() { } else { showMoreBtn.classList.add('hidden'); } + updateSummaryCount(); calculateListHeight(); } @@ -2024,12 +2070,8 @@ function wholeRender(initialData) { replaceProduct(allProducts[index].name).then(() => { li.remove(); document.querySelectorAll('.menu-dropdown.active').forEach(el => el.classList.remove('active')); - visibleProducts.splice(index, 1); allProducts.splice(index, 1); - - if(visibleProducts.length < allProducts.length) { - visibleProducts.push(allProducts[visibleProducts.length]); - } + visibleProducts = allProducts.slice(0, visibleProducts ? visibleProducts.length : 5); renderProducts(); calculateListHeight(); });