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

Менеджер ещё уточнил, что в региональном поиске до сих пор успешно поднимаются страницы с помощью сгенерированного по шаблону текста, когда под разные регионы создаются однотипные страницы на разных "географических" URL-ах, а в едином для всех дублей тексте меняются лишь географические названия.

Менеджер утверждал, якобы такие нечёткие дубли ранжируются на поиске плохо по сравнению с исходной страницей, но только до момента, когда пользователь начинает искать из своего региона товар в своём же регионе. Тогда региональный дубль взлетает наверх, а исходная страница падает как менее релевантная.

Разработчик комментирует: Я видел конечно, как провинциальный сайт из Кукуево занимает первую строку регионального поиска по запросу "мастер установить стеклопакет срочно кукуево". Но это не 100% факт.

И даже аргумент, что языковые версии сайта это те же дубли исходного сайта, ранжируемые по региону - меня не убедит без подтверждения, что подобное правило действует и в отношении текста с одной лишь изменённой географией.

И тем не менее, контент-менеджер сетовал: в виде плагина для интернет-магазина ещё не встречал удобных автоматических решений смены текстовки сайта от региона.

Поэтому нами было принято решение изготовить модуль - назвали его Fashion, а техническое задание составили в следующем форме:

1 Приделать к сайту интернет-магазина ещё один тип страниц - лендинги коллекций одежды.

• Одна коллекция - одна посадочная страница.
  • техническое исполнение - как единый макет в шаблоне сайта
• Задача лендинга - красиво рассказать о коллекции.
  • только о её товарах
  • ничего отвлекающего
  • остальные товары - на сайте
  • листинг разбить на блоки по 4 товара
  • перед листингом постер и вступительный текст
  • между блоками позволить произвольный текст
  • в конце листинга позволить текст
• Сверху лендинга сделать слайдер товаров.
• Внизу - выбор города.
• Логотип
  • только текстом: фирма и город, на второй строке слоган
  • положение на узких экранах - сверху страницы
  • на широких экранах - повёрнутым прилипнуть слева
• Лендинг оформить в светлом тоне.
• Использовать современный, стильный дизайн.
• Полная адаптивность
  • смарт ТВ
  • компьютер
  • ноутбук
  • планшет
  • смартфон
• Минимум js-скриптов, ясный чистый код вёрстки.
• Быстрая загрузка, все SEO-плюшки интегрировать сразу.

2 Снабдить создаваемые этим модулем коллекционные лендинги автоматическим поисковым продвижением по городам.

• Адрес лендинга пусть задаёт менеджер произвольно.
• Город поместить в конец адреса без участия менеджера.
  • например http://ваш.сайт/урл?kiev
  • ограничиться нужными городами
  • портянка на весь мир - наверно не нужна
• Адрес без города - например http://ваш.сайт/урл - приравнять к городу магазина, допустим Одесса.
• На слайде товара упомянуть о доставке в выбранный город.

3 SEO-данные создаваемых лендингов собирать "на лету" в автоматическом режиме по продуманной схеме со склонением города по падежам.

• В текстовке лендинга дать возможность менеджеру использовать выбранный город с помощью подстановочных меток падежей, например
  • [#i] - именительный
  • [#r] - родительный
  • [#d] - дательный
  • [#v] - винительный
  • [#t] - творительный
  • [#p] - предложный
• На входе схема будет выглядеть примерно так
  • тайтл "Платья лето 2018 в [#p]"
  • ключи "купить платье [#i], доставка по [#d]"
• На выходе должно получаться так
  • тайтл "Платья лето 2018 в Киеве"
  • ключи "купить платье Киев, доставка по Киеву"
• Задача продумать схему генерации - дело менеджера магазина.

Порядок работ

Наверно, как и большинство фриланс-бригад, воображающих себя вебстудией, наша команда состоит из 3 человек: дизайнер (psd, svg, png, jpg), верстальщик (html, css) и фронтенд программист (js, php).

За графику проекта, красоту дизайна, его свежесть отвечает дизайнер Pachulli JR. Именно он рисует первый набросок, пока остальные члены команды ждут своего часа. Pachulli решает, какие будут фирменные цвета дизайна, сколько фотографий нужно, размер, формат, где расположить слайдер, где будут иконки и какие, в каком формате, откуда их качать и прочие вопросы дизайнерской природы.

Когда PSD-макет готов, за работу берётся верстальщик. Он развёрстывает макет дизайнера сначала в статичный HTML-шаблон, так чтобы использовать мало стилевых классов, а вёрстка чтобы с самого начала была чистой и адаптивной. Именно верстальщик в этот момент задаёт канон верстки, по которому мы будем дальше делать проект.

Теперь к делу подключается программист и пишет основу клиентских скриптов. Подобно верстальщику, его задача в этот момент - использовать как можно меньше библиотек, а Javascript код написать проще и элегантно, привязав клиентскую логику к namespace (пространству имён) стилевых селекторов, порождённых каноном вёрстки. Так статический HTML частично получает динамические качества.

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

Так что в этот раз остановили выбор на бесплатной Impera CMS - она используется в основном для создания интернет-магазинов. Система устроена просто, предлагает лёгкий синтаксис шаблонов, а её пользователи имеют средства для покупки модулей нашей ценовой категории. И кроме того, у нас уже был положительный опыт работы с имперской CMS - однажды участвовали в создании одностраничного модуля Branding (живое демо тут).

Разработчик комментирует: Спасибо за выбор Имперы и создание ещё одного прекрасного модуля. Желаю авторам успешных продаж.

После выбора CMS наступает конечная стадия работ - верстальщик снова проходит по статичному HTML-шаблону и проставляет в нужных местах разметки шаблонизационные теги выбранной нами CMS. Программист проверяет свой участок работ с учётом последних изменений верстальщика. В результате получается готовый динамический модуль для выбранной системы. Его файловая структура зависит от CMS, в нашем случае структура получилась такой, как показано справа.

Как собирали макет

Как видно на показанной выше структуре файлов, готовый модуль состоит из:

• стилевого файла mod-fashion.css
• макетного файла mod-fashion.htm
• каких-то картинок mod-fashion/... (обозначены троеточием)
• скриптового файла mod-fashion.js

Нам заранее сообщили, что модуль будет выставлен на демонстрационном сайте Impera CMS, где существует всего лишь одна демонстрационная база товаров - и она точно не подойдёт к теме одежды ни по дереву категорий, ни по текстовке товаров, ни по качеству фотографий.

Мы решили вложить в модуль свои демонстрационные фотографии и текстовки. Но чтобы не засорить макет и сделать демо-данные легко удаляемыми, пришлось разложить макетный файл на 3 следующих части - назовём их субмодулями:

• mod-fashion-demodata.htm - наши демо-данные (симулятор базы данных)
• mod-fashion-layout.htm - вёрстка страницы
• mod-fashion-towns.htm - список поддерживаемых городов

Работа над mod-fashion.htm

Раскладывая этот файл на обозначенные выше части, мы просто вынесли вёрстку в соответствующий субмодуль, а вместо вёрстки записали в макет подключение 3 субмодулей таким образом:

{$mod = 'mod-fashion-demodata.htm'}
{if $emulator->existsModule($mod)}
    {include "$mod"}
{/if}

{include 'mod-fashion-towns.htm'}
{include 'mod-fashion-layout.htm'}

Демонстрационные данные

Содержимое данного субмодуля - напомним, это файл mod-fashion-demodata.htm - стало результатом таких действий с нашей стороны:

• Перепечатали из настоящего магазина одежды названия 4 категорий товаров:
  • Эксклюзив
  • Женская одежда
  • Мужская одежда
  • Детская одежда
• Перепечатали 4 товара для слайдера наверху страницы.

• Перепечатали 27 товаров для листинга в нижней части страницы.
• Перепечатали текстовые вставки над, под и между товарными блоками.

{function demoObject}
    {$data = serialize($data)}
    {$data = 'O:8:"stdClass"'|cat:(substr($data, 1))}
    {$data}
{/function}

{demoObject data = [
    'category_id'    => 1,
    'name'           => 'Эксклюзив',
    'meta_title'     => 'Эксклюзивная одежда для женщин в розницу',
    'enabled'        => 1,
    'products_count' => rand(1, 20),
    'url'            => 'exclusive',
    'url_special'    => 1 ]
    assign = item1}

{demoObject data = [
    'category_id'    => 2,
    'name'           => 'Женская одежда',
    'meta_title'     => 'Одежда для женщин в Украине',
    'enabled'        => 1,
    'products_count' => rand(1, 20),
    'url'            => 'women-clothes',
    'url_special'    => 1 ]
    assign = item2}

{demoObject data = [
    'category_id'    => 3,
    'name'           => 'Мужская одежда',
    'meta_title'     => 'Одежда для мужчин в Украине',
    'enabled'        => 1,
    'products_count' => rand(1, 20),
    'url'            => 'men-clothes',
    'url_special'    => 1 ]
    assign = item3}

{demoObject data = [
    'category_id'    => 4,
    'name'           => 'Детская одежда',
    'meta_title'     => 'Одежда для детей в Украине',
    'enabled'        => 1,
    'products_count' => rand(1, 20),
    'url'            => 'children-clothes',
    'url_special'    => 1 ]
    assign = item4}

{$categories = [
    unserialize($item1),
    unserialize($item2),
    unserialize($item3),
    unserialize($item4) ] scope=global}

{demoObject data = [
    'category_id'      => 1,
    'name'             => 'Коллекция Лето 2018',
    'meta_title'       => 'Купить одежду на лето 2018 в [#P]',
    'meta_description' => 'Магазин ДемоМода шьёт и продаёт...',
    'meta_keywords'    => 'одежда сезон 2018 [#I], доставка...',
    'description'      => 'Пример текста...',
    'enabled'          => 1,
    'url'              => 'may-2018',
    'url_special'      => 1 ]
    assign = item1}

{$category = unserialize($item1) scope=global}

Ещё одно важное действие в субмодуле - мы заглушили своим текстом следующие теги ShortCodes:

• {address} - адрес магазина
• {phone} - телефон
• {skype} - скайп
• {vkontakte} - страница ВКонтакте
• {instagram} - страница Инстаграм
• {facebook} - страница Фейсбук
• {siteName} - название сайта
• {company} - имя фирмы
• {title} - тайтл страницы
• {metaDescription} - мета описание страницы
• {metaKeywords} - мета ключевые слова страницы
• {nameCategory} - название текущей категории
• {itemBrand} - бренд товара
• {itemBrandUrl} - ссылка на страницу бренда
• {thumb} - мини картинка товара
• {photo} - большая картинка товара
• {photoCategory} - постерная картинка категории
• {counters} - скрипты счётчика, метрики, аналитики
• {getProducts} - получить список товаров

{function address}
    Демостроевск, ул. Демонстрантов, дом 1
{/function}

Сразу предупредим, субмодуль демо-данных нужен только для демонстрационного сайта Impera CMS. Субмодуль представляет собой файл с плохо читабельными исходниками большого размера, больше даже чем весь модуль, поэтому эту бесполезную добавку можно удалить из установочного пакета для клиентов.

Субмодуль городов

В этом файле - mod-fashion-towns.htm - мы просто перечислили несколько городов во всех падежах, и так как в субмодуле вёрстки планировалось вывести список городов, а также с помощью цензорного тега провести замену географических меток вида [#i] [#r] [#d] [#v] [#t] [#p] на название активного города в требуемом падеже, то через глобальную область видимости мы отдали остальным субмодулям список городов и запись активного города в переменных $towns и $town соответственно.

Разработчик комментирует: Тут вы изобрели велосипед. Вынуждаете пользователя вести список городов в вашем файле, да ещё на уровне программиста - то есть в исходных кодах. В то время как в админпанели у пользователя уже есть удобный интерфейс для редактирования списка городов. Правильнее было бы привязать логику модуля к тому функционалу, тогда необходимость в субмодулях (кроме демо-данных) вообще отпадает.