Локализация зарубежного сайта = разработка с нуля: как сделать "копию" функциональнее оригинала
Для немецкого бренда кухонной посуды и принадлежностей ZWILLING Digital-студия VediTa выполнила локализацию американского интернет-магазина zwilling.com/us/ как самого полного, современного и функционального из сайтов сети:
- перенесли сайт с PHP фреймворка Yii2 на CMS 1С-Битрикс;
- выполнили двустороннюю интеграцию сайта с 1С;
- перенесли дизайн zwilling.com/us/ на zwilling.ru, переверстав все блоки под русскоязычный контент.
Ход работ:
Дизайн и часть вёрстки взяты с американского интернет-магазина zwilling.com/us/. Но поскольку он выполнен на PHP фреймворке Yii2, а для российской версии выбрана CMS 1С-Битрикс, по факту это индивидуальная разработка сайта. Для этого потребовались глубокая переработка встроенных функций CMS и перенос готового дизайна с переверсткой его под русскоязычный контент.
Дизайн и контент сайта предоставил клиент. Наша задача — выполнить техническую часть с переносом дизайна американского сайта на 1С-Битрикс, с учетом доработок и обновлений на «родительском» сайте:
1. Чтобы сохранить визуальное единство американского и русского сайтов бренда, при переносе дизайна потребовалось переверстать все визуальные и текстовые блоки интернет-магазина. Текст на кириллице занимает места больше, чем англоязычный, а значит все текстовые блоки и иллюстрации нужно было подогнать друг под друга с учетом особенностей русского языка.
2. На zwilling.ru два каталога: по брендам и по типу товаров. Помимо привычного каталога по типам продукции дополнительно реализован (и отражен в меню сайта) трехуровневый каталог по брендам с подкатегориями и сериями продукции.
Чтобы создать корректную структуру сайта с двумя каталогами, мы разработали алгоритм по сбору свойств товара (бренд, коллекция, серия). По нему создали отдельную структуру каталога и меню с выводом динамически формируемых страниц.
Благодаря этому на сайте весь контент уникален (это важно в первую очередь для SEO): один и тот же товар показывается в каталоге по товарам и по брендам, а его страница со всеми деталями формируется в зависимости от источника перехода и исключает дубли в url. Сами каталоги брендов и товаров по категориям формируются динамически и могут продвигаться независимо друг от друга.
3. Для сайта zwilling.ru разработана двусторонняя интеграция с 1С: каталог интернет-магазина формируется из 1С заказчика, и в неё же напрямую поступают заказы с сайта. Это нужно для корректного учёта товаров и продаж с сайта, и для автоматического формирования акций и спецпредложений напрямую на сайт.
Так в продуктовых страницах и на страницах каталога хиты, топ продаж, горячие предложения подгружаются из 1С, а отдельные акции и спецпредложения с баннерами добавляются вручную в каталоге брендов и на главной странице через админку.
4. Поиск товаров на zwilling.ru существенно переработан по сравнению со стандартным модулем Битрикса. По мере набора запроса пользователю показываются подсказки (как в поисковых системах), выводятся популярные запросы и тут же выдаются категории и сегменты, в которых представлен товар. При большой номенклатуре продукции детальный поиск удобнее пользователю, так можно сразу выбрать отображение в нужном виде: как часть серии определённого бренда, по назначению и прочим характеристикам.
При однозначном запросе результаты поиска показываются в классическом виде: сами товары, их фильтрация по возрастанию или убыванию цены, рекомендациям покупателей, рейтингу товара или брендам, и категории, в которых эти товары содержатся.
5. Для zwilling.ru мы полностью переработали вид стандартного модуля личного кабинета от 1С Битрикс. Отрисовали уникальные макеты в стиле сайта, сверстали и настроили по аналогии с личным кабинетом англоязычного сайта-донора.
6. Блок с постами из Instagram на главной странице сайта реализован не стандартным модулем из маркетплейса 1С-Битрикс, а написан с нуля как инфоблок с добавлением контента на сайт.
Дело в том, что в процессе разработки сайта произошло объединение Facebook и Instagram, и вывод постов на сайт через модуль инстаграма из маркетплейс Битрикс перестал работать. Поскольку клиенту нужен был вывод постов из соцсети к запуску сайта, мы написали с нуля динамический модуль формирования ленты под конкретный сайт и профиль в соцсети.
7. Кроссбраузерность. Ещё одна проблема возникла в процессе вёрстки zwilling.ru: в конце 2019 года вышло масштабное обновление десктопной версии браузера Safari, в результате которого некоторые блоки на сайте либо не отображались, либо отображались некорректно.
Например, после обновления в Safari на компьютерах перестали корректно отображаться блоки брендов на главной странице, публикации и видео в разделах История компании и Мир кулинарии, а модуль отвечающий за отзывы и рейтинг товаров понадобилось переверстывать заново — браузер некорректно обрабатывал стили блока и карточки товара в целом.
Кроме того, русскоязычной команде zwilling пришлось догонять американскую: мы брали за образец дизайн действующего сайта, который менялся в процессе нашей работы (разработка заняла около 2 месяцев). Часть изменений потребовалось вносить в уже сделанные модули, а часть по согласованию с заказчиком переносить в доработки после запуска сайта.
В то же время некоторые решения у нас появились раньше, чем на американском сайте. Например, вывод акционных блоков на всех продуктовых страницах, а не только на главной, сначала появился у нас, и только месяц спустя что-то подобное появилось на zwilling.com/us/.
Все работы заняли 3 месяца — с октября по декабрь 2019 года. Сейчас сайт zwilling.ru на технической поддержке, и мы продолжаем дорабатывать его по договорённости с клиентом.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
