THE CART

mirzaev/arming_bot/system/controllers/cart.php

@@ -50,7 +50,7 @@ final class cart extends core
 			// Search for filters and write to the buffer of global variables of view templater
 			$this->view->menu = menu::_read(
 				return: 'MERGE(d, { name: d.name.@language })',
-				sort: 'd.position ASC, d.created DESC, d._key DESC',
+				sort: 'd.style.order ASC, d.created DESC, d._key DESC',
 				amount: 4,
 				parameters: ['language' => $this->language->name],
 				errors: $this->errors['menu']
@@ -118,7 +118,7 @@ final class cart extends core
 
 			// Validating @todo add throwing errors
 			$identifier = null;
-			if (!empty($parameters['identifier']) && preg_match('/[\d]+/', urldecode($parameters['identifier']), $matches)) $identifier = (int) $matches[0];
+			if (isset($parameters['identifier']) && preg_match('/[\d]+/', urldecode($parameters['identifier']), $matches)) $identifier = (int) $matches[0];
 
 			if (isset($identifier)) {
 				// Received and validated identfier of the product
@@ -143,7 +143,7 @@ final class cart extends core
 
 						// Validating @todo add throwing errors
 						$type = null;
-						if (!empty($parameters['type']) && preg_match('/[\w]+/', urldecode($parameters['type']), $matches)) $type = $matches[0];
+						if (isset($parameters['type']) && preg_match('/[\w]+/', urldecode($parameters['type']), $matches)) $type = $matches[0];
 
 						if (isset($type)) {
 							// Received and validated type of action with the product
@@ -173,7 +173,7 @@ final class cart extends core
 
 								// Validating @todo add throwing errors
 								$_amount = null;
-								if (!empty($parameters['amount']) && preg_match('/[\d]+/', urldecode($parameters['amount']), $matches)) $_amount = (int) $matches[0];
+								if (isset($parameters['amount']) && preg_match('/[\d]+/', urldecode($parameters['amount']), $matches)) $_amount = (int) $matches[0];
 
 								if (isset($_amount)) {
 									// Received and validated amount parameter for action with the product
@@ -181,20 +181,26 @@ final class cart extends core
 									if ($type === 'write') {
 										// Increase amount of the product in the cart
 
-										if (101 > $amount += $_amount) {
+										if ($amount + $_amount < 101) {
 											// Validated amount to wrting
 
 											// Writing the product to the cart
 											$this->cart->write(product: $product, amount: $_amount, errors: $this->errors['cart']);
+
+											// Reinitialize the buffer with amount of the product in the cart
+											$amount += $_amount;
 										}
 									} else if ($type === 'delete') {
 										// Decrease amount of the product in the cart
 
-										if (-1 < $amount -= $_amount) {
+										if ($amount - $_amount > -1) {
 											// Validated amount to deleting
 
 											// Deleting the product from the cart
 											$this->cart->delete(product: $product, amount: $_amount, errors: $this->errors['cart']);
+
+											// Reinitialize the buffer with amount of the product in the cart
+											$amount -= $_amount;
 										}
 									} else if ($type === 'set') {
 										// Set amount of the product in the cart
@@ -255,4 +261,49 @@ final class cart extends core
 		// Exit (fail)
 		return null;
 	}
+
+	/**
+	 * Summary
+	 *
+	 * @param array $parameters Parameters of the request (POST + GET)
+	 */
+	public function summary(array $parameters = []): ?string
+	{
+		if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+			// POST request
+
+			// Initializing summary data of the cart
+			$summary = $this->cart?->summary(currency: $this->currency, errors: $this->errors['cart']);
+
+			// Initializing response headers
+			header('Content-Type: application/json');
+			header('Content-Encoding: none');
+			header('X-Accel-Buffering: no');
+
+			// Initializing of the output buffer
+			ob_start();
+
+			// Generating the reponse
+			echo json_encode(
+				[
+					'cost' => $summary['cost'] ?? 0,
+					'amount' => $summary['amount'] ?? 0,
+					'errors' => $this->errors
+				]
+			);
+
+			// Initializing a response headers
+			header('Content-Length: ' . ob_get_length());
+
+			// Sending and deinitializing of the output buffer
+			ob_end_flush();
+			flush();
+
+			// Exit (success)
+			return null;
+		}
+
+		// Exit (fail)
+		return null;
+	}
 }

mirzaev/arming_bot/system/controllers/catalog.php

@@ -43,7 +43,7 @@ final class catalog extends core
 	public function index(array $parameters = []): ?string
 	{
 		// validating
-		if (!empty($parameters['product']) && preg_match('/[\d]+/', $parameters['product'], $matches)) $product = (int) $matches[0];
+		if (isset($parameters['product']) && preg_match('/[\d]+/', $parameters['product'], $matches)) $product = (int) $matches[0];
 
 		if (isset($product)) {
 			// Received and validated identifier of the product
@@ -68,7 +68,7 @@ final class catalog extends core
 		$_filters = 'd.deleted != true && d.hidden != true';
 
 		// Validating
-		if (!empty($parameters['brand']) && preg_match('/[\w\s]+/u', urldecode($parameters['brand']), $matches)) $brand = $matches[0];
+		if (isset($parameters['brand']) && preg_match('/[\w\s]+/u', urldecode($parameters['brand']), $matches)) $brand = $matches[0];
 
 		if (isset($brand)) {
 			// Received and validated filter by brand
@@ -130,7 +130,7 @@ final class catalog extends core
 		$_sort = 'd.position ASC, d.name ASC, d.created DESC';
 
 		// Validating
-		if (!empty($parameters['sort']) && preg_match('/[\w\s]+/u', $parameters['sort'], $matches)) $sort = $matches[0];
+		if (isset($parameters['sort']) && preg_match('/[\w\s]+/u', $parameters['sort'], $matches)) $sort = $matches[0];
 
 		if (isset($sort)) {
 			// Received and validated sort
@@ -181,7 +181,7 @@ final class catalog extends core
 		}
 
 		// Validating @todo add throwing errors
-		if (!empty($parameters['text']) && preg_match('/[\w\s]+/u', urldecode($parameters['text']), $matches) && mb_strlen($matches[0]) > 2) $text = $matches[0];
+		if (isset($parameters['text']) && preg_match('/[\w\s]+/u', urldecode($parameters['text']), $matches) && mb_strlen($matches[0]) > 2) $text = $matches[0];
 
 		if (isset($text)) {
 			// Received and validated text
@@ -234,7 +234,7 @@ final class catalog extends core
 		}
 
 		// Validating
-		if (!empty($parameters['category']) && preg_match('/[\d]+/', $parameters['category'], $matches)) $category = (int) $matches[0];
+		if (isset($parameters['category']) && preg_match('/[\d]+/', $parameters['category'], $matches)) $category = (int) $matches[0];
 
 		if (isset($category)) {
 			// Received and validated identifier of the category 
@@ -337,7 +337,7 @@ final class catalog extends core
 			// Search for filters and write to the buffer of global variables of view templater
 			$this->view->menu = menu::_read(
 				return: 'MERGE(d, { name: d.name.@language })',
-				sort: 'd.position ASC, d.created DESC, d._key DESC',
+				sort: 'd.style.order ASC, d.created DESC, d._key DESC',
 				amount: 4,
 				parameters: ['language' => $this->language->name],
 				errors: $this->errors['menu']

mirzaev/arming_bot/system/models/cart.php

@@ -52,7 +52,7 @@ final class cart extends core implements document_interface, collection_interfac
 	 *
 	 * @return array|null Array with implementing objects of documents from ArangoDB, if found
 	 */
-	public function all(
+	public function products(
 		?language $language = language::en,
 		?currency $currency = currency::usd,
 		array &$errors = []
@@ -72,7 +72,7 @@ final class cart extends core implements document_interface, collection_interfac
 								RETURN {
 									[d._id]: {
 										amount,
-										product: MERGE(d, {
+										document: MERGE(d, {
 											name: d.name.@language, 
 											description: d.description.@language, 
 											compatibility: d.compatibility.@language, 
@@ -124,6 +124,64 @@ final class cart extends core implements document_interface, collection_interfac
 		return null;
 	}
 
+	/**
+	 * Search for summary of all products
+	 *
+	 * Search for summary of all products in the cart
+	 *
+	 * @param currency|null $currency Currency
+	 * @param array &$errors Registry of errors
+	 *
+	 * @return array|null Array with implementing objects of documents from ArangoDB, if found
+	 */
+	public function summary(
+		?currency $currency = currency::usd,
+		array &$errors = []
+	): ?array {
+		try {
+			if (collection::initialize(static::COLLECTION, static::TYPE, errors: $errors)) {
+				if (collection::initialize(reservation::COLLECTION, reservation::TYPE, errors: $errors)) {
+					if (collection::initialize(product::COLLECTION, product::TYPE, errors: $errors)) {
+						// Initialized collections
+
+						// Search for all products in the cart
+						$result = @collection::execute(
+							<<<AQL
+							FOR v IN 1..1 INBOUND @cart GRAPH @graph
+								FILTER IS_SAME_COLLECTION(@collection, v._id)
+								COLLECT AGGREGATE amount = COUNT(v), cost = SUM(v.cost.@currency)
+								RETURN { amount, cost }
+							AQL,
+							[
+								'graph' => 'catalog',
+								'cart' => $this->getId(),
+								'collection' => product::COLLECTION,
+								'currency' => $currency->name
+							],
+							flat: true,
+							errors: $errors
+						);
+
+						// Exit (success)
+						return $result;
+					} else throw new exception('Failed to initialize ' . product::TYPE . ' collection: ' . product::COLLECTION);
+				} else throw new exception('Failed to initialize ' . reservation::TYPE . ' collection: ' . reservation::COLLECTION);
+			} else throw new exception('Failed to initialize ' . static::TYPE . ' collection: ' . static::COLLECTION);
+		} catch (exception $e) {
+			// Writing to the registry of errors
+			$errors[] = [
+				'text' => $e->getMessage(),
+				'file' => $e->getFile(),
+				'line' => $e->getLine(),
+				'stack' => $e->getTrace()
+			];
+		}
+
+		// Exit (fail)
+		return null;
+	}
+
+
 	/**
 	 * Count
 	 *

mirzaev/arming_bot/system/public/index.php

@@ -43,6 +43,7 @@ $router
 	->write('/cart', 'cart', 'index', 'GET')
 	->write('/cart', 'cart', 'index', 'POST')
 	->write('/cart/product', 'cart', 'product', 'POST')
+	->write('/cart/summary', 'cart', 'summary', 'POST')
 	->write('/account/write', 'account', 'write', 'POST')
 	->write('/session/write', 'session', 'write', 'POST')
 	->write('/session/connect/telegram', 'session', 'telegram', 'POST')

mirzaev/arming_bot/system/public/js/cart.js

@@ -39,17 +39,26 @@ import("/js/core.js").then(() =>
 					 *
 					 * Toggle the product in the cart (interface)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
 					 * @return {bool} True if an error occurs to continue the event execution
 					 */
-					static toggle(button, product, force = false) {
+					static toggle(element, product, remove = false, force = false) {
-						// Blocking the button
+						// Blocking the element
-						button.setAttribute("disabled", "true");
+						element.setAttribute("disabled", "true");
 
 						// Execute under damper
-						this.toggle_damper(button, product, force);
+						this.toggle_damper(
+							element,
+							product,
+							"toggle",
+							undefined,
+							remove,
+							force,
+						);
 
 						// Exit (success)
 						return false;
@@ -60,115 +69,44 @@ import("/js/core.js").then(() =>
 					 *
 					 * Toggle the product in the cart (damper)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
-					 * @return {void}
+					 * @return {Promise}
 					 */
 					static toggle_damper = core.damper(
-						(...variables) => this.toggle_system(...variables),
+						(...variables) => this.product(...variables).then(this.summary),
 						300,
-						2,
+						6,
 					);
 
-					/**
-					 * Toggle
-					 *
-					 * Toggle the product in the cart (system)
-					 *
-					 * @param {HTMLElement} button Button of the product <a>
-					 *
-					 * @return {Promise} Request to the server
-					 *
-					 * @todo add unblocking button by timer + everywhere
-					 */
-					static async toggle_system(button, product) {
-						if (
-							product instanceof HTMLElement &&
-							button instanceof HTMLElement
-						) {
-							// Validated
-
-							// Initializing of identifier of the product
-							const identifier = product.getAttribute(
-								"data-product-identifier",
-							);
-
-							if (typeof identifier === "string" && identifier.length > 0) {
-								// Validated identifier
-
-								return await core.request(
-									"/cart/product",
-									`identifier=${identifier}&type=toggle`,
-								)
-									.then((json) => {
-										if (
-											json.errors !== null &&
-											typeof json.errors === "object" &&
-											json.errors.length > 0
-										) {
-											// Fail (received errors)
-										} else {
-											// Success (not received errors)
-
-											// Unblocking the button
-											button.removeAttribute("disabled");
-
-											// Writing offset of hue-rotate to indicate that the product is in the cart
-											product.style.setProperty(
-												"--hue-rotate-offset",
-												json.amount + "0deg",
-											);
-
-											// Writing attribute with amount of the product in the cart
-											product.setAttribute(
-												"data-product-amount",
-												json.amount,
-											);
-
-											// Initializing the amount <span> element
-											const amounts = product.querySelectorAll(
-												'span[data-product-parameter="amount"]',
-											);
-
-											for (const amount of amounts) {
-												// Iterating over an amount elements
-
-												if (amount instanceof HTMLInputElement) {
-													// The <input> element
-
-													// Writing amount of the product in the cart
-													amount.value = json.amount;
-												} else {
-													// Not the <input> element
-
-													// Writing amount of the product in the cart
-													amount.innerText = json.amount;
-												}
-											}
-										}
-									});
-							}
-						}
-					}
-
 					/**
 					 * Write
 					 *
 					 * Write the product in the cart (interface)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
 					 * @param {number} amount Amount of writings
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
 					 * @return {bool} True if an error occurs to continue the event execution
 					 */
-					static write(button, product, amount = 1, force = false) {
+					static write(
-						// Blocking the button
+						element,
-						button.setAttribute("disabled", "true");
+						product,
+						amount = 1,
+						remove = false,
+						force = false,
+					) {
+						// Blocking the element
+						element.setAttribute("disabled", "true");
 
 						// Execute under damper
-						this.write_damper(button, amount, force);
+						this.write_damper(element, product, "write", amount, remove, force);
 
 						// Exit (success)
 						return false;
@@ -179,120 +117,52 @@ import("/js/core.js").then(() =>
 					 *
 					 * Write the product in the cart (damper)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
 					 * @param {number} amount Amount of writings
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
-					 * @return {void}
+					 * @return {Promise}
 					 */
 					static write_damper = core.damper(
-						(...variables) => this.write_system(...variables),
+						(...variables) => this.product(...variables).then(this.summary),
 						300,
-						3,
+						6,
 					);
 
-					/**
-					 * Write
-					 *
-					 * Write the product in the cart (system)
-					 *
-					 * @param {HTMLElement} button Button of the product <a>
-					 * @param {number} amount Amount of writings
-					 *
-					 * @return {Promise} Request to the server
-					 *
-					 * @todo add unblocking button by timer + everywhere
-					 */
-					static async write_system(button, product, amount = 1) {
-						if (
-							product instanceof HTMLElement &&
-							button instanceof HTMLElement &&
-							typeof amount === "number" &&
-							amount > -1 &&
-							amount < 100
-						) {
-							// Validated
-
-							// Initializing of identifier of the product
-							const identifier = product.getAttribute(
-								"data-product-identifier",
-							);
-
-							if (typeof identifier === "string" && identifier.length > 0) {
-								// Validated identifier
-
-								return await core.request(
-									"/cart/product",
-									`identifier=${identifier}&type=write&amount=${amount}`,
-								)
-									.then((json) => {
-										if (
-											json.errors !== null &&
-											typeof json.errors === "object" &&
-											json.errors.length > 0
-										) {
-											// Fail (received errors)
-										} else {
-											// Success (not received errors)
-
-											// Unblocking the button
-											button.removeAttribute("disabled");
-
-											// Writing offset of hue-rotate to indicate that the product is in the cart
-											product.style.setProperty(
-												"--hue-rotate-offset",
-												json.amount + "0deg",
-											);
-
-											// Writing attribute with amount of the product in the cart
-											product.setAttribute(
-												"data-product-amount",
-												json.amount,
-											);
-
-											// Initializing the amount <span> element
-											const amounts = product.querySelectorAll(
-												'span[data-product-parameter="amount"]',
-											);
-
-											for (const amount of amounts) {
-												// Iterating over an amount elements
-
-												if (amount instanceof HTMLInputElement) {
-													// The <input> element
-
-													// Writing amount of the product in the cart
-													amount.value = json.amount;
-												} else {
-													// Not the <input> element
-
-													// Writing amount of the product in the cart
-													amount.innerText = json.amount;
-												}
-											}
-										}
-									});
-							}
-						}
-					}
-
 					/**
 					 * Delete
 					 *
 					 * Delete the product from the cart (interface)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
 					 * @param {number} amount Amount of deletings
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
 					 * @return {bool} True if an error occurs to continue the event execution
 					 */
-					static delete(button, product, amount = 1, force = false) {
+					static delete(
-						// Blocking the button
+						element,
-						button.setAttribute("disabled", "true");
+						product,
+						amount = 1,
+						remove = false,
+						force = false,
+					) {
+						// Blocking the element
+						element.setAttribute("disabled", "true");
 
 						// Execute under damper
-						this.delete_damper(button, amount, force);
+						this.delete_damper(
+							element,
+							product,
+							"delete",
+							amount,
+							remove,
+							force,
+						);
 
 						// Exit (success)
 						return false;
@@ -303,120 +173,44 @@ import("/js/core.js").then(() =>
 					 *
 					 * Delete the product from the cart (damper)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
 					 * @param {number} amount Amount of deletings
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
-					 * @return {void}
+					 * @return {Promise}
 					 */
 					static delete_damper = core.damper(
-						(...variables) => this.delete_system(...variables),
+						(...variables) => this.product(...variables).then(this.summary),
 						300,
-						3,
+						6,
 					);
 
-					/**
-					 * Delete
-					 *
-					 * Delete the product from the cart (system)
-					 *
-					 * @param {HTMLElement} button Button of the product <a>
-					 * @param {number} amount Amount of deletings
-					 *
-					 * @return {Promise} Request to the server
-					 *
-					 * @todo add unblocking button by timer + everywhere
-					 */
-					static async delete_system(button, product, amount = 1) {
-						if (
-							product instanceof HTMLElement &&
-							button instanceof HTMLElement &&
-							typeof amount === "number" &&
-							amount > 0 &&
-							amount < 101
-						) {
-							// Validated
-
-							// Initializing of identifier of the product
-							const identifier = product.getAttribute(
-								"data-product-identifier",
-							);
-
-							if (typeof identifier === "string" && identifier.length > 0) {
-								// Validated identifier
-
-								return await core.request(
-									"/cart/product",
-									`identifier=${identifier}&type=delete&amount=${amount}`,
-								)
-									.then((json) => {
-										if (
-											json.errors !== null &&
-											typeof json.errors === "object" &&
-											json.errors.length > 0
-										) {
-											// Fail (received errors)
-										} else {
-											// Success (not received errors)
-
-											// Unblocking the button
-											button.removeAttribute("disabled");
-
-											// Writing offset of hue-rotate to indicate that the product is in the cart
-											product.style.setProperty(
-												"--hue-rotate-offset",
-												json.amount + "0deg",
-											);
-
-											// Writing attribute with amount of the product in the cart
-											product.setAttribute(
-												"data-product-amount",
-												json.amount,
-											);
-
-											// Initializing the amount <span> element
-											const amounts = product.querySelectorAll(
-												'span[data-product-parameter="amount"]',
-											);
-
-											for (const amount of amounts) {
-												// Iterating over an amount elements
-
-												if (amount instanceof HTMLInputElement) {
-													// The <input> element
-
-													// Writing amount of the product in the cart
-													amount.value = json.amount;
-												} else {
-													// Not the <input> element
-
-													// Writing amount of the product in the cart
-													amount.innerText = json.amount;
-												}
-											}
-										}
-									});
-							}
-						}
-					}
-
 					/**
 					 * Set
 					 *
 					 * Set amount of the product in the cart (interface)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
 					 * @param {number} amount Amount of the product in the cart to be setted
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
 					 * @return {bool} True if an error occurs to continue the event execution
 					 */
-					static set(button, product, amount = 1, force = false) {
+					static set(
-						// Blocking the button
+						element,
-						button.setAttribute("disabled", "true");
+						product,
+						amount = 1,
+						remove = false,
+						force = false,
+					) {
+						// Blocking the element
+						element.setAttribute("disabled", "true");
 
 						// Execute under damper
-						this.set_damper(button, amount, force);
+						this.set_damper(element, product, "set", amount, remove, force);
 
 						// Exit (success)
 						return false;
@@ -427,51 +221,97 @@ import("/js/core.js").then(() =>
 					 *
 					 * Set the product in the cart (damper)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler elememnt of the product
+					 * @param {HTMLElement} product The product
 					 * @param {number} amount Amount of the product in the cart to be setted
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 * @param {bool} force Ignore the damper? (false)
 					 *
-					 * @return {void}
+					 * @return {Promise}
 					 */
 					static set_damper = core.damper(
-						(...variables) => this.set_system(...variables),
+						(...parameters) => this.product(...parameters).then(this.summary),
 						300,
-						3,
+						6,
 					);
 
 					/**
-					 * Set
+					 * The product
 					 *
-					 * Set the product in the cart (system)
+					 * Handle the product in the cart (system)
 					 *
-					 * @param {HTMLElement} button Button of the product <a>
+					 * @param {HTMLButtonElement|HTMLInputElement} element Handler element of the product
-					 * @param {number} amount Amount of the product in the cart to be setted
+					 * @param {HTMLElement} product The product element
+					 * @param {string} type Type of action with the product
+					 * @param {number} amount Amount of product to handle
+					 * @param {bool} remove Remove the product element if json.amount === 0?
 					 *
-					 * @return {Promise} Request to the server
+					 * @return {Promise|null}
-					 *
-					 * @todo add unblocking button by timer + everywhere
 					 */
-					static async set_system(button, product, amount = 1) {
+					static async product(
+						element,
+						product,
+						type,
+						amount = null,
+						remove = false,
+						resolve = () => {},
+						reject = () => {},
+					) {
 						if (
-							product instanceof HTMLElement &&
+							(element instanceof HTMLButtonElement ||
-							button instanceof HTMLElement &&
+								element instanceof HTMLInputElement) &&
-							typeof amount === "number" &&
+							product instanceof HTMLElement
-							amount > -1 &&
-							amount < 101
 						) {
 							// Validated
 
+							// Initializing the buffer of request body
+							let request = "";
+
 							// Initializing of identifier of the product
-							const identifier = product.getAttribute(
+							const identifier = +product.getAttribute(
 								"data-product-identifier",
 							);
 
-							if (typeof identifier === "string" && identifier.length > 0) {
+							if (typeof identifier === "number") {
 								// Validated identifier
 
+								// Writing to the buffer of request body
+								request += "&identifier=" + identifier;
+
+								if (
+									type === "toggle" ||
+									type === "write" ||
+									type === "delete" ||
+									type === "set"
+								) {
+									// Validated type
+
+									// Writing to the buffer of request body
+									request += "&type=" + type;
+
+									if (
+										(type === "toggle" &&
+											typeof amount === "undefined") ||
+										(type === "set" &&
+												amount === 0 ||
+											amount === 100) ||
+										typeof amount === "number" &&
+											amount > 0 &&
+											amount < 100
+									) {
+										// Validated amount
+
+										if (type !== "toggle") {
+											// Not a toggle request
+
+											// Writing to the buffer of request body
+											request += "&amount=" + amount;
+										}
+
+										// Request
 										return await core.request(
 											"/cart/product",
-									`identifier=${identifier}&type=set&amount=${amount}`,
+											request,
 										)
 											.then((json) => {
 												if (
@@ -483,8 +323,16 @@ import("/js/core.js").then(() =>
 												} else {
 													// Success (not received errors)
 
-											// Unblocking the button
+													if (remove && json.amount === 0) {
-											button.removeAttribute("disabled");
+														// Requested deleting of the product element when there is no the product in the cart
+
+														// Deleting the product element
+														product.remove();
+													} else {
+														// Not requested deleting the product element when there is no the product in the cart
+
+														// Unblocking the element
+														element.removeAttribute("disabled");
 
 														// Writing offset of hue-rotate to indicate that the product is in the cart
 														product.style.setProperty(
@@ -500,7 +348,7 @@ import("/js/core.js").then(() =>
 
 														// Initializing the amount <span> element
 														const amounts = product.querySelectorAll(
-												'span[data-product-parameter="amount"]',
+															'[data-product-parameter="amount"]',
 														);
 
 														for (const amount of amounts) {
@@ -518,11 +366,63 @@ import("/js/core.js").then(() =>
 																amount.innerText = json.amount;
 															}
 														}
+
+														// Exit (success)
+														resolve();
+													}
 												}
 											});
 									}
 								}
 							}
+						}
+
+						// Exit (fail)
+						reject();
+					}
+
+					/**
+					 * Summary
+					 *
+					 * Initialize summary of products the cart (system)
+					 *
+					 * @return {void}
+					 */
+					static async summary() {
+						// Request
+						return await core.request("/cart/summary")
+							.then((json) => {
+								if (
+									json.errors !== null &&
+									typeof json.errors === "object" &&
+									json.errors.length > 0
+								) {
+									// Fail (received errors)
+								} else {
+									// Success (not received errors)
+
+									// Initializing the summary amount <span> element
+									const amount = document.getElementById("amount");
+
+									// Initializing the summary cost <span> element
+									const cost = document.getElementById("cost");
+
+									if (amount instanceof HTMLElement) {
+										// Initialized the summary amount element
+
+										// Writing summmary amount into the summary amount element
+										amount.innerText = json.amount;
+									}
+
+									if (cost instanceof HTMLElement) {
+										// Initialized the summary cost element
+
+										// Writing summmary cost into the summary cost element
+										cost.innerText = json.cost;
+									}
+								}
+							});
+					}
 				};
 			}
 		}

mirzaev/arming_bot/system/public/js/damper.js

@@ -28,6 +28,8 @@ import("/js/core.js").then(() => {
 			 * @param {number} timeout Timer in milliseconds (ms)
 			 * @param {number} force Argument number storing the status of enforcement execution (see @example)
 			 *
+			 * @return {Promise}
+			 *
 			 * @memberof core
 			 *
 			 * @example
@@ -37,9 +39,13 @@ import("/js/core.js").then(() => {
 			 * 			b,							// 1
 			 * 			c,							// 2
 			 * 			force = false,	// 3
-			 * 			d								// 4
+			 * 			d,							// 4
+			 * 			resolve,
+			 *      reject
 			 * 		) => {
-			 * 			// Body of function
+			 * 			// Body of the function
+			 *
+			 * 			resolve();
 			 * 		},
 			 * 			500,
 			 * 			3,							// 3 -> "force" argument
@@ -51,24 +57,39 @@ import("/js/core.js").then(() => {
 			 * @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
 			 */
 			core.damper = (func, timeout = 300, force) => {
-				// Initializing of the timer
+				// Declaring of the timer for executing the function
 				let timer;
 
-				return (...args) => {
+				return ((...args) => {
+					return new Promise((resolve, reject) => {
 						// Deinitializing of the timer
 						clearTimeout(timer);
 
 						if (typeof force === "number" && args[force]) {
-						// Force execution (ignoring the timer)
+							// Requested execution with ignoring the timer
 
+							// Deleting the force argument
+							if (typeof force === "number") delete args[force - 1];
+
+							// Writing promise handlers into the arguments variable
+							args.push(resolve, reject);
+
+							// Executing the function
 							func.apply(this, args);
 						} else {
 							// Normal execution
 
-						// Execute the handled function (entry into recursion)
+							// Deleting the force argument
+							if (typeof force === "number") delete args[force - 1];
+
+							// Writing promise handlers into the arguments variable
+							args.push(resolve, reject);
+
+							// Resetting the timer and executing the function when the timer expires
 							timer = setTimeout(() => func.apply(this, args), timeout);
 						}
-				};
+					});
+				});
 			};
 		}
 	}

mirzaev/arming_bot/system/public/themes/default/css/cart.css

@@ -1,21 +1,45 @@
 @charset "UTF-8";
 
-main>section#products {
+main>section:is(#summary, #products) {
 	width: var(--width);
 	display: flex;
 	flex-direction: column;
 	gap: var(--gap);
 }
 
+main>section#summary>div {
+	padding-left: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	overflow: hidden;
+	border-radius: 1.375rem;
+	background-color: var(--tg-theme-secondary-bg-color);
+}
+
+main>section#summary>div>span:first-of-type {
+	/* margin-left: auto; */
+}
+
+main>section#summary>div>button#order {
+	/* margin-left: 0.3rem; */
+	margin-left: auto;
+	padding-left: 0.7rem;
+}
+
 main>section#products>article.product {
 	position: relative;
 	width: 100%;
 	min-height: 5rem;
-	max-height: 8rem;
+	max-height: 10rem;
 	display: flex;
 	border-radius: 0.75rem;
 	overflow: hidden;
-	backdrop-filter: brightness(0.7);
+	background-color: var(--tg-theme-secondary-bg-color);
+}
+
+main>section#products>article.product[data-product-amount]:not([data-product-amount="0"]) * {
+	backdrop-filter: hue-rotate(calc(120deg + var(--hue-rotate-offset, 0deg)));
 }
 
 main>section#products>article.product:is(:hover, :focus)>* {
@@ -38,7 +62,7 @@ main>section#products>article.product>a>img:first-of-type {
 	image-rendering: auto;
 }
 
-main>section#products>article.product>div[data-product="body"] {
+main>section#products>article.product>div {
 	width: 100%;
 	padding: 0.5rem;
 	display: flex;
@@ -47,68 +71,68 @@ main>section#products>article.product>div[data-product="body"] {
 	overflow: hidden;
 }
 
-main>section#products>article.product>div[data-product="body"]>p {
+main>section#products>article.product>div>div {
-	margin: unset;
+	display: inline-flex;
+	align-items: center;
 }
 
-main>section#products>article.product>div[data-product="body"]>p.title {
+main>section#products>article.product>div>div.head {
 	z-index: 50;
 	padding: 0 0.4rem;
-	font-size: 0.8rem;
+	gap: 1rem;
-	hyphens: auto;
-	overflow-wrap: anywhere;
 }
 
-main>section#products>article.product>div[data-product="body"]>p.characteristics {
+main>section#products>article.product>div>div>button:first-of-type {
+	margin-left: auto;
+}
+
+main>section#products>article.product>div>div>button {
+	padding: 0.4rem;
+	background: unset;
+}
+
+main>section#products>article.product>div>div.head>button+button {
+	margin-left: 0.4rem;
+}
+
+main>section#products>article.product>div>div.head>button>i.icon.trash {
+	color: var(--tg-theme-destructive-text-color);
+}
+
+main>section#products>article.product>div>div.body {
 	z-index: 30;
+	flex-grow: 1;
 	display: inline-flex;
 	flex-flow: row wrap;
+	align-items: start;
 	gap: 0.3rem;
 	font-size: 0.6rem;
 	overflow: hidden;
 }
 
-main>section#products>article.product>div[data-product="body"]>p.characteristics>span {
+main>section#products>article.product>div>div.body>span {
 	padding: 0.2rem 0.4rem;
 	border-radius: 0.75rem;
-	color: var(--tg-theme-accent_text_color);
+	color: var(--tg-theme-button-text-color);
-	background-color: var(--tg-theme-secondary-bg-color);
+	background-color: var(--tg-theme-button-color);
 }
 
-main>section#products>article.product>div[data-product="body"]>p.cost {
+main>section#products>article.product>div>div.footer {
-	z-index: 20;
-	margin-top: auto;
-	padding: 0 0.4rem;
-	font-size: 0.8rem;
-}
-
-main>section#products>article.product>div[data-product="buttons"]:last-of-type {
 	z-index: 100;
-	flex-shrink: 0;
+	padding: 0 0.4rem;
-	padding: 0.2rem 0rem;
 	display: flex;
-	flex-direction: column;
-  justify-content: space-between;
 	overflow: hidden;
 }
 
-main>section#products>article.product>div[data-product="buttons"]:last-of-type>div.row {
+main>section#products>article.product>div>div.footer>span[data-product-parameter] {
- padding: 0 0.6rem;
+	font-size: 0.8rem;
-	display: flex;
-	gap: 0.2rem;
-	justify-content: end;
 }
 
-main>section#products>article.product>div[data-product="buttons"]:last-of-type>div.row>button {
+main>section#products>article.product>div>div.footer>span[data-product-parameter]+span[data-product-parameter="currency"] {
-	padding: 0.4rem;
+	margin-left: 0.1rem;
-	background: unset;
 }
 
-main>section#products>article.product>div[data-product="buttons"]:last-of-type>div.row>button + button {
+main>section#products>article.product>div>div.footer>input {
-	margin-left: 0.4rem;
-}
-
-main>section#products>article.product>div[data-product="buttons"]:last-of-type>div.row>input {
 	width: 2rem;
 	padding: 0 0.3rem;
 	text-align: center;

mirzaev/arming_bot/system/public/themes/default/css/catalog.css

@@ -156,12 +156,12 @@ main>section#products>div.column>article.product>div[data-product="buttons"]>but
 	flex-grow: 1;
 }
 
-main>section#products>div.column>article.product:is([data-product-amount="0"], [data-product-amount="1"])>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parametert="amount"],
+main>section#products>div.column>article.product:is([data-product-amount="0"], [data-product-amount="1"])>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"],
 main>section#products>div.column>article.product[data-product-amount="0"]>div[data-product="buttons"]>button:is([data-product-button="write"], [data-product-button="delete"]) {
 	display: none;
 }
 
-main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parametert="amount"]:after {
+main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"]:after {
 	content: '*';
 	margin: 0 0.2rem;
 }
@@ -171,11 +171,11 @@ main>section#products>div.column>article.product[data-product-amount]:not([data-
 }
 
 @container product-buttons (max-width: 200px) {
-	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span:is([data-product-parametert="cost"], [data-product-parametert="currency"]) {
+	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span:is([data-product-parameter="cost"], [data-product-parameter="currency"]) {
 		display: none;
 	}
 
-	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parametert="amount"]:after {
+	main>section#products>div.column>article.product>div[data-product="buttons"]>button[data-product-button="toggle"]>span[data-product-parameter="amount"]:after {
 		content: unset;
 	}
 }

mirzaev/arming_bot/system/public/themes/default/css/icons/arrow.css

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+i.icon.arrow:not(.circle, .square) {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 22px;
+	height: 22px;
+}
+
+i.icon.arrow:not(.circle, .square)::after,
+i.icon.arrow:not(.circle, .square)::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	right: 3px;
+}
+
+i.icon.arrow:not(.circle, .square)::after {
+	width: 8px;
+	height: 8px;
+	border-top: 2px solid;
+	border-right: 2px solid;
+	transform: rotate(45deg);
+	bottom: 7px;
+}
+
+i.icon.arrow:not(.circle, .square)::before {
+	width: 16px;
+	height: 2px;
+	bottom: 10px;
+	background: currentColor;
+}

mirzaev/arming_bot/system/public/themes/default/css/icons/arrow_circle.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-i.icon.arrow.top.left {
+i.icon.arrow.circle {
 	box-sizing: border-box;
 	position: relative;
 	display: block;
@@ -10,28 +10,27 @@ i.icon.arrow.top.left {
 	border-radius: 20px;
 }
 
-i.icon.arrow.top.left::after,
+i.icon.arrow.circle::after,
-i.icon.arrow.top.left::before {
+i.icon.arrow.circle::before {
 	content: "";
 	display: block;
 	box-sizing: border-box;
 	position: absolute;
-}
-
-i.icon.arrow.top.left::after {
-	width: 10px;
-	height: 2px;
-	background: currentColor;
-	transform: rotate(45deg);
-	bottom: 8px;
 	right: 4px;
 }
 
-i.icon.arrow.top.left::before {
+i.icon.arrow.circle::after {
 	width: 6px;
 	height: 6px;
-	left: 4px;
-	top: 4px;
 	border-top: 2px solid;
-	border-left: 2px solid;
+	border-right: 2px solid;
+	transform: rotate(45deg);
+	bottom: 6px;
+}
+
+i.icon.arrow.circle::before {
+	width: 10px;
+	height: 2px;
+	bottom: 8px;
+	background: currentColor;
 }

mirzaev/arming_bot/system/public/themes/default/css/main.css

@@ -175,6 +175,11 @@ input {
 	font-family: "Kabrio";
 }
 
+.cost.currency:after {
+	content: var(--currency);
+	margin-left: var(--currency-offset, 0.1rem);
+}
+
 .unselectable {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;

mirzaev/arming_bot/system/public/themes/default/css/menu.css

@@ -3,6 +3,7 @@
 header>nav#menu {
 	container-type: inline-size;
 	container-name: menu;
+	margin-bottom: 1rem;
 	width: var(--width);
 	min-height: 3rem;
 	display: flex; 
@@ -16,8 +17,10 @@ header>nav#menu>a[type="button"] {
 	height: 3rem;
 	padding: unset;
 	 border-radius: 1.375rem;
-	color: var(--unsafe-color, var(--tg-theme-button-text-color));
+	/* color: var(--unsafe-color, var(--tg-theme-button-text-color));
-	background-color: var(--unsafe-background-color, var(--tg-theme-button-color));
+	background-color: var(--unsafe-background-color, var(--tg-theme-button-color)); */
+	color: var(--tg-theme-button-text-color);
+	background-color: var(--tg-theme-button-color);
 }
 
 header>nav#menu>a[type=button]>:first-child {

mirzaev/arming_bot/system/views/templater.php

@@ -75,7 +75,7 @@ final class templater extends controller implements ArrayAccess
 		if (!empty($account?->status())) $this->twig->addGlobal('account', $account);
 		$this->twig->addGlobal('language', $language = $account?->language ?? $session?->buffer['language'] ?? $settings?->language ?? language::en);
 		$this->twig->addGlobal('currency', $currency = $account?->currency ?? $session?->buffer['currency'] ?? $settings?->currency ?? currency::usd);
-		$this->twig->addGlobal('cart', $cart->all(language: $language, currency: $currency));
+		$this->twig->addGlobal('cart', ['summary' => $cart->summary(currency: $currency), 'products' => $cart->products(language: $language, currency: $currency)]);
 
 		// Initialize function of dimensions formatting
 		$this->twig->addFunction(

mirzaev/arming_bot/system/views/themes/default/cart/elements/products.html

@@ -1,44 +1,48 @@
 {% macro card(product, amount) %}
 <article id="{{ product._id }}" class="product unselectable" data-product-identifier="{{ product.identifier }}"
-	data-product-amount="{{ amount }}">
+	data-product-amount="{{ amount }}" {% if amount> 0 %} style="--hue-rotate-offset: {{ amount }}0deg;"{% endif %}>
 	<a data-product="cover" href="?product={{ product.identifier }}" onclick="return core.catalog.product(this);"
 		onkeydown="event.keyCode === 13 && core.catalog.product(this)" tabindex="10">
 		<img src="{{ product.images.0.storage }}" alt="{{ product.name }}" ondrugstart="return false;">
 	</a>
-	<div data-product="body">
+	<div>
-		<p class="title" title="{{ product.name }}">
+		<div class="head" title="{{ product.name }}">
 			{{ product.name | length > 65 ? product.name | slice(0, 65) ~ '...' : product.name }}
-		</p>
+			<!-- <button data-product-button="list" onclick="core.cart.list(this, document.getElementById('{{ product._id }}'))" title="{{ language.name == 'ru' ? 'Добавить в список' : 'Add to a list' }}"><i class="icon small list add"></i></button> -->
-		<p class="characteristics">
+			<button data-product-button="toggle"
+				onclick="core.cart.toggle(this, document.getElementById('{{ product._id }}'), true)"
+				title="{{ language.name == 'ru' ? 'Удалить' : 'Delete' }}"><i class="icon small trash"></i></button>
+		</div>
+		<div class="body">
 			{% for characteristic in [product.brand, format_dimensions(product.dimensions.x,
 			product.dimensions.y, product.dimensions.z, ' '), product.weight ~ (language.name == 'ru' ? 'г' : 'g')] %}
+			{% if characteristic is not empty %}
 			<span>
 				{{ characteristic | length > 30 ? characteristic | slice(0, 30) ~ '...' : characteristic }}
 			</span>
+			{% endif %}
 			{% endfor %}
-		</p>
-		<p class="cost">
-			<span data-product-parameter="cost">{{ product.cost }}</span>
-			<span data-product-parameter="currency">{{ currency.symbol }}</span>
-		</p>
 		</div>
-	<div data-product="buttons">
+		<div class="footer">
-		<div class="row">
+			<span class="cost currency" data-product-parameter="cost">{{ product.cost }}</span>
-			<button data-product-button="list" onclick="core.cart.list(this, document.getElementById('{{ product._id }}'))" title="{{ language.name == 'ru' ? 'Добавить в список' : 'Add to a list' }}"><i class="icon small list add"></i></button>
+			<button data-product-button="delete"
-			<button data-product-button="toggle" onclick="core.cart.toggle(this, document.getElementById('{{ product._id }}'))" title="{{ language.name == 'ru' ? 'Удалить' : 'Delete' }}"><i class="icon small trash"></i></button>
+				onclick="core.cart.delete(this, document.getElementById('{{ product._id }}'), 1)"
-		</div>
+				title="{{ language.name == 'ru' ? 'Уменьшить' : 'Decrease' }}"><i class="icon small minus"></i></button>
-		<div class="row" {% if amount> 0 %} style="--hue-rotate-offset: {{ amount }}0deg;"{% endif %}>
+			<input type="text" value="{{ amount ?? 1 }}" title="{{ language.name == 'ru' ? 'Количество' : 'Amount' }}"
-			<button data-product-button="delete" onclick="core.cart.delete(this, document.getElementById('{{ product._id }}'), 1)" title="{{ language.name == 'ru' ? 'Уменьшить' : 'Decrease' }}"><i class="icon small minus"></i></button>
+				data-product-parameter="amount"
-			<input type="text" value="{{ amount ?? 1 }}" title="{{ language.name == 'ru' ? 'Количество' : 'Amount' }}" data-product-parameter="amount" oninput="core.cart.set(this, document.getElementById('{{ product._id }}'), this.value)"></input>
+				onchange="core.cart.set(this, document.getElementById('{{ product._id }}'), +this.value)"
-			<button data-product-button="write" onclick="core.cart.write(this, document.getElementById('{{ product._id }}'), 1)" title="{{ language.name == 'ru' ? 'Увеличить' : 'Increase' }}"><i class="icon small plus"></i></button>
+				oninput="this.value = (this.value = +this.value.replaceAll(/[^\d]/g, '')) > 100 ? 100 : (this.value < 0 ? 0 : this.value)"></input>
+			<button data-product-button="write"
+				onclick="core.cart.write(this, document.getElementById('{{ product._id }}'), 1)"
+				title="{{ language.name == 'ru' ? 'Увеличить' : 'Increase' }}"><i class="icon small plus"></i></button>
 		</div>
 	</div>
 </article>
 {% endmacro %}
-{% if cart is not empty %}
+{% if cart.products is not empty %}
 <section id="products" class="unselectable">
-	{% for entry in cart %}
+	{% for product in cart.products %}
-	{{ _self.card(entry.product, amount) }}
+	{{ _self.card(product.document, product.amount) }}
 	{% endfor %}
 </section>
 {% endif %}

mirzaev/arming_bot/system/views/themes/default/cart/elements/summary.html

@@ -0,0 +1,11 @@
+{% if cart.products is not empty %}
+<section id="summary" class="unselectable">
+	<div>
+		<span id="amount">{{ cart.summary.amount ?? 0 }}</span>
+		<span>{{ language.name == "ru" ? "товаров на сумму" : "products worth" }}</span>
+		<span id="cost" class="cost currency">{{ cart.summary.cost ?? 0 }}</span>
+		<button id="order" onclick="core.cart.order(this)"
+			title="{{ language.name == 'ru' ? 'Оформить заказ' : 'Place an order' }}"><i class="icon arrow"></i></button>
+	</div>
+</section>
+{% endif %}

mirzaev/arming_bot/system/views/themes/default/cart/page.html

@@ -8,10 +8,12 @@
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/icons/shopping_cart.css" />
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/icons/plus.css" />
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/icons/minus.css" />
+<link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/icons/arrow.css" />
 {% endblock %}
 
 {% block main %}
 <h2 class="unselectable">{{ h2 }}</h2>
+{% include "/themes/default/cart/elements/summary.html" %}
 {% include "/themes/default/cart/elements/products.html" %}
 {% endblock %}
 

mirzaev/arming_bot/system/views/themes/default/catalog/elements/products.html

@@ -3,7 +3,7 @@
 product.dimensions.y, product.dimensions.z, ' ') ~ ' ' ~ product.weight ~ 'г' %}
 {% set amount = cart[product.getId()].amount ?? 0 %}
 <article id="{{ product.getId() }}" class="product unselectable" data-product-identifier="{{ product.identifier }}"
-	data-product-amount="{{ amount }}">
+	data-product-amount="{{ amount }}"{% if amount > 0 %} style="--hue-rotate-offset: {{ amount }}0deg;"{% endif %}>
 	<a data-product="cover" href="?product={{ product.identifier }}" onclick="return core.catalog.product(this);"
 		onkeydown="event.keyCode === 13 && core.catalog.product(this)" tabindex="10">
 		<img src="{{ product.images.0.storage }}" alt="{{ product.name }}" ondrugstart="return false;">
@@ -11,11 +11,11 @@ product.dimensions.y, product.dimensions.z, ' ') ~ ' ' ~ product.weight ~ 'г' %
 			{{ title | length > 45 ? title | slice(0, 45) ~ '...' : title }}
 		</p>
 	</a>
-	<div data-product="buttons"{% if amount > 0 %} style="--hue-rotate-offset: {{ amount }}0deg;"{% endif %}>
+	<div data-product="buttons">
 		<button data-product-button="delete" onclick="core.cart.delete(this, document.getElementById('{{ product.getId() }}'), 1)" title="{{ language.name == 'ru' ? 'Уменьшить' : 'Decrease' }}"><i class="icon small minus"></i></button>
 		<button data-product-button="toggle" onclick="core.cart.toggle(this, document.getElementById('{{ product.getId() }}'))" tabindex="15">
 			<span data-product-parameter="amount">{{ amount }}</span>
-			<span data-product-parameter="cost">{{ product.cost }}</span>
+			<span class="cost currency" data-product-parameter="cost">{{ product.cost }}</span>
 			<span data-product-parameter="currency">{{ currency.symbol }}</span>
 		</button>
 		<button data-product-button="write" onclick="core.cart.write(this, document.getElementById('{{ product.getId() }}'), 1)" title="{{ language.name == 'ru' ? 'Увеличить' : 'Increase' }}"><i class="icon small plus"></i></button>

mirzaev/arming_bot/system/views/themes/default/head.html

@@ -17,4 +17,9 @@
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/window.css" />
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/fonts/dejavu.css" />
 <link type="text/css" rel="stylesheet" href="/themes/{{ theme }}/css/fonts/kabrio.css" />
+<style>
+	:root {
+		--currency: "{{ currency.symbol ?? '$' }}";
+	}
+</style>
 {% endblock %}

mirzaev/arming_bot/system/views/themes/default/index.html

@@ -14,8 +14,8 @@
 {% endblock %}
 
 {% block body %}
-{{ block('connection_body') }}
+<!-- {{ block('connection_body') }} -->
-{{ block('account_body') }}
+<!-- {{ block('account_body') }} -->
 {{ block('header') }}
 <main>
 	{% block main %}

mirzaev/arming_bot/system/views/themes/default/menu.html

@@ -2,7 +2,7 @@
 <link type="text/css" rel="stylesheet" href="/themes/default/css/menu.css">
 {% for button in menu %}
 {% if button.icon %}
-<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/{{ button.icon|replace({' ': '-'}) }}.css">
+<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/{{ button.icon.class|replace({' ': '_'}) }}.css">
 {% endif %}
 {% endfor %}
 {% endblock %}
@@ -11,10 +11,12 @@
 <nav id="menu">
 	{% for button in menu %}
 	<a href='{{ button.urn }}' onclick="return core.loader.load('{{ button.urn }}');" type="button" class="unselectable"
-		title="{{ button.name }}"
+		title="{{ button.name }}" {% if button.style %}
-		style="order: {{ button.position }};{% for target, color in button.color %} --unsafe-{{ target }}: {{ color|e }};{% endfor %}">
+		style="{% for parameter, value in button.style %}{{ parameter ~ ': ' ~ value ~ '; ' }}{% endfor %}" {% endif %}">
 		{% if button.icon %}
-		<i class="icon {{ button.icon }}"></i>
+		<i class="icon {{ button.icon.class }}" {% if button.icon.style %}
+			style="{% for parameter, value in button.icon.style %}{{ parameter ~ ': ' ~ value ~ '; ' }}{% endfor %}" {% endif
+			%}></i>
 		{% endif %}
 		<span>{{ button.name }}</span>
 		{% if button.image.storage %}