Выбор города

public/store/view/theme/dominik/assets/js/script.js

@@ -444,6 +444,30 @@ function addLoading(elem){
 }
 
 
+function citySelect(el){
+	var url = $(el).data('city-url');
+
+	$.get(url, function(html){
+		modal.create({
+			modal: html,
+			title: 'Выберите город',
+			width: 400,
+		});
+
+		$('.city-item').click(function(e){
+			e.preventDefault();
+			var cityId = $(this).data('city-id');
+			var cityName = $(this).text();
+			send.post('index.php?route=common/city/save', {city_id: cityId}, function(json){
+				if (json.success) {
+					$('.current-city-name').text(json.name);
+					$('.modal').modal('hide');
+				}
+			});
+		});
+	});
+}
+
 function SendRequest(product_id = 0){
 	
 	var params = {};

public/store/view/theme/dominik/template/common/city_list.twig

@@ -0,0 +1,40 @@
+<div class="city-grid">
+{% for zone in zones %}
+	<button type="button" class="city-item{% if zone.active %} active{% endif %}" data-city-id="{{ zone.zone_id }}">{{ zone.name }}</button>
+{% endfor %}
+</div>
+<style>
+.city-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 8px;
+	padding: 0 4px;
+}
+.city-item {
+	background: #fff;
+	border: 1px solid #e5e5e5;
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 14px;
+	color: #222;
+	cursor: pointer;
+	text-align: center;
+	transition: all 0.15s ease;
+	font-family: inherit;
+	line-height: 1.3;
+}
+.city-item:hover {
+	border-color: #aaa;
+	background: #f9f9f9;
+}
+.city-item.active {
+	background: #222;
+	color: #fff;
+	border-color: #222;
+}
+@media (max-width: 380px) {
+	.city-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+</style>

public/store/view/theme/dominik/template/common/header.twig

@@ -58,11 +58,14 @@
 			<div class="row gx-3 flex-nowrap align-items-center">
 				<div class="col">
 					<div class="d-none d-lg-inline-block">
-					<ul class="menu left-menu">
-					{{ menu }}
-					{{ blog_menu }}
-					{{ service_menu }}
-					</ul>
+				<ul class="menu left-menu">
+				{{ menu }}
+				{{ blog_menu }}
+				{{ service_menu }}
+				{% if current_city_name %}
+				<li><a href="#" data-city-url="{{ city_list_url }}" onclick="citySelect(this);return false;"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C5.083 0 2.667 2.416 2.667 5.333C2.667 9.333 8 16 8 16S13.333 9.333 13.333 5.333C13.333 2.416 10.917 0 8 0ZM8 7.2C6.97 7.2 6.133 6.364 6.133 5.333C6.133 4.303 6.97 3.467 8 3.467C9.03 3.467 9.867 4.303 9.867 5.333C9.867 6.364 9.03 7.2 8 7.2Z" fill="currentColor"/></svg> <span class="d-none d-lg-inline-block ms-1 current-city-name">{{ current_city_name }}</span></a></li>
+				{% endif %}
+				</ul>
 					</div>
 					<div class="d-lg-none">
 						<div class="menu-btn" >