Сайт-каталог небольшого издательства научно-популярных книг, сделанный около 2009 года, снова работает: каталог и корзина открываются в новых браузерах и на телефоне, а прежний дизайн и адреса страниц на месте. Создание сайта заново не понадобилось: Евгений Росляков вычистил и заменил старые скрипты. Сайтами он занимается с 2016 года, работает как самозанятый по договору, для юрлиц готовит закрывающие документы, заказы берёт в Москве и удалённо.
Сайт издательство заказало давно, и с тех пор его почти не трогали. Редакция боялась любой правки: стоило что-то изменить, ломалось рядом. В новых браузерах переставали работать фильтры каталога и кнопка «В корзину». Выпадающие меню в духе DHTML на телефоне не открывались вовсе, а читатели всё чаще заходили именно с телефона.
Причину нашёл быстро. На одной странице были подключены сразу две библиотеки, MooTools и Prototype JavaScript Framework. Обе претендуют на знак доллара и дописывают свои методы во встроенные объекты браузера, поэтому мешали друг другу. Сверху лежал ещё плагин на jQuery.
Страницы когда-то собирал один подрядчик, документации не осталось. Менеджер знал только, что «картинки с книгами иногда не прогружаются», а при заказе с телефона клиентам приходилось звонить.
Задача: починить сайт, не меняя вид и адреса страниц, чтобы не растерять позиции в поиске и привычный читателям облик. И чтобы редакция перестала бояться собственного сайта.
Начал с инвентаризации: выписал, какие скрипты на каких страницах подключены и что каждый делает. Часть файлов вообще не использовалась, их убрал.
Сначала стабилизировал то, что есть. MooTools и Prototype вместе работать не могут, поэтому развёл их по страницам: на каждой оставил одну библиотеку, ту, что нужна её скриптам. С плагином на jQuery помог режим jQuery.noConflict. Это классический случай jQuery / Prototype: режим возвращает знак доллара Prototype, а плагин обращается к jQuery по полному имени. Сайт перестал падать, и появилось время на спокойную замену.
Потом переписывал по страницам. Эффекты на MooTools — раскрывающиеся блоки, галерею обложек, всплывающие подсказки — заменил обычным современным JavaScript и стилями. Запросы без перезагрузки страницы, написанные на Prototype, перевёл на встроенные средства браузера. После каждого шага проверял страницу, чтобы поломка не растекалась по сайту.
jQuery оставил только там, где на нём держатся плагины, которые дорого переписывать, и обновил до свежей версии. Теперь она единственная и подключена в одном месте.
Выпадающее меню в стиле DHTML заменил адаптивной навигацией: на телефоне это раскрывающийся список под палец, на компьютере привычная строка. Поиск, фильтры каталога и корзину отдельно проверил на телефоне. Дизайн и адреса не менялись.
В конце написал редакции короткую памятку: где что подключено и как добавлять страницы, ничего не ломая.
Каталог и корзина работают в современных браузерах и на телефоне. Читатель находит книгу через поиск и фильтры, кладёт в корзину и оформляет заказ, не натыкаясь на пустые кнопки. Вид сайта и адреса страниц остались прежними, поэтому поисковые позиции не должны пострадать, а постоянные покупатели переезда не заметили.
Главное изменение — в работе редакции. Менеджер добавляет книги и меняет цены, и сайт после этого не рассыпается. Библиотека теперь одна, а не три, и подключена в одном месте, так что понятно, куда смотреть, если что-то пойдёт не так.
Не всё переписано. Часть старых плагинов на jQuery я оставил, потому что замена потребовала бы отдельного бюджета. Они работают, но когда-нибудь их тоже придётся заменить. Делать это можно по одному, не останавливая сайт.
Следующим шагом редакция думает о более лёгких страницах книг и небольшом блоке рекомендаций. Теперь, когда код читаем, такие вещи можно делать без страха всё сломать.
Если у вас старый сайт, который не открывается в новых браузерах или к которому никто не решается притрагиваться, пришлите адрес в сообщении на freelance.ru. Посмотрю, что на нём подключено, и скажу, с какого скрипта начать.
