DARTHARTH

Скрипт выбора региона с заменой и сохранением выводимых данных

Задача: На сайт под руководством OpenCart 2.3 прилепить выбор региона в форме всплывающего окна со списком ссылок. При выборе нужного региона на сайте в шапке меняется адрес доставки и номер телефона + выбранный город остается до конца сессии пользователя.

В данном случае на пресловутом opencart форуме только ссылались на платные модули, которые конечно функционал имеют (смена цен от региона, времени доставки и пр.) но в данном случае они совершенно не нужны, т.к. заложенный в них функционал использовался бы буквально на пару процентов.

В поисках готовых скриптов наткнулся сначала на этот вариант — https://clever-as.ru/pressroom/javascript-plagin-vyibora-goroda-dlya-multiregionalnyih-saytov/ но поставив его не разобрался как вывести сам блок с запросом модального окна списка городов, а запрос по контактам не дал ответов.

Второй вариант — https://8uh.ru/sozdanie-saytov/vybor-goroda-prostoy-skript-dlya-lyubog.html был меньше, рабочий, но его минус был в том, что выбор был реализован через выпадающий список, а нам же необходимо было выбирать кликом по ссылке. Но коллега по работе подкинул вариант как скриптом можно по-клику выбирать нужное значение списка.

Строим каркас

Итак, начинаем с того, что у нас к сайту подключена библиотека jquery (без неё нынче мало что работает) и есть строка с выводом ссылки на город и названием самого города + небольшой список данных которые у нас будут меняться

<p>Ваш регион: г. <a href="#" class="city_modal_link"><span id="iscity">Москва</span></a></p>
<div class="containerss">
   <p>Самовывоз: 
      <span class="city_moskov" >Москва</span>
      <span class="city_belgorod" >Белгород</span>
      <span class="city_petersburg" >Санкт-Петербург</span>
   </p>
</div>

Т.е. по-факту у нас меняться спаны с текстом.

Для спанов добавляем стиль

.containerss span {display:none;}

Ниже будет наш выпадающий список, для которого тоже задаем стиль display:none;

<select id="selectItem">
   <option id="city_moskov" value="city_moskov">Москва</option>
   <option id="city_belgorod" value="city_belgorod">Белгород</option>
   <option id="city_petersburg" value="city_petersburg">Санкт-Петербург</option>
</select>

И ниже вставляем наше всплывающее окно

<div class="custom-model-main">
   <div class="custom-model-inner">        
      <div class="close-btn">×</div>
      <div class="custom-model-wrap">
         <div class="pop-up-content-wrap">
            <h2>Выберите свой город</h2>
            <ul id="modal_city_link">
               <li><a href="#" data-select="city_moskov">Москва</a></li>
               <li><a href="#" data-select="city_belgorod">Белгород</a></li>
               <li><a href="#" data-select="city_petersburg">Санкт-Петербург</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="bg-overlay"></div>
</div>

Добавим немного CSS

.pop-up-content-wrap h2 {
	color: #707070;
	font-size: 18px;
	line-height: 20px;
	margin: 5px 0 0 5px;
}

.pop-up-content-wrap ul {
	margin: 0;
	padding: 0;
	-moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
	margin: 25px 0 10px 5px;
}

.pop-up-content-wrap ul li {
	list-style: none;
}

.pop-up-content-wrap a {
	display: block;
	color: #23A1D1;
	font-size: 14px;
}

.pop-up-content-wrap ul li:nth-child(-n+3) a {
	font-weight: bold;
}

.custom-model-main {
	text-align: center;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* z-index: 1050; */
	-webkit-overflow-scrolling: touch;
	outline: 0;
	opacity: 0;
	-webkit-transition: opacity 0.15s linear, z-index 0.15;
	-o-transition: opacity 0.15s linear, z-index 0.15;
	transition: opacity 0.15s linear, z-index 0.15;
	z-index: -1;
	overflow-x: hidden;
	overflow-y: auto;
}

.model-open {
	z-index: 99999;
	opacity: 1;
	overflow: hidden;
}

.custom-model-inner {
	-webkit-transform: translate(0, -25%);
	-ms-transform: translate(0, -25%);
	transform: translate(0, -25%);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
	display: inline-block;
	vertical-align: middle;
	width: 550px;
	margin: 30px auto;
	max-width: 97%;
}

.custom-model-wrap {
	display: block;
	width: 100%;
	position: relative;
	background-color: #fff;
	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	background-clip: padding-box;
	outline: 0;
	text-align: left;
	padding: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-height: calc(100vh - 70px);
	overflow-y: auto;
}

.model-open .custom-model-inner {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	position: relative;
	z-index: 999;
}

.model-open .bg-overlay {
	background: rgba(0, 0, 0, 0.6);
	z-index: 99;
}

.bg-overlay {
	background: rgba(0, 0, 0, 0);
	height: 100vh;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	-webkit-transition: background 0.15s linear;
	-o-transition: background 0.15s linear;
	transition: background 0.15s linear;
}

.close-btn {
	position: absolute;
	right: 25px;
	top: 30px;
	cursor: pointer;
	z-index: 99;
	font-size: 30px;
	color: #707070;
}

Магия JavaScript

И ниже наших блоков добавляем скрипт, который комментариями разбит на три части, о назначении которых немного напишу ниже

<script type="text/javascript">
						<!--
							$( function() {
								if (localStorage.getItem("myKey")) {
									var stored_select = localStorage.getItem("myKey");
									$('#' + stored_select).prop( "selected", true );
									$('.' + stored_select).show();
								} else {
									$('.city_moskov').show();
								}
							});

							$("#selectItem").change(function(){
								$('.containerss').find('span').hide();
								var selected = $('#selectItem option:selected').attr('id');
								localStorage.setItem("myKey", selected);
								$('.' + selected).show();
							});
									
							/*--------change select on link click--------*/
								
							$('#modal_city_link > li > a').click(function() {
								var select = $(this).attr('data-select');
								var name = $(this).text();
								
								$('#selectItem').change(function(){
									var data= $(this).val();
								});
								$('#selectItem')
								.val(select)
								.trigger('change');
								
								$('#iscity').change(function(){
									var data= $(this).text();
								});
								$('#iscity')
								.text(name)
								
							});
									
							/*--------show-hide modal window--------*/
									
							$(".city_modal_link").on('click', function() {
								$(".custom-model-main").addClass('model-open');
							});
										
							$(".close-btn, .custom-model-main > .bg-overlay").click(function(){
								$(".custom-model-main").removeClass('model-open');
							});
									
						-->
					</script>

Первая часть отвечает непосредственно за сохранение в куки выбранного значения списка и скрытие/показ спана с нужной нам информацией. Сопоставление идет по айди элемента списка и класса спана для вывода. Также, сдесь идет указание какое значение у нас открыто по-умолчанию первым

} else {
   $('.city_moskov').show();
}

Во-втором блоке скрипта у нас идет наше преобразование клика по ссылке в выбор элемента списка. Сдесь же сопоставление идет по аттрибуту ссылки data-select который у нас равен нужному value опции списка. Также, в этом блоке у нас идет передача названия города для вставки его в

<span id="iscity"> </span>

И наконец в последнем блоке у нас задается открытие модального окна при клике на нашей ссылке с классом «city_modal_link», а также закрытие этого окна при клике на кнопку закрытия с классом «close-btn» либо по клику на блок, который у нас играет форму всего остального пространства, вокруг модального окна «bg-overlay».

Несомненно такой вариант скрипта может быть недоработан и знающие люди смогут сократить и переработать скрипт. Также, явным минусом скрипта является то, что подходит он лучше для замены небольшого количества данных, так как в противном случае будет очень много нерационально вставленного кода. Однако, как альтернатива модулям и для замены двух-трёх значений на странице из 2-3 элементов списка, он подойдет отлично.


UPD. Так, как скрипт делался под сайт на OpenCart выявилась проблема с пустыми ссылками типа href=»#» при клике на которую шел переход на главную страницу. Таким образом у нас адекватно работали ссылки в модальном окне только на главной странице. Для устранения этого недочета всем ссылкам в модальном окне задаем класс, на пример service и в наш скрипт добавляем еще такой код

$('.service').click(function(e) {
   e.preventDefault();
});

Также, подобный костыль можно прикрутить к ссылке которая идет для появления модального окна либо можно её заменить на button.

Поделиться страницей в

1 мнение к “Скрипт выбора региона с заменой и сохранением выводимых данных

  1. Подскажите пожалуйста, как можно проще сделать динамическую подгрузку данных. Что имеется ввиду: Есть поле ввода страны. Идет поиск по стране, затем в следующий селект загружаются города аяксом, для выбранной страны итд. Вопрос, по какому адресу отправлять аякс запрос, чтобы мне вернулся массив с данными (страны, регионы, города), которые в админке я активировал? Спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up