Перевод интернет-магазина на Битрикс и интеграция с МойСклад

• Новый дизайн и верстка
• Интеграция с "МойСклад"
• Правильный перенос
• Фишки проекта
• Итог
• Что дальше?

В нашу компанию поступил e-mail. Текст содержания сохранен:

“Привет! Наш магазиш уже достаточно взрослый, чтобы становиться по настоящему сильным и смелым и, при этом перейти на новый уровень, оставаясь таким же милым в общении, красивым и отзывчивым. Мы хотим нанять ему квалифицированного репетитора и, похоже, что ваша кандидатура нам подходит.
Уверен, что Вы сможете помочь нам преодолеть этот сложный период в его воспитании, формировании характера Настоящего Интернет-магазина. Свяжитесь со мной в любое время, я буду ждать вашего звонка. Георгий, любящий родитель.”

Как говорит сам заказчик, причины для перехода на новый сайт были весьма банальны:

“Дизайн старого сайта морально устарел и имеющаяся cms глючила, в работе участвовало около 5 специалистов в разное время, они там прилично "накостылили". Да и не могли мы раньше себе ничего другого позволить. А битрикс сделан, учитывая специфику российского рынка, самое производительное решение, имеется поддержка, обновления. Обзвонили несколько агентств, а будучи клиентами Альфа-Банка обратили внимание, что их клуб клиентов сделала ИНТЕРВОЛГА. Понравилось. Также удалённая разработка значительно доступнее по средствам но не уступает по качеству.”

Добавить нечего. Причины знакомы и зачастую являются определяющими для перехода именно на 1С-Битрикс.

После того, как погрузились в задачу, определили важные нюансы:

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

Переход со старого сайта на новый хорошо описан в нашей статье Перенос сайта на 1С-Битрикс .

Новый дизайн и верстка

В результате анализа конкурентов и основываясь на опыте разработки были приняты следующие решения.

Новый сайт besprovodnoe.ru должен обладать спокойным, лаконичным, современным дизайном. Основной упор делается на удобство чтения и восприятия информации.

Общий стиль — с минимальным количеством украшений и большим вниманием к шрифту и работе с цветом.

Планируется использование принципов material-дизайна от Google. Основой визуального распределения информации по странице должны стать:

1. Использование z-измерения (слои информации на разной «глубине»);
2. Типографика;
3. Свободное пространство;
4. Цвет;
5. Умеренное использование анимации.

Это позволит правильно расставить акценты, выделить важную информацию и повысить удобство работы с сайтом.

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

В результате получился дизайн.

Интеграция с "МойСклад"

МойСклад - известная онлайн-система учета для малого бизнеса. В которой совмещены продажи, закупки, склад, финансы, клиенты и поставщики.

Обычно мы настраиваем и дорабатываем интеграцию с 1С: Управление Торговлей. Все нюансы такой интеграции мы изучили вдоль и поперек. А вот с системой "МойСклад" мы ранее не интегрировались. Все нюансы работы системы с сайтом пришлось выяснять в “боевом режиме”.

Большая часть рисков к счастью не оправдалась.

Во первых, для системы есть возможность синхронизации с различными CMS. Конечно обмен осуществляется, как есть. Из интернет-магазина в МойСклад передаются заказы, обратно — товары и их наличие. Интеграция с 1С-Битрикс реализована на основе стандарта CommerceML через "шлюз" для 1С.

Во вторых, для системы есть JSON API. Все задачи, которые не решает стандартный обмен позволяет решить этот программный интерфейс.

Вот некоторые подводные камни, с которыми столкнулись.

1. Не все данные по товару выгружаются на сайт. Например: вес и штрихкод в выгрузку не попадают. В итоге мы загружаем недостающие данные по API.
2. В интернет-магазине и в системе МойСклад есть тип товаров, как архивные. На стороне сайта такие товары ограничены в возможностях. Их нельзя купить, сравнить и они служат только для привлечения посетителей из поисковой системы. Если товар на стороне МойСклад пометить, как архивный, то он попадает в специальную группу, которая не попадает в выгрузку. Как результат, сайт не знает, что товар стал архивным и перестает обновлять по нему информацию.
   Как решили : с определенным временным интервалом проверяем факт перехода товара в архивные по API. Помечаем такой товар на стороне сайта.
3. В ходе эксплуатации обнаружилась еще одна неприятная вещь. Если заказ оформлялся с доставкой, то в системе МойСклад позиция доставки заводится, как отдельный товар со своей категорией. Следующая выгрузка товаров на сайт переносит уже эту позицию на сайт, как отдельный товар.
   Как решили : на стороне сайта запретили отображение таких товаров.

Правильный перенос

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

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

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

Фишки проекта

Хочу поделиться еще интересными решениями, реализованными в проекте:

1. Мастера подбора продукции . Система вопросов-ответов, которая позволяет выбрать требуемую продукции, экономя ваше время. Для администратора - это удобный инструмент по привлечению клиентов, с простой системой управления. Пример можно посмотреть по ссылке
2. Формирование заказа без регистрации . При этом есть доступ к своему заказу по специальной ссылке в письме. Каждая такая ссылка генерируется по специальному алгоритму, так что подобрать адрес страницы заказа невозможно. В качестве меры безопасности такие страницы также  закрыты от индексирования поисковыми системами и выдают ошибку 404, как будто таких страниц нет.
3. Автоматическая подгрузка товаров при достижении конца страницы . При этом постраничность сохраняется. Если зайти на страницу товара на второй подгруженной странице, а потом нажать “Вернуться” назад, то мы попадем именно на вторую страницу, а не начальную.
4. Привязка типов цен к определенным условиям при оформлении заказа . Например, если выбрать способ доставки самовывоз, то стоимость заказа будет ниже.
5. Товары снятые с производства . Такие товары невозможно купить или сравнить. Они не участвуют в сортировке по параметрам и служат для привлечения поискового трафика.
6. Красивые рассылки . Подробнее можно почитать здесь . При этом все уведомления с сайта также приходят в дизайне сайта.
7. Многоязычность . На сайте используется два языка. В дальнейшем планируется расширить этот диапазон. Перевод происходит с помощью сервиса от google.

Итог

Результат можно посмотреть и оценить по ссылке: https://besprovodnoe.ru/

В данном проекте мы прокачали свой скилл по интеграции сайта с незнакомой нам системой учета МойСклад. Теперь интеграция с этой системой нам также под силу. Хотите проверить? - Обращайтесь!

Что касается правильного переноса сайта на 1С-Битрикс, то 11 апреля старый сайт был переключен на новый. Позиции (в поисковых системах) были незначительно снижены. Это связано с подключением протокола https, который гарантирует, что весь обмен данными с сайтом будет зашифрован. Для поисковых систем, это фактически новый домен, который необходимо склеить со старым. Ждем окончания этой процедуры, чтобы приступить к дальнейшему анализу позиций и уже продвижению.

Что дальше?

Мы продолжаем совершенствовать сайт уже в режиме сопровождения. Были решены следующие задачи:

1. Отзывы для товаров и новостей с возможность авторизации во всевозможных социальных сетях.
2. Определения местоположения по GEOIP на странице оформления заказа. При этом определенный город помечается, как “определен автоматически” и в случае ошибки есть возможность его изменить.
3. Возможность сделать повторный заказа на странице заказа. Напомню, что как таковой авторизации на сайте нет и переход на страницу заказа осуществляется по специальной ссылке. Для повторного заказа все данные берутся прямо из заказа и их не требуется заполнять повторно.
4. Слайдер картинок у товара на странице со списком товаров. Все картинки можно посмотреть не переходя на детальную страницу.
5. Получение данных организации при оформлении заказа с помощью dadata.
6. Настройка и регулярное обновление yml-файла для выгрузки на Яндекс.Маркет.
7. Автоматическое создание 301 редиректов при изменении разделов и товаров.

А с недавних пор наш отдел маркетинга начал работы по сео-продвижению сайта.

Магазин попал в надежные руки и мы воспитали в нем характер Настоящего Интернет-магазина.

Если ваш сайт еще не окреп, но уже достаточно взрослый, чтобы перейти на новый уровень, то обращайтесь.