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

[support 447]

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

jquery-ui-1.8.21.custom.css

jquery-ui-1.8.21.custom.min.js

[support 447]

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

Приветствую

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

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

[support 447]

1 час назад, hayeli сказал:

Приветствую

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

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

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

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

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

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

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

[Роман_DD 2]

В 19.04.2018 в 20:08, support сказал:

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

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

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

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

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

Мне все оксизон не дает ваш покоя :)

 

не знал что у нас 2 москвы :)

аа, это моква )

 

[support 447]

21 минуту назад, Роман_DD сказал:

Мне все оксизон не дает ваш покоя :)

 

не знал что у нас 2 москвы :)

аа, это моква )

 

На demo2.vamshop.ru подсказки всплывающие чуть ровнее когда город вводите, не закрывают input поле.

У oxyzone там надо выбирать Казань, Самару, Москву, насколько я помню для этих городов задавались свои телефоны.