VaM

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

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

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

 

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


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