Авторизация  
VaM

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

Рекомендуемые сообщения

VaM

В Админке - Содеражние - Блоки создайте блок 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.

function.cdek_pvz.php

function.cdek_pvz_checkout.php

function.cdek_shipping_time.php

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


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

Пример использования в микро-шаблоне для метки 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>  

 

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


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

Приветствую

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

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

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


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

Приветствую

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

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

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

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

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

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

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

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация