VaM

Пример кода для вывода модального окна с выбором города посетителем сайта!

4 сообщения в этой теме

В Админке - Содеражние - Блоки создайте блок select-city с кодом:

		<link type="text/css" href="/select-city/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<!--<script src="/select-city/jquery-1.7.2.min.js" type="text/javascript"></script>-->
		<!--<script src="/select-city/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>-->
<script>
{literal}
			$(function() {
				$("#vamshop-city").autocomplete({
                  appendTo: "#vamshop-cities",
					source : function(request, response) {
						$.ajax({
							url : "https://api.cdek.ru/city/getListByTerm/jsonp.php?callback=?",
							dataType : "jsonp",
							data : {
								q : function() {
									return $("#vamshop-city").val()
								},
								name_startsWith : function() {
									return $("#vamshop-city").val()
								}
							},
							success : function(data) {
								response($.map(data.geonames, function(item) {
									return {
										label : item.cityName,
										value : item.cityName,
										id : item.id
									}
								}));
							}
						});
					},
					minLength : 1,
					select : function(event, ui) {
						//console.log("Yep!");
						//$('#receiverCityId').val(ui.item.id);
					}
});
});            

  $(function() {
$("#submit-modal1").on("click", function(e) {
    e.preventDefault();
   $.cookie("vamshop-city", $("#vamshop-city").val(), { expires : 10, path: "/" });
    location.reload();
});
});            

{/literal}  
</script>  
<!-- Button trigger modal -->
<span><u><a href="" data-toggle="modal" data-target="#myModal">{if {cookie name="vamshop-city"}}{cookie name="vamshop-city"}{else}{geo_city}{/if}</a></span></u>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Укажите свой город</h4>
      </div>
      <div class="modal-body">

		<label for="vamshop-city">Город: </label>
		<div class="ui-widget" style="display: inline-block;">
			<input id="vamshop-city" class="ui-autocomplete-input" autocomplete="off" value="{cookie name="vamshop-city"}" />
			<br />
          <div id="vamshop-cities"></div>
		</div>
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit-modal1">Сохранить</button>
      </div>
    </div>
  </div>
</div>

и всьтавляйте его в любой шаблон:

	{global_content alias="select-city"}

 

+ в основном шаблоне магазина надо подключить jQuery Cookie и jQuery UI.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Пример использования в микро-шаблоне для метки shipping_methods:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<tr>
<th colspan="2" class="ship-title"><div>Доставка в {global_content alias="select-city"}</div></th>
</tr>
</thead>
<tbody>
{foreach from=$ship_methods item=ship_method}
<tr>
<td>{lang}{$ship_method.name}{/lang}</td>
<td class="text-right">{$ship_method.cost}</td>
</tr>
{/foreach}
</tbody>
</table>  

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Приветствую

Подскажи какие файлы нужно подключить в шаблоне

+ в основном шаблоне магазина надо подключить jQuery Cookie и jQuery UI.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, hayeli сказал:

Приветствую

Подскажи какие файлы нужно подключить в шаблоне

+ в основном шаблоне магазина надо подключить jQuery Cookie и jQuery UI.

Необязательно ведь в основном шаблоне подключать, можно прям в коде, который вставляется.

Это не готовый на 100% пример, это небольшая демонстрация.

Рабочий пример виден на oxyzone.ru

Сверху автоопределение города и ручной выбор города.

Всё это сделано на примере этого кода.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас