Определение города посетителя с поиском.

-=NICROSS=- · August 25, 2017

Добрый вечер.

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

Код рабочий, может кому пригодится.

НО есть один нюанс. При обновлении страницы, происходит новое определение, то есть значение в куки не записывается.

Может кто-нибудь поможет разобраться? Вроде должен в куки записываться, но не срабатывает.

1. HTML (Размещать в том месте шаблона, где нужно выводить город )

<div class="gor">
 	<img src="design/{$settings->theme|escape}/images/metka.png"/>
 	<p>Ваш город:  </p>
    <p id="select-city-go">Выбор города</p>
</div> 
<div id="modal1_form">
<span id="modal1_close">X</span>
<div id="spisok-gorodov">
<table>
<tr><td>Архангельск</td><td>Омск</td></tr>
<tr><td>Астрахань</td><td>Орел</td></tr>
<tr><td>Барнаул</td><td>Оренбург</td></tr>
<tr><td>Владивосток</td><td>Пенза</td></tr>
<tr><td>Волгоград</td><td>Пермь</td></tr>
<tr><td>Воронеж</td><td>Ростов-на-Дону</td></tr>
<tr><td>Екатеринбург</td><td>Рязань</td></tr>
<tr><td>Ижевск</td><td>Самара</td></tr>
<tr><td>Иркутск</td><td>Санкт-Петербург</td></tr>
<tr><td>Казань</td><td>Саратов</td></tr>
<tr><td>Кемерово</td><td>Тольятти</td></tr>
<tr><td>Красноярск</td><td>Томск</td></tr>
<tr><td>Краснодар</td><td>Тула</td></tr>
<tr><td>Липецк</td><td>Тюмень</td></tr>
<tr><td>Москва</td><td>Уфа</td></tr>
<tr><td>Набережные Челны</td><td>Хабаровск</td></tr>
<tr><td>Нижний Новгород</td><td>Челябинск</td></tr>
<tr><td>Новокузнецк</td><td>Ялта</td></tr>
<tr><td>Новосибирск</td><td>Ярославль</td></tr>
</table>
 <a class="button_geo" href=javascript:document.location.reload()>ВЫБРАТЬ</a>

</div>
<div id="insol-map-modal1"></div>
</div>
<div id="overlay"></div>

2. Подключаем яндекс карту (в index.tpl внутрь тега <head></head>

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

3. JS (Можно подключить отдельным файлом, можно в index.tpl)

<script>

jQuery('#select-city-go').click(function() {
	jQuery('#overlay').fadeIn(400,
		 	function(){
				jQuery('#modal1_form') 
					.css('display', 'block')
					.animate({opacity: 1, top: '50%'}, 200);
		});
		
	jQuery('#select-city-go').click( function(event){
		event.preventDefault();
		jQuery('#overlay').fadeIn(400,
		 	function(){
				jQuery('#modal1_form') 
					.css('display', 'block')
					.animate({opacity: 1, top: '50%'}, 200);
		});
	});

	jQuery('#modal1_close, #overlay').click( function(){
		jQuery('#modal1_form')
			.animate({opacity: 0, top: '45%'}, 200,
				function(){
					jQuery(this).css('display', 'none');
					jQuery('#overlay').fadeOut(400);
				}
			);
	});
});

  function setCookie(name, value) {
    document.cookie = name + "=" + value;
  }
  function getCookie(name) {
    var r = document.cookie.match("(^|?" + name + "=([^;]*)(;|$)");
    if (r) return r[2];
    else return "";
  }
  function deleteCookie(name) {
    var date = new Date();
    date.setTime(date.getTime() - 1);
    document.cookie = name += "=; expires=" + date.toGMTString();
  }

jQuery("#spisok-gorodov td").click(function(){ alert(jQuery(this).text()); });

ymaps.ready(function () {
    geolocation = ymaps.geolocation;
    var myMapMod = new ymaps.Map('insol-map-modal1', {
            center: [47.22, 39.71],
            zoom: 12,
            controls: []
        });

	    geolocation.get({
        provider: 'yandex',
        mapStateAutoApply: true
    }).then(function (result) {
        result.geoObjects.options.set('preset', 'islands#blueIcon');
        myMapMod.geoObjects.add(result.geoObjects);
        var firstGeoObject = result.geoObjects.get(0);
        coords = firstGeoObject.geometry.getCoordinates();
        myMapMod.setZoom(12);
		city_name=firstGeoObject.properties.get('name');
		jQuery('#select-city-go').html(city_name);
        setCookie("city_name", city_name);
    });

jQuery("#spisok-gorodov td").click(function(){
		city_click=jQuery(this).text();
		jQuery('#select-city-go').html(city_click);
        setCookie("city_name", city_click);
    	ymaps.geocode(city_click, { results: 1  }).then(function (res) {
            var firstGeoObject = res.geoObjects.get(0),
            coords = firstGeoObject.geometry.getCoordinates(),
            bounds = firstGeoObject.properties.get('boundedBy');
            myMapMod.geoObjects.add(firstGeoObject);
            myMapMod.setBounds(bounds, { checkZoomRange: true });
        });
});
    
        mySearchControl = new ymaps.control.SearchControl({
            options: {
                noPlacemark: true,
                position: { left: 0, top: 0 }
            }
        });
    // Результаты поиска будем помещать в коллекцию.
        mySearchResults = new ymaps.GeoObjectCollection(null, {
            hintContentLayout: ymaps.templateLayoutFactory.createClass('$[properties.name]')
        });
    myMapMod.controls.add(mySearchControl);
    myMapMod.geoObjects.add(mySearchResults);

    // Выбранный результат помещаем в коллекцию.
    mySearchControl.events.add('resultselect', function (e) {
        var index = e.get('index');
        var results = mySearchControl.getResultsArray(); coords = results[index].geometry.getCoordinates();
        myMapMod.setZoom(12);
        city_name=results[index].properties.get('name');
        jQuery('#select-city-go').html(city_name);
        setCookie("city_name", city_name);
        mySearchControl.getResult(index).then(function (res) {
           mySearchResults.add(res);
        });
        }).add('submit', function () {
            mySearchResults.removeAll();
        });
});
</script>

4. Стили (Минимальный набор)

<style>
#modal1_form {
    width: 720px; 
    height: 360px;
    border-radius: 5px;
    background: #fff;
    position: fixed;
    top: 45%;
    left: 50%;
    margin-top: -170px;
    margin-left: -350px;
    display: none;
    opacity: 0;
    z-index: 9999999;
    padding: 20px 10px;
}

#modal1_form #modal1_close {
    width: 21px;
    height: 21px;
    position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}

#overlay {
	z-index: 3;
	position: fixed;
	width: 100%; 
	height: 100%;
	top: 0; 
	left: 0;
	cursor: pointer;
	display: none;
}
#insol-map-modal1{width:315px; height:315px;float:right;margin:10px;}
#spisok-gorodov {
    width: 345px;
    height: 304px;
    margin: 0px 0px 0px 10px;
    float: left;
}
#spisok-gorodov table{width:100%;}
#spisok-gorodov td{text-decoration:underline;cursor:pointer;}
p#select-city-go {
    border-bottom: 1px dashed #3a444a;
	cursor: pointer; 
}
p#select-city-go:hover {
    color: #4caf50;
    border-bottom: 1px dashed #4caf50;
}
.gor {
    display: flex;
    justify-content: flex-end;
	margin-bottom: 3px; 
	color: #246935; 
}
.gor img {
    margin-right: 10px;
}
</style>

Edited August 25, 2017 by -=NICROSS=-

ST_RU · August 25, 2017

посмотрите эту тему, может поможет решить другим способом.

он работает.

Edited August 25, 2017 by ST_RU

-=NICROSS=- · August 26, 2017

посмотрите эту тему, может поможет решить другим способом.
он работает.

Спасибо за ссылочку, но тут более простая реализация.

Мне нужно именно с выбором города.

Товарищи знатоки, помогите, пожалуйста.

loxter · August 26, 2017

1. У меня прекрасно записывается в куки. Если у Вас не так, то видимо, у Вас свои индивидуальные причины.

2. В куки записывает довольно небрежно. В зависимости от пути может записывать НЕСКОЛЬКО одинаковых кук, что нерационально.

3. Записанные ранее куки нигде не используются.

4. При загрузке второй и последующих страниц проводится геоопределение заново.

5. Есть и другие ошибки.

Похоже, скрипт какой-то устаревший...

Треба ремонтир...

-=NICROSS=- · August 26, 2017

1. У меня прекрасно записывается в куки. Если у Вас не так, то видимо, у Вас свои индивидуальные причины.
2. В куки записывает довольно небрежно. В зависимости от пути может записывать НЕСКОЛЬКО одинаковых кук, что нерационально.
3. Записанные ранее куки нигде не используются.
4. При загрузке второй и последующих страниц проводится геоопределение заново.
5. Есть и другие ошибки.

Похоже, скрипт какой-то устаревший...
Треба ремонтир...

Уважаемый loxter, а конструктив какой-то можно?

Если, конечно, не сложно!

loxter · August 26, 2017

Дано несколько пунктов конструктива.

Например, 1 означает, что Ваша оценка "Вроде должен в куки записываться, но не срабатывает", скорее всего, неверная. Попробуйте написать понятный конструктив со всеми подробностями, как Вы определили, что в куки не записывается. Подозреваю, что этот тезис не проверяли точно, а взяли с потолка.

Если хотите, чтобы Вам дали несколько строк, после копирования которых у Вас все заработает, то это совсем не просто, требует и знаний и времени. Вряд ли бесплатно кто сделает...

-=NICROSS=- · August 26, 2017

Дано несколько пунктов конструктива.
Например, 1 означает, что Ваша оценка "Вроде должен в куки записываться, но не срабатывает", скорее всего, неверная. Попробуйте написать понятный конструктив со всеми подробностями, как Вы определили, что в куки не записывается. Подозреваю, что этот тезис не проверяли точно, а взяли с потолка.

Если хотите, чтобы Вам дали несколько строк, после копирования которых у Вас все заработает, то это совсем не просто, требует и знаний и времени. Вряд ли бесплатно кто сделает...

И почему я не удивлен! Ценник объявляй!

-=NICROSS=- · August 27, 2017

Loxter, а чего вы в личные сообщения пишете? Пишите сюда! Или Вам тоже кажется, что ценник заоблачный за такое объявили?

mishanya · August 27, 2017

вы должны писать куки для домена а не просто так непонятно куда и для какой страницы. соотвественно переходя куда-то такой куки уже нет потому что она пишется непонятно как.

https://ruseller.com/lessons.php?id=593

loxter · August 28, 2017

Loxter, а чего вы в личные сообщения пишете? Пишите сюда! Или Вам тоже кажется, что ценник заоблачный за такое объявили?

Во-первых, писать сюда цену - риск оказаться нарушителем правил (п. 4.20).

Во-вторых, судя по ответам, кроме Вас, это никому не интересно.

А флуда на форуме и без нас хватает...

вы должны писать куки для домена а не просто так непонятно куда и для какой страницы. соотвественно переходя куда-то такой куки уже нет потому что она пишется непонятно как.
https://ruseller.com/lessons.php?id=593

Именно про это сказано ранее в п.2.

-=NICROSS=- · August 28, 2017

Во-первых, писать сюда цену - риск оказаться нарушителем правил (п. 4.20).
Во-вторых, судя по ответам, кроме Вас, это никому не интересно.
А флуда на форуме и без нас хватает...

Именно про это сказано ранее в п.2.

Считай, что отмазался!

Если бы хотел, ты бы написал конструктив, а не "Да, да, я об этом и говорил".

Если я задал вопрос, значит мне интересно. Я и не рассчитывал, что кому-то тоже нужен будет данный функционал и он поможет.

Я готов оплатить доработку, но адекватным людям и адекватную цену, а не тем, что сначала цену набивает и ждет, пока ему предложат за деньги сделать!

Вопрос актуален! Кто готов подправить/новый написать?

вы должны писать куки для домена а не просто так непонятно куда и для какой страницы. соотвественно переходя куда-то такой куки уже нет потому что она пишется непонятно как.
https://ruseller.com/lessons.php?id=593

Мишаня, спасибо за наводку. Но, к сожалению, моих знаний в php не достаточно

mar · September 1, 2017

Считай, что отмазался!

Мишаня, спасибо за наводку. Но, к сожалению, моих знаний в php не достаточно

Где PHP ? Человек указал на правильную установку кук в Javascript

Судя по коду который Вами написан - он был разработан не ВАМИ.

Ваших знаний и в яваскрипте тоже недостаточно.

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
var cookie_string = name + "=" + escape ( value );

if ( exp_y )
{
var expires = new Date ( exp_y, exp_m, exp_d );
cookie_string += "; expires=" + expires.toGMTString();
}

if ( path )
cookie_string += "; path=" + escape ( path );

if ( domain )
cookie_string += "; domain=" + escape ( domain );

if ( secure )
cookie_string += "; secure";

document.cookie = cookie_string;
}

Edited September 1, 2017 by mar

Определение города посетителя с поиском.

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation