Интегрированные плагины

Автоопределение и выбор города

Тема Seller 2.0 поддерживает интеграцию с плагином Автоопределение города (cityselect) для автоматического определения местоположения покупателя и выбора города.

Ссылка на плагин

Как это работает

Плагин определяет город посетителя и отображает его в шапке сайта. Покупатель может подтвердить свой город или выбрать другой из списка во всплывающем окне.

Для вывода города тема использует хелпер плагина без параметров:

{shopCityselectPlugin::showCity()}

Вывод в шапке сайта

Блок с городом выводится через конструктор шапки в настройках темы («Состав шапки»):

ВерсияГде искать элементШаблон
ДесктопШапка → Верхняя часть шапки → «Состав шапки» → группа «Плагины» → «Плагин: Выбор города» (по умолчанию выключен; в средней, нижней и фиксированной частях шапки элемента нет)html/header/desktop/blocks/plugin_cityselect.html
МобильнаяМобильная версия → Шапка → Второй тип шапки → «Состав шапки» → «Выбор города» (включён по умолчанию; доступен только при типе отображения шапки «второй», а тип по умолчанию — первый)html/header/mobile/blocks/plugin_cityselect.html

Включите нужный элемент в конструкторе. Никаких дополнительных настроек внешнего вида в панели темы нет: блок просто оборачивает вывод showCity() в контейнер plugin-cityselect flex items-center, а вёрстка самого уведомления и окна выбора города задаётся в шаблонах плагина.

Настройки плагина

Для корректного вывода плагина в шапке сайта переключите значение настройки Вывод плагина на Вручную. Это позволит теме самостоятельно управлять расположением блока с городом.

Шаблоны плагина

Внешний вид уведомления и всплывающего окна настраивается в разделе Шаблоны самого плагина. При замене HTML сохраняйте функциональные классы плагина (i-cityselect__*) — на них завязан его JavaScript. Классы оформления можно заменить на утилитарные классы темы Seller 2.0.

Город и уведомление

Пример шаблона, адаптированный под разметку Seller 2.0:

{strip}
<div class="b-cityselect__wrapper flex items-center {if !empty($settings.by_hook)}b-cityselect__wrapper--{$settings.by_hook|escape}{/if}">

    <button class="b-cityselect__city i-cityselect__city_change flex items-center gap-2 text-custom" type="button">
        <i class="icon icon-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M272 192C272 236.2 236.2 272 192 272C147.8 272 112 236.2 112 192C112 147.8 147.8 112 192 112C236.2 112 272 147.8 272 192zM192 160C174.3 160 160 174.3 160 192C160 209.7 174.3 224 192 224C209.7 224 224 209.7 224 192C224 174.3 209.7 160 192 160zM384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384zM192 48C112.5 48 48 112.5 48 192C48 204.4 52.49 223.6 63.3 249.2C73.78 274 88.66 301.4 105.8 329.1C134.2 375.3 167.2 419.1 192 451.7C216.8 419.1 249.8 375.3 278.2 329.1C295.3 301.4 310.2 274 320.7 249.2C331.5 223.6 336 204.4 336 192C336 112.5 271.5 48 192 48V48z"/></svg></i>
        {if empty($is_mobile)}<span class="i-cityselect__city text-sm text-nowrap">{$location.city}</span>{/if}
    </button>

    {if !empty($location.need_detect) || $show_notifier=='force'}
        <div class="b-cityselect__notifier">
            <div class="b-cityselect__notifier_triangle"></div>
            <div class="b-cityselect__notifier_title">Ваш город <b class="i-cityselect__city">{$location.city}</b>?</div>
            <div class="b-cityselect__notifier_buttons text-nowrap">
                <input type="button" class="b-cityselect__city_yes i-cityselect__city_yes btn btn-theme btn-sm" value="Да">
                <input type="button" class="b-cityselect__city_no i-cityselect__city_no btn btn-outline-theme btn-sm" value="Нет">
            </div>
        </div>
        {if !empty($location.need_detect)}
            <script>if (typeof shop_cityselect !== 'undefined') { shop_cityselect.detect() } else { document.addEventListener("DOMContentLoaded", function() { shop_cityselect.detect() }) }</script>
        {/if}
    {/if}

</div>
{/strip}

Всплывающее окно выбора города

{strip}
<div id="cityselect__change" class="b-cityselect__change i-cityselect__change">

    <a href="" data-remodal-action="cancel" class="remodal-close b-cityselect__change_close i-cityselect__change_close"></a>

    <div class="b-cityselect__change_info">
        Ваш город: <span class="i-cityselect__city">{$location.city}</span>
    </div>
    {if empty($settings.token)}<div class="b-cityselect__change_error text-red-500">Ошибка! не указан API-ключ в настройках плагина</div>{/if}
    <div class="b-cityselect__change_city_wrapper">
        <input type="text" class="b-cityselect__change_input i-cityselect__input form-control form-control-base" placeholder="[`Введите название Вашего города`]" value="">
    </div>

    {if !empty($settings.cities)}
        <div class="b-cityselect__list_wrapper">
            <ul class="b-cityselect__list">
                {foreach $settings.cities as $city}
                    <li><a href="#" data-city="{$city.city|escape}" data-region_kladr_id="{$city.region|escape}" data-postal_code="{$city.zip|escape}" class="i-cityselect__set_city {if $city.bold}font-medium{/if}">{$city.city}</a></li>
                {/foreach}
            </ul>
        </div>
    {else}
        <div class="b-cityselect__list_spacer"></div>
    {/if}
</div>
{/strip}

После замены шаблонов проверьте вывод на витрине и при необходимости скорректируйте утилитарные классы под свой дизайн.

Альтернатива: плагин SEO-регионы

В качестве альтернативы можно использовать плагин SEO-регионы (Regions). Этот плагин также позволяет определять и выбирать город, а кроме того создает региональные поддомены для SEO-продвижения.

В конструкторе шапки для него предусмотрены отдельные элементы: «Плагин: SEO Регионы» (десктоп) и «SEO Регионы» (мобильная версия), шаблоны html/header/desktop/blocks/plugin_regions.html и html/header/mobile/blocks/plugin_regions.html. Действуют те же ограничения: на десктопе элемент лежит в группе «Плагины» только в верхней части шапки (в средней, нижней и фиксированной его нет), а в мобильной версии — только во втором типе шапки, при том что по умолчанию используется первый. Блок выводит окно выбора города хелпером:

{shopRegionsViewHelper::getWindow()}

Тема при этом дополняет стандартную ссылку плагина иконкой геометки и классом text-custom, чтобы она соответствовала оформлению шапки.

Плагин SEO-регионы может быть предпочтительнее, если вам нужна региональная SEO-оптимизация с поддоменами для разных городов.