8uh.ru - это информационный портал в стиле "Подслушано". Обсуждаем важные новости мира и интернета, показываем тонкости работы с различными сайтами и социальными сетями: от сайтов поисковых систем Яндекс, Гугл, Мэйл, Рамблер, Нигма до соцсетей Вконтакте, Одноклассники, Твиттер и Пинтерест. Подсказываем как грамотно сделать сайт и получить на него посетителей, используя различные способы продвижения сайтов: SEO-продвижение, краунд-маркетинг, соцсигналы, SMM-маркетинг и SMO-маркетинг.

Выбор города. Простой скрипт для любого сайта.

Частенько возникают ситуации, когда для сайта необходимо сделать форму, с помощью которой пользователи смогут выбирать города-представительства и видеть некую специфическую информацию, характерную для выбранного города. В сети есть несколько готовых решений, основанных на платных и бесплатных базах, на YandexAPI, GOOGLEAPI и других, но порой нужно максимально просто и быстро прикрепить к сайту возможность смены локации и соответствующей информации. И у нас есть решение этого вопроса!

Скрипт-модуль выбора города (страны или региона)

Сразу оговоримся, что этот скрипт-модуль можно применить для любого интернет-ресурса, на котором используется свежая библиотека jQuery (версии выше 2). Его можно разместить в коде нужной страницы сайта в любом расположении: в шапке, в боковом правом или левом меню, в подвале сайта. Если на ресурсе используется какой-либо движок (CMS, система управления содержимым), то вставку можно произвести через использование виджета «HTML-код».

Полный листинг кода скрипта выбора города для сайта:

Далее, подробно разберём этот код.

Список выбора региона, страны или города

Первое, что нужно сделать — указать список локаций, выбор которых вы хотите возложить на плечи пользователей. Делается он с помощью специальных тегов в этой части кода:

Если нужно больше локаций — добавляйте, но делайте уникальные ID — они нам пригодятся. Далее, указываем в нужном месте информацию, которая будет выводится в зависимости от выбранного города (ВАЖНО! Указывайте классы с таким же названием, как и в ID select-а):

Обратите внимание, вложенные блоки основного контейнера будут скрыты с помощью:

Jquery магия

Теперь начинается та самая магия. С помощью jQuery скрипта мы будем показывать блок с информацией в зависимости от выбранного значения SELECT. Плюс ко всему, запишем наш выбор в LOCAL STORAGE (локальное хранилище браузера — «аналог» cookies, который позволит запомнить выбор пользователя при перезагрузке страницы или перехода на другую страницу нашего сайта):

В общем-то всё! Размещаем код, сохраняем и любуемся. Если будут вопросы — пишите в комментарии.

ТЕСТ:

Выбор города:

Тел.: НОМЕР ТЕЛЕФОНА Челябинск
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Москва
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Санкт-Петербург
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Нижний Новгород
426-968-289
Email: mail@mail.ru

Рассказать о подслушанном:

Комментарии

Один комментарий к записи: “Выбор города. Простой скрипт для любого сайта.
  • Александр пишет:

    Огромное спасибо за рецепт — я прям воспрял духом решая проблему «Выбор города» на простеньком сайте.
    Но никак не получается с помощью предложенного подхода решить задачу «выбрал город в одном блоке страницы — в остальных (двух) блоках отображается сделанный выбор».
    Т.е. на одной странице работают три копии этого скрипта (и работают хорошо), но работают независимо (каждая копия использует свою запись «LocalStorage» — иначе у меня не получилось).
    А мне позарез нужен функционал «пользователь выбрал город один раз и его выбор отображается в трёх блоках каждой страницы сайта с возможностью поменять город в каждом из блоков» (блоки «город + соответствующий номер телефона» повторяются на всех страницах сайта по три раза).

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *