Локализация зарубежного сайта = разработка с нуля: как сделать "копию" функциональнее оригинала

Для немецкого бренда кухонной посуды и принадлежностей ZWILLING Digital-студия VediTa выполнила локализацию американского интернет-магазина zwilling.com/us/ как самого полного, современного и функционального из сайтов сети:

  • перенесли сайт с PHP фреймворка Yii2 на CMS 1С-Битрикс;
  • выполнили двустороннюю интеграцию сайта с 1С;
  • перенесли дизайн zwilling.com/us/ на zwilling.ru, переверстав все блоки под русскоязычный контент.

Ход работ:

Дизайн и часть вёрстки взяты с американского интернет-магазина zwilling.com/us/. Но поскольку он выполнен на PHP фреймворке Yii2, а для российской версии выбрана CMS 1С-Битрикс, по факту это индивидуальная разработка сайта. Для этого потребовались глубокая переработка встроенных функций CMS и перенос готового дизайна с переверсткой его под русскоязычный контент.

021bae88133968ba710558bc89699f20.png

Дизайн и контент сайта предоставил клиент. Наша задача — выполнить техническую часть с переносом дизайна американского сайта на 1С-Битрикс, с учетом доработок и обновлений на «родительском» сайте:

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

2. На zwilling.ru два каталога: по брендам и по типу товаров. Помимо привычного каталога по типам продукции дополнительно реализован (и отражен в меню сайта) трехуровневый каталог по брендам с подкатегориями и сериями продукции.

ebe53415db0472ca28922df1e0b38cee.png

566bfc2e5bd1f001b277aec0d8d05893.png

Чтобы создать корректную структуру сайта с двумя каталогами, мы разработали алгоритм по сбору свойств товара (бренд, коллекция, серия). По нему создали отдельную структуру каталога и меню с выводом динамически формируемых страниц.

Благодаря этому на сайте весь контент уникален (это важно в первую очередь для SEO): один и тот же товар показывается в каталоге по товарам и по брендам, а его страница со всеми деталями формируется в зависимости от источника перехода и исключает дубли в url. Сами каталоги брендов и товаров по категориям формируются динамически и могут продвигаться независимо друг от друга.

7322967f793f14e47cfd725e91b94f9c.png

3. Для сайта zwilling.ru разработана двусторонняя интеграция с 1С: каталог интернет-магазина формируется из 1С заказчика, и в неё же напрямую поступают заказы с сайта. Это нужно для корректного учёта товаров и продаж с сайта, и для автоматического формирования акций и спецпредложений напрямую на сайт.

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

4. Поиск товаров на zwilling.ru существенно переработан по сравнению со стандартным модулем Битрикса. По мере набора запроса пользователю показываются подсказки (как в поисковых системах), выводятся популярные запросы и тут же выдаются категории и сегменты, в которых представлен товар. При большой номенклатуре продукции детальный поиск удобнее пользователю, так можно сразу выбрать отображение в нужном виде: как часть серии определённого бренда, по назначению и прочим характеристикам.

b7f103f3f263d3991c3c27c07d4c3fe5.png

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

92b187958c235755886447c1e3d97484.png

5. Для zwilling.ru мы полностью переработали вид стандартного модуля личного кабинета от 1С Битрикс. Отрисовали уникальные макеты в стиле сайта, сверстали и настроили по аналогии с личным кабинетом англоязычного сайта-донора.

487dd8e8e24f286156fc859e8043a23c.png

6. Блок с постами из Instagram на главной странице сайта реализован не стандартным модулем из маркетплейса 1С-Битрикс, а написан с нуля как инфоблок с добавлением контента на сайт.

Дело в том, что в процессе разработки сайта произошло объединение Facebook и Instagram, и вывод постов на сайт через модуль инстаграма из маркетплейс Битрикс перестал работать. Поскольку клиенту нужен был вывод постов из соцсети к запуску сайта, мы написали с нуля динамический модуль формирования ленты под конкретный сайт и профиль в соцсети.

96c8da8db54d7c8a20370f123cab01c2.png

7. Кроссбраузерность. Ещё одна проблема возникла в процессе вёрстки zwilling.ru: в конце 2019 года вышло масштабное обновление десктопной версии браузера Safari, в результате которого некоторые блоки на сайте либо не отображались, либо отображались некорректно.

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

Кроме того, русскоязычной команде zwilling пришлось догонять американскую: мы брали за образец дизайн действующего сайта, который менялся в процессе нашей работы (разработка заняла около 2 месяцев). Часть изменений потребовалось вносить в уже сделанные модули, а часть по согласованию с заказчиком переносить в доработки после запуска сайта.

В то же время некоторые решения у нас появились раньше, чем на американском сайте. Например, вывод акционных блоков на всех продуктовых страницах, а не только на главной, сначала появился у нас, и только месяц спустя что-то подобное появилось на zwilling.com/us/.

Все работы заняли 3 месяца — с октября по декабрь 2019 года. Сейчас сайт zwilling.ru на технической поддержке, и мы продолжаем дорабатывать его по договорённости с клиентом.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine