{"id":9,"date":"2025-07-16T10:00:18","date_gmt":"2025-07-16T10:00:18","guid":{"rendered":"https:\/\/shamel-wholesale.com\/cart\/"},"modified":"2025-08-10T20:00:41","modified_gmt":"2025-08-10T20:00:41","slug":"cart","status":"publish","type":"page","link":"https:\/\/shamel-wholesale.com\/en\/cart\/","title":{"rendered":"\u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 - \u0646\u0634\u0623\u062a \u062c\u064f\u0645\u0644\u0629<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"cart-page\" id=\"cartPage\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <button class=\"back-btn\" onclick=\"history.back()\">\r\n <svg viewbox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z\"\/>\r\n <\/svg>\r\n <\/button>\r\n <h1 class=\"app-title\">\u0646\u0634\u0623\u062a \u062c\u064f\u0645\u0644\u0629<\/h1>\r\n <div class=\"header-spacer\"><\/div>\r\n <\/div>\r\n \r\n <!-- Loading -->\r\n <div class=\"loading-section\" id=\"loadingSection\">\r\n <div class=\"loading-content\">\r\n <div class=\"loading-icon\">\ud83d\uded2<\/div>\r\n <div class=\"loading-dots\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <p>\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0633\u0644\u0629...<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Main Content -->\r\n <div class=\"main-section\" id=\"mainSection\" style=\"display: none;\">\r\n \r\n <!-- Top Product Section -->\r\n <div class=\"top-product-section\" id=\"topProductSection\" style=\"display: none;\">\r\n <h2 class=\"section-title\">\u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b \u0641\u064a \u062f\u0633\u0648\u0642<\/h2>\r\n <div class=\"products-scroll-container\">\r\n <div class=\"products-scroll\" id=\"productsScroll\">\r\n <!-- \u0633\u064a\u062a\u0645 \u0645\u0644\u0624\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Cart Section -->\r\n <div class=\"cart-section\">\r\n <div class=\"cart-header\">\r\n <h3 class=\"cart-title\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u0644\u0629<\/h3>\r\n <\/div>\r\n \r\n <!-- Cart Items -->\r\n <div class=\"cart-items\" id=\"cartItems\">\r\n <!-- \u0633\u064a\u062a\u0645 \u0645\u0644\u0624\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b -->\r\n <\/div>\r\n \r\n <!-- Empty Cart -->\r\n <div class=\"empty-cart\" id=\"emptyCart\" style=\"display: none;\">\r\n <div class=\"empty-icon\">\ud83d\uded2<\/div>\r\n <h3>\u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u0641\u0627\u0631\u063a\u0629<\/h3>\r\n <p>\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0646\u062a\u062c\u0627\u062a \u0641\u064a \u0627\u0644\u0633\u0644\u0629<\/p>\r\n <button class=\"home-btn\" onclick=\"goToHome()\">\r\n \u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\r\n <\/button>\r\n <\/div>\r\n \r\n <!-- Cart Summary -->\r\n <div class=\"cart-summary\" id=\"cartSummary\" style=\"display: none;\">\r\n <div class=\"summary-row\">\r\n <span class=\"label\">\u0641\u0626\u0627\u062a \u0627\u062e\u0631\u0649<\/span>\r\n <span class=\"value\" id=\"categoriesCount\">0 \u0645\u0646\u062a\u062c<\/span>\r\n <\/div>\r\n <div class=\"divider\"><\/div>\r\n <div class=\"summary-row total\">\r\n <span class=\"label\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a<\/span>\r\n <span class=\"value total-price\" id=\"totalPrice\">0 \u062c.\u0645<\/span>\r\n <\/div>\r\n <div class=\"minimum-row\" id=\"minimumRow\" style=\"display: none;\">\r\n <span class=\"min-label\">\u0627\u0644\u062d\u062f \u0627\u0644\u0627\u062f\u0646\u0649<\/span>\r\n <span class=\"min-amount\" id=\"minAmount\">1,000 \u062c.\u0645<\/span>\r\n <span class=\"min-check\">\u2713<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Sticky Checkout -->\r\n <div class=\"sticky-checkout\" id=\"stickyCheckout\" style=\"display: none;\">\r\n <div class=\"checkout-content\">\r\n <div class=\"total-info\">\r\n <span class=\"checkout-label\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a<\/span>\r\n <span class=\"checkout-total\" id=\"checkoutTotal\">0 \u062c.\u0645<\/span>\r\n <\/div>\r\n <button class=\"checkout-btn\" onclick=\"proceedToCheckout()\">\r\n <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\r\n <path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z\"\/>\r\n <\/svg>\r\n \u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Toast -->\r\n <div class=\"toast-container\" id=\"toastContainer\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Variables - \u0628\u0627\u0644\u0636\u0628\u0637 \u0632\u064a \u0627\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n:root {\r\n --primary-color: #1a365d;\r\n --accent-color: #3182ce;\r\n --success-color: #38a169;\r\n --danger-color: #e53e3e;\r\n --dark-header: #2d3748;\r\n --light-gray: #f7fafc;\r\n --border-color: #e2e8f0;\r\n --text-dark: #2d3748;\r\n --text-light: #718096;\r\n --white: #ffffff;\r\n --card-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n}\r\n\r\n\/* Reset *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n direction: rtl;\r\n background: var(--light-gray);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n}\r\n\r\n.cart-page {\r\n min-height: 100vh;\r\n background: var(--light-gray);\r\n}\r\n\r\n\/* Header - \u0645\u0637\u0627\u0628\u0642 \u0644\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n.header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: var(--dark-header);\r\n color: var(--white);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n box-shadow: var(--card-shadow);\r\n}\r\n\r\n.back-btn {\r\n background: none;\r\n border: none;\r\n color: var(--white);\r\n cursor: pointer;\r\n padding: 8px;\r\n border-radius: 8px;\r\n transition: all 0.2s ease;\r\n width: 40px;\r\n height: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.back-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.back-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n.app-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin: 0;\r\n color: var(--white);\r\n}\r\n\r\n.header-spacer {\r\n width: 40px;\r\n}\r\n\r\n\/* Loading *\/\r\n.loading-section {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 400px;\r\n padding: 40px;\r\n}\r\n\r\n.loading-content {\r\n text-align: center;\r\n}\r\n\r\n.loading-icon {\r\n font-size: 3em;\r\n margin-bottom: 16px;\r\n animation: bounce 2s infinite;\r\n}\r\n\r\n@keyframes bounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\r\n 40% { transform: translateY(-8px); }\r\n 60% { transform: translateY(-4px); }\r\n}\r\n\r\n.loading-dots {\r\n display: flex;\r\n gap: 4px;\r\n justify-content: center;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.loading-dots span {\r\n width: 6px;\r\n height: 6px;\r\n background: var(--accent-color);\r\n border-radius: 50%;\r\n animation: pulse 1.5s infinite;\r\n}\r\n\r\n.loading-dots span:nth-child(1) { animation-delay: 0s; }\r\n.loading-dots span:nth-child(2) { animation-delay: 0.3s; }\r\n.loading-dots span:nth-child(3) { animation-delay: 0.6s; }\r\n\r\n@keyframes pulse {\r\n 0%, 100% { opacity: 0.3; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.2); }\r\n}\r\n\r\n.loading-section p {\r\n color: var(--text-light);\r\n font-size: 14px;\r\n margin: 0;\r\n}\r\n\r\n\/* Main Section *\/\r\n.main-section {\r\n padding: 0;\r\n padding-bottom: 100px;\r\n}\r\n\r\n\/* Top Product Section - \u0633\u0643\u0631\u0648\u0644 \u0623\u0641\u0642\u064a *\/\r\n.top-product-section {\r\n background: var(--white);\r\n padding: 16px 0;\r\n margin-bottom: 0;\r\n}\r\n\r\n.section-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n margin: 0 0 16px 0;\r\n text-align: center;\r\n padding: 0 16px;\r\n}\r\n\r\n.products-scroll-container {\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.products-scroll {\r\n display: flex;\r\n gap: 12px;\r\n padding: 0 16px;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n}\r\n\r\n.products-scroll::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.top-product-card {\r\n background: var(--white);\r\n border: 1px solid var(--border-color);\r\n border-radius: 12px;\r\n padding: 12px;\r\n position: relative;\r\n box-shadow: var(--card-shadow);\r\n min-width: 140px;\r\n flex-shrink: 0;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.top-product-card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.top-product {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 8px;\r\n}\r\n\r\n.product-image-container {\r\n position: relative;\r\n flex-shrink: 0;\r\n}\r\n\r\n.product-image {\r\n width: 50px;\r\n height: 50px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.add-top-btn {\r\n position: absolute;\r\n bottom: -6px;\r\n right: -6px;\r\n background: var(--accent-color);\r\n color: var(--white);\r\n border: none;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 2px 4px rgba(49, 130, 206, 0.3);\r\n font-size: 12px;\r\n font-weight: bold;\r\n}\r\n\r\n.add-top-btn:hover {\r\n transform: scale(1.1);\r\n box-shadow: 0 3px 6px rgba(49, 130, 206, 0.4);\r\n}\r\n\r\n.add-top-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n.product-info {\r\n width: 100%;\r\n}\r\n\r\n.product-name {\r\n font-weight: 500;\r\n color: var(--text-dark);\r\n margin: 0 0 4px 0;\r\n font-size: 12px;\r\n line-height: 1.3;\r\n max-height: 32px;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n}\r\n\r\n.product-price {\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n margin: 0 0 2px 0;\r\n font-size: 14px;\r\n}\r\n\r\n.product-quantity {\r\n color: var(--text-light);\r\n font-size: 10px;\r\n margin: 0;\r\n}\r\n\r\n.product-meta {\r\n color: var(--text-light);\r\n font-size: 9px;\r\n margin: 2px 0 0 0;\r\n}\r\n\r\n\/* Cart Section *\/\r\n.cart-section {\r\n background: var(--white);\r\n margin-top: 0;\r\n}\r\n\r\n.cart-header {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n}\r\n\r\n.cart-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n margin: 0;\r\n}\r\n\r\n\/* Cart Items - \u0645\u0637\u0627\u0628\u0642 100% \u0644\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n.cart-items {\r\n padding: 0;\r\n}\r\n\r\n.cart-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n transition: all 0.2s ease;\r\n position: relative;\r\n}\r\n\r\n.cart-item:hover {\r\n background: rgba(49, 130, 206, 0.02);\r\n}\r\n\r\n.item-image {\r\n width: 50px;\r\n height: 50px;\r\n object-fit: cover;\r\n border-radius: 6px;\r\n border: 1px solid var(--border-color);\r\n flex-shrink: 0;\r\n}\r\n\r\n.item-info {\r\n flex: 1;\r\n text-align: right;\r\n padding-left: 120px; \/* \u0645\u0633\u0627\u062d\u0629 \u0644\u0644\u0623\u0632\u0631\u0627\u0631 *\/\r\n}\r\n\r\n.item-name {\r\n font-weight: 500;\r\n color: var(--text-dark);\r\n margin: 0 0 4px 0;\r\n font-size: 14px;\r\n line-height: 1.3;\r\n}\r\n\r\n.item-meta {\r\n color: var(--text-light);\r\n font-size: 11px;\r\n margin: 0 0 8px 0;\r\n}\r\n\r\n.item-price {\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n font-size: 16px;\r\n margin: 0;\r\n}\r\n\r\n.item-controls {\r\n position: absolute;\r\n left: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n gap: 8px;\r\n}\r\n\r\n\/* \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0645\u0637\u0627\u0628\u0642\u0629 100% \u0644\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n.quantity-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.quantity-controls {\r\n display: flex;\r\n align-items: center;\r\n background: #f1f5f9;\r\n border-radius: 8px;\r\n padding: 2px;\r\n gap: 0;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.qty-btn {\r\n background: var(--white);\r\n border: none;\r\n width: 30px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: 16px;\r\n color: var(--text-dark);\r\n transition: all 0.2s ease;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n user-select: none;\r\n}\r\n\r\n.qty-btn:hover:not(:disabled) {\r\n background: var(--accent-color);\r\n color: var(--white);\r\n transform: scale(1.05);\r\n}\r\n\r\n.qty-btn:active:not(:disabled) {\r\n transform: scale(0.95);\r\n}\r\n\r\n.qty-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n.qty-display {\r\n padding: 0 12px;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n min-width: 24px;\r\n text-align: center;\r\n font-size: 14px;\r\n user-select: none;\r\n}\r\n\r\n.delete-btn {\r\n background: #f1f5f9;\r\n border: none;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: var(--danger-color);\r\n transition: all 0.2s ease;\r\n font-size: 14px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.delete-btn:hover {\r\n background: var(--danger-color);\r\n color: var(--white);\r\n transform: scale(1.05);\r\n}\r\n\r\n.delete-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n\/* Empty Cart *\/\r\n.empty-cart {\r\n text-align: center;\r\n padding: 60px 20px;\r\n}\r\n\r\n.empty-icon {\r\n font-size: 4em;\r\n margin-bottom: 16px;\r\n opacity: 0.3;\r\n}\r\n\r\n.empty-cart h3 {\r\n font-size: 18px;\r\n color: var(--text-dark);\r\n margin: 0 0 8px 0;\r\n font-weight: 600;\r\n}\r\n\r\n.empty-cart p {\r\n color: var(--text-light);\r\n margin: 0 0 24px 0;\r\n font-size: 14px;\r\n}\r\n\r\n.home-btn {\r\n background: var(--accent-color);\r\n color: var(--white);\r\n border: none;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n font-size: 14px;\r\n}\r\n\r\n.home-btn:hover {\r\n background: #2c5aa0;\r\n transform: translateY(-1px);\r\n}\r\n\r\n\/* Cart Summary - \u0645\u0637\u0627\u0628\u0642 \u0644\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n.cart-summary {\r\n padding: 16px;\r\n background: var(--white);\r\n}\r\n\r\n.summary-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 6px 0;\r\n}\r\n\r\n.summary-row .label {\r\n color: var(--text-light);\r\n font-size: 14px;\r\n}\r\n\r\n.summary-row .value {\r\n color: var(--text-dark);\r\n font-size: 14px;\r\n font-weight: 500;\r\n}\r\n\r\n.divider {\r\n height: 1px;\r\n background: var(--border-color);\r\n margin: 8px 0;\r\n}\r\n\r\n.summary-row.total {\r\n font-weight: 600;\r\n padding: 10px 0;\r\n border-top: 1px solid var(--border-color);\r\n}\r\n\r\n.total-price {\r\n color: var(--accent-color);\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.minimum-row {\r\n background: rgba(56, 161, 105, 0.1);\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n margin-top: 8px;\r\n font-size: 13px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.min-label {\r\n color: var(--success-color);\r\n font-weight: 500;\r\n}\r\n\r\n.min-amount {\r\n color: var(--success-color);\r\n font-weight: 600;\r\n}\r\n\r\n.min-check {\r\n color: var(--success-color);\r\n font-weight: bold;\r\n font-size: 16px;\r\n}\r\n\r\n\/* Sticky Checkout - \u0645\u0637\u0627\u0628\u0642 \u0644\u0644\u0631\u064a\u0641\u0631\u0646\u0633 *\/\r\n.sticky-checkout {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: var(--accent-color);\r\n z-index: 1000;\r\n box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.checkout-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 16px;\r\n color: var(--white);\r\n}\r\n\r\n.total-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n}\r\n\r\n.checkout-label {\r\n font-size: 12px;\r\n opacity: 0.9;\r\n}\r\n\r\n.checkout-total {\r\n font-size: 18px;\r\n font-weight: 700;\r\n}\r\n\r\n.checkout-btn {\r\n background: var(--white);\r\n color: var(--accent-color);\r\n border: none;\r\n padding: 12px 20px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 14px;\r\n}\r\n\r\n.checkout-btn:hover {\r\n transform: translateY(-1px);\r\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.checkout-btn svg {\r\n transform: rotate(180deg);\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n\/* Toast *\/\r\n.toast-container {\r\n position: fixed;\r\n top: 80px;\r\n right: 16px;\r\n z-index: 1000;\r\n}\r\n\r\n.toast {\r\n background: var(--dark-header);\r\n color: var(--white);\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n margin-bottom: 8px;\r\n transform: translateX(100%);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);\r\n font-size: 14px;\r\n}\r\n\r\n.toast.show {\r\n transform: translateX(0);\r\n opacity: 1;\r\n}\r\n\r\n.toast.success {\r\n background: var(--success-color);\r\n}\r\n\r\n.toast.error {\r\n background: var(--danger-color);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 768px) {\r\n .main-section {\r\n padding-bottom: 80px;\r\n }\r\n \r\n .cart-item {\r\n padding: 12px 16px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n \r\n .item-info {\r\n padding-left: 0;\r\n }\r\n \r\n .item-controls {\r\n position: static;\r\n width: 100%;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n margin-top: 8px;\r\n transform: none;\r\n }\r\n \r\n .checkout-content {\r\n padding: 12px 16px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .header {\r\n padding: 8px 12px;\r\n }\r\n \r\n .top-product-section, .cart-header {\r\n padding: 12px;\r\n }\r\n \r\n .product-image {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n \r\n .item-image {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ \ud83d\ude80 \u0646\u0638\u0627\u0645 \u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u0627\u0644\u0645\u062a\u0642\u062f\u0645 \u0645\u0639 WooCommerce\r\n\r\nclass WooCommerceCartSystem {\r\n constructor() {\r\n this.cartData = null;\r\n this.topProducts = []; \/\/ \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062a\u0647\u064a\u0626\u0629 \u0643\u0640 array \u0641\u0627\u0631\u063a\r\n this.minimumOrder = 1000;\r\n this.isLoading = false;\r\n this.currency = '\u062c.\u0645';\r\n this.nonce = this.getNonce();\r\n this.init();\r\n }\r\n\r\n async init() {\r\n this.showLoading();\r\n await this.loadCartData();\r\n await this.loadTopProducts();\r\n this.setupEventListeners();\r\n this.showMainContent();\r\n this.updateDisplay();\r\n this.initializeRealTimeUpdates();\r\n }\r\n\r\n \/\/ \u062c\u0644\u0628 NONCE \u0644\u0644\u0623\u0645\u0627\u0646\r\n getNonce() {\r\n const nonceElement = document.querySelector('meta[name=\"wc-cart-nonce\"]');\r\n if (nonceElement) {\r\n return nonceElement.getAttribute('content');\r\n }\r\n \r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 \u062c\u0644\u0628 \u0645\u0646 WordPress\r\n if (typeof wc_cart_params !== 'undefined') {\r\n return wc_cart_params.nonce;\r\n }\r\n \r\n return Math.random().toString(36).substr(2, 9);\r\n }\r\n\r\n showLoading() {\r\n document.getElementById('loadingSection').style.display = 'block';\r\n document.getElementById('mainSection').style.display = 'none';\r\n }\r\n\r\n showMainContent() {\r\n document.getElementById('loadingSection').style.display = 'none';\r\n document.getElementById('mainSection').style.display = 'block';\r\n }\r\n\r\n \/\/ \u062c\u0644\u0628 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0633\u0644\u0629 \u0645\u0646 WooCommerce\r\n async loadCartData() {\r\n try {\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 Store API \u0623\u0648\u0644\u0627\u064b\r\n let response = await fetch('\/wp-json\/wc\/store\/cart', {\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'X-WC-Store-API-Nonce': this.nonce\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n this.cartData = this.normalizeCartData(data);\r\n console.log('\u2705 Cart loaded via Store API:', this.cartData);\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 REST API\r\n response = await fetch('\/wp-json\/wc\/v3\/cart', {\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n this.cartData = this.normalizeCartData(data);\r\n console.log('\u2705 Cart loaded via REST API:', this.cartData);\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 AJAX\r\n const formData = new FormData();\r\n formData.append('action', 'get_cart_contents');\r\n formData.append('nonce', this.nonce);\r\n\r\n response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n credentials: 'include',\r\n body: formData\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (data.success) {\r\n this.cartData = this.normalizeCartData(data.data);\r\n console.log('\u2705 Cart loaded via AJAX:', this.cartData);\r\n return;\r\n }\r\n }\r\n\r\n \/\/ \u0625\u0630\u0627 \u0641\u0634\u0644 \u0643\u0644 \u0634\u064a\u0621\u060c \u0633\u0644\u0629 \u0641\u0627\u0631\u063a\u0629\r\n this.cartData = {\r\n items: [],\r\n totals: { \r\n total_price: 0, \r\n total_items: 0,\r\n currency_symbol: this.currency\r\n }\r\n };\r\n\r\n } catch (error) {\r\n console.error('\u274c Error loading cart:', error);\r\n this.cartData = {\r\n items: [],\r\n totals: { \r\n total_price: 0, \r\n total_items: 0,\r\n currency_symbol: this.currency\r\n }\r\n };\r\n }\r\n }\r\n\r\n \/\/ \u062c\u0644\u0628 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0634\u0627\u0626\u0639\u0629\r\n async loadTopProducts() {\r\n try {\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 Store API\r\n let response = await fetch('\/wp-json\/wc\/store\/products?per_page=5&orderby=popularity&order=desc', {\r\n credentials: 'include'\r\n });\r\n\r\n if (response.ok) {\r\n const products = await response.json();\r\n if (products && products.length > 0) {\r\n this.topProducts = products.map(product => ({\r\n id: product.id,\r\n name: product.name,\r\n regular_price: product.prices ? parseFloat(product.prices.regular_price) \/ 100 : 0,\r\n sale_price: product.prices ? parseFloat(product.prices.sale_price) \/ 100 : 0,\r\n price: product.prices ? parseFloat(product.prices.price) \/ 100 : 0,\r\n image: product.images?.[0]?.src || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png',\r\n sku: product.sku || '',\r\n stock_quantity: product.stock_quantity || 0,\r\n in_stock: product.is_purchasable && product.is_in_stock\r\n }));\r\n console.log('\u2705 Top products loaded:', this.topProducts);\r\n return;\r\n }\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 REST API\r\n response = await fetch('\/wp-json\/wc\/v3\/products?per_page=5&orderby=popularity&order=desc', {\r\n credentials: 'include'\r\n });\r\n\r\n if (response.ok) {\r\n const products = await response.json();\r\n if (products && products.length > 0) {\r\n this.topProducts = products.map(product => ({\r\n id: product.id,\r\n name: product.name,\r\n regular_price: parseFloat(product.regular_price) || 0,\r\n sale_price: parseFloat(product.sale_price) || 0,\r\n price: parseFloat(product.price) || 0,\r\n image: product.images?.[0]?.src || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png',\r\n sku: product.sku || '',\r\n stock_quantity: product.stock_quantity || 0,\r\n in_stock: product.stock_status === 'instock'\r\n }));\r\n console.log('\u2705 Top products loaded via REST:', this.topProducts);\r\n return;\r\n }\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 AJAX\r\n const formData = new FormData();\r\n formData.append('action', 'get_popular_products');\r\n formData.append('limit', '5');\r\n formData.append('nonce', this.nonce);\r\n\r\n response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n credentials: 'include',\r\n body: formData\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (data.success && data.data && data.data.length > 0) {\r\n this.topProducts = data.data;\r\n console.log('\u2705 Top products loaded via AJAX:', this.topProducts);\r\n return;\r\n }\r\n }\r\n\r\n this.topProducts = [];\r\n\r\n } catch (error) {\r\n console.error('\u274c Error loading products:', error);\r\n this.topProducts = [];\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0646\u0633\u064a\u0642 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0633\u0644\u0629\r\n normalizeCartData(data) {\r\n if (!data) return { items: [], totals: { total_price: 0, total_items: 0 } };\r\n\r\n let items = [];\r\n let totals = {\r\n total_price: 0,\r\n total_items: 0,\r\n currency_symbol: this.currency\r\n };\r\n\r\n \/\/ Store API format\r\n if (data.items) {\r\n items = data.items.map(item => ({\r\n key: item.key,\r\n id: item.id,\r\n name: item.name,\r\n quantity: item.quantity,\r\n price: parseFloat(item.prices?.price || item.price || 0) \/ (item.prices ? 100 : 1), \/\/ \u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0623\u0633\u0639\u0627\u0631\r\n line_total: parseFloat(item.totals?.line_total || item.line_total || 0) \/ (item.totals ? 100 : 1),\r\n image: item.images?.[0]?.src || item.image || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png',\r\n variation: item.variation || {},\r\n product_data: item\r\n }));\r\n\r\n if (data.totals) {\r\n totals.total_price = parseFloat(data.totals.total_price || 0) \/ 100; \/\/ \u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\r\n totals.total_items = parseInt(data.totals.total_items || 0);\r\n }\r\n }\r\n \/\/ Legacy format\r\n else if (Array.isArray(data)) {\r\n items = data.map(item => ({\r\n key: item.cart_item_key || item.key,\r\n id: item.product_id || item.id,\r\n name: item.product_name || item.name,\r\n quantity: parseInt(item.quantity || 1),\r\n price: parseFloat(item.product_price || item.price || 0),\r\n line_total: parseFloat(item.line_total || 0),\r\n image: item.product_image || item.image || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png',\r\n variation: item.variation || {},\r\n product_data: item\r\n }));\r\n }\r\n\r\n \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0627\u062a\r\n if (items.length > 0) {\r\n totals.total_items = items.reduce((sum, item) => sum + item.quantity, 0);\r\n totals.total_price = items.reduce((sum, item) => sum + item.line_total, 0);\r\n }\r\n\r\n return { items, totals };\r\n }\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\r\n updateDisplay() {\r\n const hasItems = this.cartData && this.cartData.items && this.cartData.items.length > 0;\r\n \r\n if (hasItems) {\r\n this.showCartWithItems();\r\n } else {\r\n this.showEmptyCart();\r\n }\r\n \r\n this.renderTopProducts();\r\n this.updateTotals();\r\n }\r\n\r\n showEmptyCart() {\r\n document.getElementById('cartItems').style.display = 'none';\r\n document.getElementById('cartSummary').style.display = 'none';\r\n document.getElementById('emptyCart').style.display = 'block';\r\n document.getElementById('stickyCheckout').style.display = 'none';\r\n document.getElementById('topProductSection').style.display = this.topProducts.length > 0 ? 'block' : 'none';\r\n }\r\n\r\n showCartWithItems() {\r\n document.getElementById('emptyCart').style.display = 'none';\r\n document.getElementById('cartItems').style.display = 'block';\r\n document.getElementById('cartSummary').style.display = 'block';\r\n document.getElementById('stickyCheckout').style.display = 'block';\r\n document.getElementById('topProductSection').style.display = this.topProducts.length > 0 ? 'block' : 'none';\r\n \r\n this.renderCartItems();\r\n }\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0634\u0627\u0626\u0639\u0629\r\n renderTopProducts() {\r\n const topProductSection = document.getElementById('topProductSection');\r\n const productsScroll = document.getElementById('productsScroll');\r\n \r\n \/\/ \u062a\u062d\u0642\u0642 \u0645\u0646 \u0648\u062c\u0648\u062f \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\r\n if (!this.topProducts || !Array.isArray(this.topProducts) || this.topProducts.length === 0) {\r\n topProductSection.style.display = 'none';\r\n if (productsScroll) {\r\n productsScroll.innerHTML = '';\r\n }\r\n return;\r\n }\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0642\u0633\u0645\r\n topProductSection.style.display = 'block';\r\n \r\n const productsHTML = this.topProducts.map(product => {\r\n \/\/ \u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u062a\u062c\r\n if (!product || !product.id) {\r\n return '';\r\n }\r\n \r\n const productName = product.name || '\u0645\u0646\u062a\u062c \u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n const productPrice = product.price || product.regular_price || 0;\r\n const productImage = product.image || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png';\r\n const stockQuantity = product.stock_quantity || 0;\r\n const productSku = product.sku || '';\r\n const isInStock = product.in_stock !== false;\r\n \r\n return `\r\n <div class=\"top-product-card\">\r\n <div class=\"top-product\">\r\n <div class=\"product-image-container\">\r\n <img decoding=\"async\" src=\"${productImage}\" alt=\"${productName}\" class=\"product-image\" \r\n onerror=\"this.src='\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png'\">\r\n <button class=\"add-top-btn\" onclick=\"cartSystem.addToCart(${product.id})\" ${!isInStock ? 'disabled' : ''}>\r\n +\r\n <\/button>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <h4 class=\"product-name\">${productName}<\/h4>\r\n <p class=\"product-price\">${this.formatPrice(productPrice)}<\/p>\r\n <p class=\"product-quantity\">${stockQuantity} \u0639\u0644\u0628\u0629<\/p>\r\n <p class=\"product-meta\">${productSku ? productSku + ' - ' : ''}235 \u0645\u0644<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).filter(html => html !== '').join('');\r\n\r\n if (productsScroll) {\r\n productsScroll.innerHTML = productsHTML;\r\n }\r\n }\r\n\r\n \/\/ \u0639\u0631\u0636 \u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0633\u0644\u0629\r\n renderCartItems() {\r\n const cartItemsContainer = document.getElementById('cartItems');\r\n \r\n if (!cartItemsContainer) {\r\n console.error('\u274c Cart items container not found');\r\n return;\r\n }\r\n \r\n if (!this.cartData || !this.cartData.items || !Array.isArray(this.cartData.items) || this.cartData.items.length === 0) {\r\n cartItemsContainer.innerHTML = '';\r\n return;\r\n }\r\n\r\n const itemsHTML = this.cartData.items.map(item => {\r\n \/\/ \u062a\u062d\u0642\u0642 \u0645\u0646 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u062a\u062c\r\n if (!item || !item.key) {\r\n return '';\r\n }\r\n \r\n const itemName = item.name || '\u0645\u0646\u062a\u062c \u063a\u064a\u0631 \u0645\u062d\u062f\u062f';\r\n const itemImage = item.image || '\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png';\r\n const itemQuantity = parseInt(item.quantity) || 1;\r\n const itemPrice = parseFloat(item.line_total || 0) \/ itemQuantity;\r\n const itemKey = item.key;\r\n const variation = item.variation || {};\r\n \r\n return `\r\n <div class=\"cart-item\" data-key=\"${itemKey}\">\r\n <img decoding=\"async\" src=\"${itemImage}\" alt=\"${itemName}\" class=\"item-image\" \r\n onerror=\"this.src='\/wp-content\/plugins\/woocommerce\/assets\/images\/placeholder.png'\">\r\n <div class=\"item-info\">\r\n <h4 class=\"item-name\">${itemName}<\/h4>\r\n <p class=\"item-meta\">${Object.keys(variation).length > 0 ? this.formatVariation(variation) : '\u0646\u0633\u064a\u0645 \u0627\u0644\u0634\u0631\u0642 8 \u0643 + ...'}<\/p>\r\n <p class=\"item-price\">${this.formatPrice(itemPrice)}<\/p>\r\n <\/div>\r\n <div class=\"item-controls\">\r\n <div class=\"quantity-section\">\r\n <div class=\"quantity-controls\">\r\n <button class=\"qty-btn qty-minus\" data-key=\"${itemKey}\" ${itemQuantity <= 1 ? 'disabled' : ''}>\u2212<\/button>\r\n <span class=\"qty-display\">${itemQuantity}<\/span>\r\n <button class=\"qty-btn qty-plus\" data-key=\"${itemKey}\">+<\/button>\r\n <\/div>\r\n <button class=\"delete-btn\" data-key=\"${itemKey}\" title=\"\u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c\">\r\n \ud83d\uddd1\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).filter(html => html !== '').join('');\r\n\r\n cartItemsContainer.innerHTML = itemsHTML;\r\n \r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0644\u0644\u0623\u0632\u0631\u0627\u0631\r\n this.attachCartItemEvents();\r\n }\r\n\r\n \/\/ \u0631\u0628\u0637 \u0627\u0644\u0623\u062d\u062f\u0627\u062b \u0628\u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0633\u0644\u0629\r\n attachCartItemEvents() {\r\n try {\r\n \/\/ \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0632\u064a\u0627\u062f\u0629\r\n document.querySelectorAll('.qty-plus').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const itemKey = btn.dataset.key;\r\n if (itemKey) {\r\n this.increaseQuantity(itemKey);\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0646\u0642\u0635\r\n document.querySelectorAll('.qty-minus').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const itemKey = btn.dataset.key;\r\n if (itemKey) {\r\n this.decreaseQuantity(itemKey);\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u062d\u0630\u0641\r\n document.querySelectorAll('.delete-btn').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const itemKey = btn.dataset.key;\r\n if (itemKey) {\r\n this.removeFromCart(itemKey);\r\n }\r\n });\r\n });\r\n } catch (error) {\r\n console.error('\u274c Error attaching cart events:', error);\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\u0627\u062a\r\n updateTotals() {\r\n if (!this.cartData || !this.cartData.totals) return;\r\n\r\n const totalPrice = this.cartData.totals.total_price || 0;\r\n const totalItems = this.cartData.totals.total_items || 0;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\r\n document.getElementById('categoriesCount').textContent = `${totalItems} \u0645\u0646\u062a\u062c`;\r\n \r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0633\u0639\u0631 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a\r\n const formattedTotal = this.formatPrice(totalPrice);\r\n document.getElementById('totalPrice').textContent = formattedTotal;\r\n document.getElementById('checkoutTotal').textContent = formattedTotal;\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649\r\n const minimumRow = document.getElementById('minimumRow');\r\n if (totalPrice >= this.minimumOrder) {\r\n minimumRow.style.display = 'flex';\r\n } else {\r\n minimumRow.style.display = 'none';\r\n }\r\n }\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0646\u062a\u062c \u0644\u0644\u0633\u0644\u0629\r\n async addToCart(productId, quantity = 1) {\r\n if (this.isLoading) return;\r\n \r\n this.isLoading = true;\r\n this.showToast('\u062c\u0627\u0631\u064a \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c...', 'info');\r\n\r\n try {\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 Store API\r\n let response = await fetch('\/wp-json\/wc\/store\/cart\/add-item', {\r\n method: 'POST',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'X-WC-Store-API-Nonce': this.nonce\r\n },\r\n body: JSON.stringify({\r\n id: productId,\r\n quantity: quantity\r\n })\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n this.cartData = this.normalizeCartData(data);\r\n this.showToast('\u2705 \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c \u0644\u0644\u0633\u0644\u0629', 'success');\r\n this.updateDisplay();\r\n this.isLoading = false;\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 AJAX\r\n const formData = new FormData();\r\n formData.append('action', 'woocommerce_add_to_cart');\r\n formData.append('product_id', productId);\r\n formData.append('quantity', quantity);\r\n formData.append('nonce', this.nonce);\r\n\r\n response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n credentials: 'include',\r\n body: formData\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (data.success) {\r\n await this.loadCartData();\r\n this.showToast('\u2705 \u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c \u0644\u0644\u0633\u0644\u0629', 'success');\r\n this.updateDisplay();\r\n } else {\r\n this.showToast('\u274c ' + (data.data || '\u0641\u0634\u0644 \u0641\u064a \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0646\u062a\u062c'), 'error');\r\n }\r\n } else {\r\n this.showToast('\u274c \u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u0627\u062a\u0635\u0627\u0644', 'error');\r\n }\r\n\r\n } catch (error) {\r\n console.error('Error adding to cart:', error);\r\n this.showToast('\u274c \u062d\u062f\u062b \u062e\u0637\u0623 \u063a\u064a\u0631 \u0645\u062a\u0648\u0642\u0639', 'error');\r\n }\r\n\r\n this.isLoading = false;\r\n }\r\n\r\n \/\/ \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0643\u0645\u064a\u0629\r\n async increaseQuantity(itemKey) {\r\n const item = this.cartData.items.find(i => i.key === itemKey);\r\n if (!item) return;\r\n\r\n await this.updateCartItemQuantity(itemKey, item.quantity + 1);\r\n }\r\n\r\n \/\/ \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u0643\u0645\u064a\u0629\r\n async decreaseQuantity(itemKey) {\r\n const item = this.cartData.items.find(i => i.key === itemKey);\r\n if (!item || item.quantity <= 1) return;\r\n\r\n await this.updateCartItemQuantity(itemKey, item.quantity - 1);\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u0645\u064a\u0629 \u0645\u0646\u062a\u062c\r\n async updateCartItemQuantity(itemKey, newQuantity) {\r\n if (this.isLoading) return;\r\n \r\n this.isLoading = true;\r\n\r\n try {\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 Store API\r\n let response = await fetch(`\/wp-json\/wc\/store\/cart\/items\/${itemKey}`, {\r\n method: 'PUT',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'X-WC-Store-API-Nonce': this.nonce\r\n },\r\n body: JSON.stringify({\r\n quantity: newQuantity\r\n })\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n this.cartData = this.normalizeCartData(data);\r\n this.updateDisplay();\r\n this.isLoading = false;\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 AJAX\r\n const formData = new FormData();\r\n formData.append('action', 'update_cart_item_quantity');\r\n formData.append('cart_item_key', itemKey);\r\n formData.append('quantity', newQuantity);\r\n formData.append('nonce', this.nonce);\r\n\r\n response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n credentials: 'include',\r\n body: formData\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (data.success) {\r\n await this.loadCartData();\r\n this.updateDisplay();\r\n } else {\r\n this.showToast('\u274c \u0641\u0634\u0644 \u0641\u064a \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0643\u0645\u064a\u0629', 'error');\r\n }\r\n }\r\n\r\n } catch (error) {\r\n console.error('Error updating quantity:', error);\r\n this.showToast('\u274c \u062d\u062f\u062b \u062e\u0637\u0623 \u0641\u064a \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0643\u0645\u064a\u0629', 'error');\r\n }\r\n\r\n this.isLoading = false;\r\n }\r\n\r\n \/\/ \u062d\u0630\u0641 \u0645\u0646\u062a\u062c \u0645\u0646 \u0627\u0644\u0633\u0644\u0629\r\n async removeFromCart(itemKey) {\r\n if (this.isLoading) return;\r\n \r\n this.isLoading = true;\r\n this.showToast('\u062c\u0627\u0631\u064a \u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c...', 'info');\r\n\r\n try {\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 Store API\r\n let response = await fetch(`\/wp-json\/wc\/store\/cart\/items\/${itemKey}`, {\r\n method: 'DELETE',\r\n credentials: 'include',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n 'X-WC-Store-API-Nonce': this.nonce\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n this.cartData = this.normalizeCartData(data);\r\n this.showToast('\u2705 \u062a\u0645 \u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c', 'success');\r\n this.updateDisplay();\r\n this.isLoading = false;\r\n return;\r\n }\r\n\r\n \/\/ \u0645\u062d\u0627\u0648\u0644\u0629 AJAX\r\n const formData = new FormData();\r\n formData.append('action', 'remove_cart_item');\r\n formData.append('cart_item_key', itemKey);\r\n formData.append('nonce', this.nonce);\r\n\r\n response = await fetch('\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n credentials: 'include',\r\n body: formData\r\n });\r\n\r\n if (response.ok) {\r\n const data = await response.json();\r\n if (data.success) {\r\n await this.loadCartData();\r\n this.showToast('\u2705 \u062a\u0645 \u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c', 'success');\r\n this.updateDisplay();\r\n } else {\r\n this.showToast('\u274c \u0641\u0634\u0644 \u0641\u064a \u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c', 'error');\r\n }\r\n }\r\n\r\n } catch (error) {\r\n console.error('Error removing item:', error);\r\n this.showToast('\u274c \u062d\u062f\u062b \u062e\u0637\u0623 \u0641\u064a \u062d\u0630\u0641 \u0627\u0644\u0645\u0646\u062a\u062c', 'error');\r\n }\r\n\r\n this.isLoading = false;\r\n }\r\n\r\n \/\/ \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0633\u0639\u0631\r\n formatPrice(price) {\r\n const numPrice = parseFloat(price) || 0;\r\n return `${numPrice.toLocaleString('ar-EG', {maximumFractionDigits: 2})} ${this.currency}`;\r\n }\r\n\r\n \/\/ \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a\r\n formatVariation(variation) {\r\n if (!variation || typeof variation !== 'object') return '';\r\n \r\n return Object.entries(variation)\r\n .map(([key, value]) => `${key}: ${value}`)\r\n .join(', ');\r\n }\r\n\r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u062a\u0646\u0628\u064a\u0647\u0627\u062a\r\n showToast(message, type = 'info') {\r\n const container = document.getElementById('toastContainer');\r\n const toast = document.createElement('div');\r\n toast.className = `toast ${type}`;\r\n toast.textContent = message;\r\n \r\n container.appendChild(toast);\r\n \r\n \/\/ \u0639\u0631\u0636 \u0627\u0644\u062a\u0646\u0628\u064a\u0647\r\n setTimeout(() => toast.classList.add('show'), 100);\r\n \r\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u062a\u0646\u0628\u064a\u0647\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n setTimeout(() => {\r\n if (container.contains(toast)) {\r\n container.removeChild(toast);\r\n }\r\n }, 300);\r\n }, 3000);\r\n }\r\n\r\n \/\/ \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0623\u062d\u062f\u0627\u062b\r\n setupEventListeners() {\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0633\u0644\u0629 \u0643\u0644 30 \u062b\u0627\u0646\u064a\u0629\r\n setInterval(() => {\r\n if (!this.isLoading) {\r\n this.loadCartData().then(() => this.updateDisplay());\r\n }\r\n }, 30000);\r\n\r\n \/\/ \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0639\u0646\u062f \u0627\u0644\u062e\u0631\u0648\u062c\r\n window.addEventListener('beforeunload', () => {\r\n this.cleanup();\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0628\u0627\u0634\u0631\r\n initializeRealTimeUpdates() {\r\n \/\/ \u0645\u0631\u0627\u0642\u0628\u0629 \u062a\u063a\u064a\u064a\u0631\u0627\u062a DOM \u0644\u0644\u0633\u0644\u0629\r\n if ('MutationObserver' in window) {\r\n const observer = new MutationObserver((mutations) => {\r\n mutations.forEach((mutation) => {\r\n if (mutation.type === 'childList') {\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0633\u0644\u0629\r\n setTimeout(() => this.updateDisplay(), 100);\r\n }\r\n });\r\n });\r\n\r\n const cartContainer = document.getElementById('cartItems');\r\n if (cartContainer) {\r\n observer.observe(cartContainer, {\r\n childList: true,\r\n subtree: true\r\n });\r\n }\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0645\u0648\u0627\u0631\u062f\r\n cleanup() {\r\n this.isLoading = false;\r\n this.cartData = null;\r\n this.topProducts = [];\r\n }\r\n}\r\n\r\n\/\/ \u0627\u0644\u062f\u0648\u0627\u0644 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u0648\u0627\u062c\u0647\u0629\r\nfunction goToShop() {\r\n window.location.href = '\/shop';\r\n}\r\n\r\nfunction goToHome() {\r\n window.location.href = '\/';\r\n}\r\n\r\nfunction goToCart() {\r\n window.location.reload();\r\n}\r\n\r\nfunction proceedToCheckout() {\r\n if (cartSystem && cartSystem.cartData && cartSystem.cartData.totals.total_price >= cartSystem.minimumOrder) {\r\n window.location.href = '\/checkout';\r\n } else {\r\n cartSystem.showToast('\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0637\u0644\u0628 1,000 \u062c.\u0645', 'error');\r\n }\r\n}\r\n\r\n\/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0646\u0638\u0627\u0645 \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\nlet cartSystem;\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n cartSystem = new WooCommerceCartSystem();\r\n console.log('\ud83d\ude80 \u0646\u0638\u0627\u0645 \u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u062c\u0627\u0647\u0632');\r\n});\r\n\r\n\/\/ \u062a\u0635\u062f\u064a\u0631 \u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\r\nwindow.cartSystem = cartSystem;\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 – \u0646\u0634\u0623\u062a \u062c\u064f\u0645\u0644\u0629 \u0646\u0634\u0623\u062a \u062c\u064f\u0645\u0644\u0629 \ud83d\uded2 \u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0633\u0644\u0629… \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u0637\u0644\u0628\u0627\u064b \u0641\u064a \u062f\u0633\u0648\u0642 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0633\u0644\u0629 \ud83d\uded2 \u0633\u0644\u0629<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":62,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":722,"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions\/722"}],"wp:attachment":[{"href":"https:\/\/shamel-wholesale.com\/en\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}