Из хаоса — в красивый каталог: кейс разработки интернет-магазина с интеграцией со старой «1С»
- Заказчик
- Компания «СТК» с 1997 года продает оптом обои и другие отделочные материалы в Самаре.
- Задача
- Создать интернет-магазин, настроить полностью автоматизированную выгрузку на сайт каталога из старой «1С», причем ее структура и наполнение не соответствовало желаемому представлению товаров на сайте.
Интеграция сайта с давно используемой «1С» зачастую становится нетривиальной задачей. Обычно все осложняется тем, при создании системы учета никто не задумывался над тем, как ее содержимое можно будет представить в интернете в удобном для аудитории и сотрудников виде. В этом кейсе мы расскажем, как с помощью грамотной настройки импорта сделали аккуратный интернет-магазин из страшной своим объемом, нелогичностью и возрастом «1С:Управление торговлей».
Задача звучала так: полная автоматизированная выгрузка каталога из «1С», включая остатки, определенный тип цен и самое важное — торговые предложения. При решении поставленной задачи мы сразу выявили проблемы:
- у заказчика установлено решение «1С:Управление торговлей 10.3» на платформе «1С:Предприятие 8.3» 11-летней давности;
- архитектура групп в «1С» совершенно не совпадает с планируемой структурой сайта;
- никаких торговых предложений в «1С» нет, все товары простые;
- есть огромное число — около 15 тысяч — неактуальной устаревшей номенклатуры, которой не место на сайте;
- артикулы товаров либо заполнены частично, либо неуникальны; код товара не используется в принципе;
- наименование товара непригодно для использования на сайте; никаких характеристик нет, то есть создать фильтр для сайта невозможно.
Зачем понадобились торговые предложения
Немного теории: для чего мы хотели использовать торговые предложения. Данный проект — это магазин обоев для оптового сегмента (работает только с юр. лицами). Обои у производителя выпускаются коллекциями. В каждой коллекции есть несколько сочетаний, например фона и рисунка. И фон, и рисунок могут быть разного цвета (колористики).
Как правило, оптовику нужно видеть всю коллекцию и иметь возможность заказать ее со всеми вариантами, а также иметь общую карточку предложения, например фона с представленными вариантами по цвету. Для реализации такого функционала нами и было решено использовать торговые предложения
То есть варианты одного наименования, но с разным цветом сделать отдельными предложениями и вывести их как доступную колористику. В свою очередь на сайте каждое такое торговое предложение имеет отдельную страницу, свою цену и остаток на складе. На выходе получилось это:
Общая карточка товара, общее описание, характеристики, но индивидуальные изображения для каждого цвета и ajax-переход при выборе того или иного цвета. При этом выбранный вариант передается в корзину при заказе как характеристика предложения. Выглядит все логично и понятно.
Что было сделано в «1С»
1. Для начала нам понадобилось добавить свойства товара, необходимые для решения наших задач. Это свойства как технического назначения (системные), так и необходимые для работы фильтров на сайтe.
Естественно, мы предусмотрели дальнейшую автоматизацию в случае добавления нового свойства в «1С», чтобы оно создалось и правильно вывелось на сайте. Для этого мы в названиях системных свойств добавили «!» — такие не выводятся в карточке товара или фильтре, остальные свойства — автоматически выгружаются в инфоблок.
2. Для фильтрации товаров и отсеивания мусорных позиций сначала мы добавили свойство «Выгружать на сайт» со значением «Да/Нет». Но в ходе работы с модулем обмена штатными средствами мы так и не смогли реализовать сортировку товаров со значением пользовательского свойства «Да». Поэтому решено было создать дополнительный реквизит в карточке вместо свойства, и задачу удалось решить. Теперь на сайт выгружаются только отмеченные позиции.
3. Для формирования торговых предложений мы применили особую стратегию. Производители обоев чаще всего именуют свои товары внутри коллекции по особой логике, например, 00000-01, 00000-02 и так далее. И посвященным становится все понятно: первая часть до дефиса повторяется, повторяющаяся для рулонов с одним рисунком — это название, а после дефиса указывается колористика. Для одного рулона их может быть более 10.
Логика очевидна. Раз первая часть одинаковая, значит именно ее мы и используем как идентификатор предложения. Поэтому разбираем при импорте наименование на части и фиксируем имя товара 00000, а 01, 02, 03, … — записываем, как значение свойства «Колористика» в инфоблок торговых предложений. Но оказывается, что не все производители придерживаются подобной логики, некоторые называют свою продукцию Лира-01, Лира-02, Лира-03 и так далее. А некоторые используют совершенно иную систему наименований, например, 84500,84501,84502 и так далее.
Единственно возможное решение тут — привести коды товаров к единому стандарту, а именно 00000-00. У тех производителей, что не используют такую систему, мы добавили новое свойство «Код товара». Чтобы все коды были уникальными, к каждому из них добавили краткое буквенное обозначение производителя. В итоге коды товаров стали такими: el84500-00, el84500-01, el84500-05 и так далее.
Теперь при обработке XML-файлов, полученных при обмене от «1С», мы можем точно понять, что если есть несколько товаров, у которых в коде одинаковая первая часть (до дефиса) — они должны выводиться как торговые предложения. Первая позиция в списке становится товаром-родителем, а все доступные варианты — его предложениями.
Такая система позволила, помимо прочего, снизить трудоемкость процесса наполнения каталога. Ввиду того, что свойства у всей линейки одинаковые, нам нужно заполнять их не у каждого предложения, а только у первого товара в серии. А остальных нужно прописать только код товара.
4. Решение проблемы с значением «Колористики». Производители обозначают варианты колористики с помощью числовых кодов, которые совершенно неинформативны при использовании в фильтре. Поэтому мы ввели понятную линейку цветов: серый, белый, черный и так далее, и добавили для каждого предложения справочник цветов. Так, например, колористика 22 стала серым цветом, а 44 — белым. В итоге мы смогли использовать эти значения для подбора товаров с помощью фильтра.
Привычное название цвета куда понятнее комбинации цифр. При этом при парсинге XML записывается и значение колористики в свойство «Колористика», и цвет в свойство «Цвет» инфоблока торговых предложений.
5. Как мы уже сказали, производитель предлагает коллекции обоев, а в каждое коллекции есть разные принты. И наша задача определить и показать в карточке, например, с однотонным фоном доступный его вариант с рисунком. Тут уже было проще автоматизировать: собрали в массив все товары, с одинаковым значением свойства «Коллекция», удалили из массива текущий просматриваемый id и вывели оставшиеся в списке позиции в блок «Компаньоны».
6. Задача с несоответствием архитектуры каталога в «1С» и на сайте была решена штатным сопоставлением категорий и созданием виртуальной структуры в стандартном модуле обмена внутри «1С». Мы создали папки, соответствующие нашей структуре, внешние коды привязали к категориям на сайте и сопоставили каждую папку «1С» с нужной папкой на сайте.
7. Чуть пришлось повозиться с обновлением цен и остатков на сайте для предложений. Дело в том, что стандартно обновление происходит по внешнему коду товара, но у нас особый случай — в «1С» все товары простые, а на сайте используется товар с торговыми предложениями и обновление цен/остатков должно происходить в инфоблоке именно предложений.
Для этого мы использовали наш код товара. Значение до символа дефис мы взяли за основу и заменили стандартное значение внешнего кода из «1С» на значение кода товара. Так для товара с кодом el84500-01, внешний код стал el84500-01, а код родительского товара — el84500. Теперь система ищет предложения именно по нашему специальному коду товара, а не по внешнему коду, и обновляет значения при их изменении.
8. Изображение. Заказчик решил не использовать хранение картинок внутри «1С». Сначала планировалось использовать хранение файлов в облаке. Но из-за сложностей с получением прямых ссылок на изображение из облака, в итоге остановились на загрузке картинок в отдельную папку в структуре сайта. В общем-то, где именно будут лежать изображения — не принципиально.
Работает все максимально просто и автоматизировано. Сначала в общую папку складываются подряд все картинки с названиями, соответствующими кодам товаров. Например, для товара el84500-01 есть 3 изображения. При этом первое должно стать заглавным. Мы сохраняем в папку 3 файла с именами: el84500-01_01.jpg, el84500-01_02.jpg, el84500-01_03.jpg, а также аналогично названные изображения для всех остальных товаров.
При обмене модуль импорта на сайте ищет для товара с кодом el84500-01 картинки по шаблону el84500-01*. Количество и разрешение изображения в этом случае не имеет никакого значения, главное, чтобы название картинки имело первую часть имени до символа_ равную коду соответствующего товара.
Разумеется, при использовании «1С» можно было бы написать обработку и не пришлось бы давать имена вручную, но задача стояла именно такой. Кстати, благодаря ручной обработке картинок мы решили и другие вопросы. С помощью программ пакетной обработки изображений выполняется массовое обрезка всех картинок для достижения одинакового соотношения сторон, уменьшение при необходимости до нужного размера и конвертация в компактный формат .webp.
9. Наконец, применили стандартное решение — настройка автоматического периодического обмена на стороне «1С». Мы задали выгрузку раз в сутки, для наших нужд этого вполне достаточно.
Благодаря таким относительно несложным настройкам и дополнениям «1С» стала функционировать при обмене данными с сайтом именно так, как нам необходимо. При этом реализуется режим 1 окна: все изменения в каталоге вносятся исключительно на стороне «1С», редактирование сайта не требуется.
Кстати, это не единственный вариант интеграции с сайтом нестандартной «1С» с полной автоматизацией при импорте. Еще один описан подробно в нашей статье на VC.
Работы на сайте
После работы с 1С мы продолжили настройку автоматизаций с уже имеющимися объектами на сайте.
1. Реализовали показ всех товаров производителя на одной странице. На главной странице мы выводим виджет с логотипами производителей. И ставим ссылки с них на отдельную страницы брендов, где собираем все их товары.
Аналогично можно попасть на эту страницу и с детальной страницы товара.
2. Связали товары с другими позициями по фильтру. Например, для обоев задали показать разные инструменты, клей и тому подобное.
3. Автоматизировали учет складских остатков. Для каждого торгового предложения необходимо вводить свой остаток на каждом складе. Но штатно модуль обмена суммирует остатки. Здесь мы реализовали запись значений нужного нам склада напрямую, минуя штатный функционал обмена, а при необходимости модуль суммирует складские остатки по каждому складу и выводит их как значение, актуальное для предложения в целом.
4. Создали автоматические стикеры «Новинка» и «Распродажа».
Мы используем вывод на главной виджета с выборкой популярных товаров Виджет имеет табы, соответствующие стикерам. Стикер «Новинка» автоматически устанавливается на товары, с момента загрузки которых прошло не более 30 дней. Раз в сутки cron-задание выполняет проверку соответствия этому условию. По истечении месячного срока с момента загрузки стикер автоматически удаляется, поэтому думать о его актуальность не приходится.
Аналогично, но чуть более сложнее обстоят дела с распродажей. Этот стикер присваивается товарам, участвующим в акциях. Для этого мы создаем акцию и связываем по фильтру акционные товары. В результате на все эти позиции автоматически проставляется стикер «Распродажа», и они помещаются в соответствующий блок на главной. Когда акция завершится и станет неактивной, исчезнет условие наличия стикера, и он автоматически уберется.
5. Настроено «Мегаменю» со ссылками на посадочные страницы с подборкам товаров, которые созданы через SEO умного фильтра. Это — максимально простое и эффективное решение одной из самых главных и трудоемких задач в любом интернет-магазине.
В SEO умного фильтра мы можем создать по условию фильтра любую подборку товаров под любую задачу, снабдить ее собственными метатегами, контентом и уникальным индексируемым url-адресом. Все созданные ссылки при этом при выборе соответствующей настройки автоматически добавляются в карту сайта и в поиск по сайту. При этом все создается в несколько кликов через стандартный интерфейс админ-панели сайта, никаких танцев с бубном.
Готовую ссылку добавляем в «Мегаменю», которое обеспечивает быстрый доступ к таким подборкам.
6. А также настроили стандартные для интернет-магазинов стандартные решения по автоматизации, включая такие как:
- формирование списка просмотренных товаров;
- выгрузку в товарный фид;
- поиск по сайту.
В результате получился интернет-магазина с продуманной, оптимизированной для SEO и удобной для восприятия и навигации структура, легко выполняется подбор необходимых товаров с помощью «Мегаменю», фильтров и поиска. Все содержимое каталога меняется через интерфейс «1С:Управление торговлей», а синхронизация между сайтом и «1С» выполняется автоматически каждые сутки.
Оцените сами, что получилось: сайт проекта запущен. Ждем ваших комментариев. Финальные работы еще завершаются, поэтому если заметите баги, не судите строго — они уже в процессе устранения. А если потребуется аналогичное решение — digital-агентство «Винтра» разработает его и для вас.