Как внедрить на сайте автоопределение города с возможностью выбора

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

CREATE TABLE [dbo].[as_userSettings](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[falconGuid] [uniqueidentifier] NULL,
	[username] [nvarchar](128) NULL,	
	[city] [nvarchar](64) NULL,
 CONSTRAINT [PK_as_userSettings] PRIMARY KEY CLUSTERED 
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Создаем форму редактирования города userCity (поле city). Данные городов берем из as_geo_regions: 

CREATE PROCEDURE [dbo].[fm_usercity_city_dict]
   @username nvarchar(256), 
   @itemID nvarchar(128) 
AS
BEGIN
	select ' Не выбрано ' Text, '' Value
	union 
	select name Text, name Value 
    from as_geo_regions 
    where typeID=3
	order by Text
END

GetItem: 

CREATE PROCEDURE [dbo].[fm_usercity_getItem]
    @itemID int,	
	@username nvarchar(256),
    @parameters ExtendedDictionaryParameter READONLY
AS
BEGIN
	declare @userGuid uniqueidentifier
	select @userGuid = try_cast(Value as uniqueidentifier) from @parameters where [Key] = 'falconGuid'

	declare @id int
	select @id = id from as_userSettings where falconGuid = @userGuid
	if(@id is null) begin
		insert into as_userSettings(falconGuid, username, city)
		values(@userGuid, @username, '')
	end
    -- SELECT 1
	select * from as_userSettings where falconGuid = @userGuid
    
    -- SELECT2 
    select 'h3' headerTag, ' ' Title
END

SaveItem: 

CREATE PROCEDURE [dbo].[fm_usercity_saveItem]
   @username nvarchar(256), 
   @itemID int,
   @parameters ExtendedDictionaryParameter readonly
AS
BEGIN
	declare @userGuid uniqueidentifier
	select @userGuid = try_cast(Value as uniqueidentifier) from @parameters where [Key] = 'falconGuid'

	declare @pcity nvarchar(256)
	select @pcity = Value2 from @parameters where [key]='city'
	
	update as_userSettings
	set city = @pcity
	where falconGuid = @userGuid

	-- SELECT 1 
	select 1 Result, 'OK' Msg, 'reload' SuccessUrl, 1 HideFormAfterSubmit, '' RefreshContainer
END

В GetLayout выводим ссылку на модальную форму: 

	declare @userGuid uniqueidentifier
    select @userGuid = try_cast(Value as uniqueidentifier) from @parameters where [Key] = 'falconGuid'

    declare @city nvarchar(256)  
    select @city = city  from as_userSettings where falconGuid = @userGuid
    set @city = isnull(@city, '')


    declare @userCityForm nvarchar(512) = '<li class="nav-item no-arrow mx-1">
  		<a href="#" class="as-form-modal mx-1 nav-link " data-code="userCity" data-itemid="0" data-big="0" '+="" '="" title="Выбрать город" data-title="Выбрать город" data-btntext="OK"><i class="fa fa-globe mr-1"></i>'+
                                             ' <span class="as-userCity">'+@city+'</span></a>'+
                                             '</li>'

 

    -- SELECT 1
    select 
      1 saveGeoposition,
      '____Google KEY____________'  GeolocationKey,
      '{fastAddForms}{divider}{user}{divider}{alerts}{cart}' + @userCityForm TopMakeup,
      '{fastAddForms}{divider}{user}{divider}{alerts}{cart}' + @userCityForm TopMakeupMobile, 

Здесь мы также устанавливаем ключ API Google Карт и настройку определения текущих координат. 

В Global JS определяем город на основе координат: 

as.mapcallbacks["afterSetLatLng"] = function(position){
   	try{
      	var currentCity = $('.as-userCity').text();
      	if(currentCity) return;

      	var coords = $('.as-latlng').val();
      	$.get( "https://maps.googleapis.com/maps/api/geocode/json?language=ru&latlng="+coords+"&key=AIzaSyAoD3q1Mlzpp0PWtFvXna2W_ffPf6S97GU", function( data ) {
			console.log("xx",data.results)
          	var el = data.results[0];
          	var city = "";
			if(el && el.address_components){
            	var ar = $.grep(el.address_components, function(item){ return item.types.includes("locality"); });
              	if(ar && ar.length){
                	city = ar[0].short_name;
                  	if(city){
                    	$('body').append('');
                      	$('.as-geoCity').val(city);
                      	as.sys.request("common", "saveCity", {
	    			        data: { city: city },
    	        			onSuccess: function (data) {
        		        		if (data.result && data.data && data.data.length) {
                                  $('.as-userCity').text(city);
                				}
	             			}
						});
                    }
                }
            }
        });
    } catch(ex){
    }
}

Если город определился, то делаем Request JS и сохраняем в настройках пользователя: 

create PROCEDURE [dbo].[request_common_saveCity]
	@parameters ExtendedDictionaryParameter READONLY,  -- or ExtendedDictionaryParameter
	@username nvarchar(32)
AS
BEGIN
	declare @userGuid uniqueidentifier
	select @userGuid = Value2 from @parameters where [Key] = 'falconGuid'
	
	declare @city nvarchar(64)
	select @city = Value2 from @parameters where [Key] = 'city'
	
	declare @id int
	select @id = id from as_userSettings where falconGuid = @userGuid
	if(@id is null) begin
		insert into as_userSettings(falconGuid, username, city)
		values(@userGuid, @username, @city)
	end else begin 
		update as_userSettings 
		set city = @city
		where id = @id
	end

     -- SELECT 1 Msg, Result
	select 'OK' Msg, 1 Result

        -- SELECT 2 Основные данные в виде произвольной таблицы
     select 1

        -- SELECT 3 Внешние действия

END

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

Вывод в верхней полоске: 

В дальнейшем вы можете задействовать этот город через username и falconGuid (он передается во многие процедуры через @parameters с key='falconGuid'). 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK