Из хаоса — в красивый каталог: кейс разработки интернет-магазина с интеграцией со старой «1С»

Клиент: компания «СТК» с 1997 года продает оптом обои и другие отделочные материалы в Самаре.

Задача: создать интернет-магазин, настроить полностью автоматизированную выгрузку на сайт каталога из старой «1С», причем ее структура и наполнение не соответствовало желаемому представлению товаров на сайте.

Для привлекательного представления компании в интернете и удобства взаимодействия с клиентами для «СТК 11» digital-агентство «Винтра» разработало сайт интернет-магазина с использованием решения «Аспро: Максимум».

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

• добавлены новые свойства товара в «1С:Управление торговлей», как технические (системные), так и необходимые для работы фильтров на сайте.

• созданы единообразные коды товаров;

• настроено формирование торговых предложений для вариаций одного товара на сайте;

• значениям колористики (вариантам расцветки) присвоены человекопонятные названия вместо числовых кодов;

• настроено формирование на основе значения колористики для товаров свойства «Цвет» для торговых предложений при обработке импортируемого XML-файла;

• сделан вывод в блоке «Компаньоны» товаров из одной коллекции;

• настроено автоматическое обновление цен и остатков всех товаров и товарных предложений;

• установлена автоматическая привязка картинок из облака (папки сайта) к карточкам товаров при импорте из «1С:Управление торговлей»;

• настроен периодический обмен с «1С:Управление торговлей» раз в сутки;

• созданы страницы «Бренды», на которых собираются товары одного производителя;

• товары связаны по фильтру с сопутствующими позициями;

• создана автоматизация учета остатков для каждого товарного предложения;

• настроено автоматизированное присвоение товарам стикеров «Новинка» (по времени добавления) и «Распродажа» (по связи товаров по фильтру с акцией), а также вывод таких товаров в виджете на главной.

• с использованием «SEO умного фильтра» созданы посадочные страницы с уникальными URL, мета-тегами и контентом;

• создано «Мегаменю» с доступом к быстрым подборкам товаров (метки/тэги);

• сделано формирование списка просмотренных товаров

• настроена выгрузка в товарный фид;

• настроен поиск.

1. Для начала нам понадобилось добавить свойства товара, необходимые для решения наших задач. Это свойства как технического назначения (системные), так и необходимые для работы фильтров на сайте.

Естественно, мы предусмотрели дальнейшую автоматизацию в случае добавления нового свойства в «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С», мы можем точно понять, что если есть несколько товаров, у которых в коде одинаковая первая часть (до дефиса) — они должны выводиться как торговые предложения. Первая позиция в списке становится товаром-родителем, а все доступные варианты — его предложениями.

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

1. Решение проблемы с значением «Колористики». Производители обозначают варианты колористики с помощью числовых кодов, которые совершенно неинформативны при использовании в фильтре. Поэтому мы ввели понятную линейку цветов: серый, белый, черный и так далее, и добавили для каждого предложения справочник цветов. Так, например, колористика 22 стала серым цветом, а 44 — белым. В итоге мы смогли использовать эти значения для подбора товаров с помощью фильтра.

Привычное название цвета куда понятнее комбинации цифр. При этом при парсинге XML записывается и значение колористики в свойство «Колористика», и цвет в свойство «Цвет» инфоблока торговых предложений.

2. Как мы уже сказали, производитель предлагает коллекции обоев, а в каждое коллекции есть разные принты. И наша задача определить и показать в карточке, например, с однотонным фоном доступный его вариант с рисунком. Тут уже было проще автоматизировать: собрали в массив все товары, с одинаковым значением свойства «Коллекция», удалили из массива текущий просматриваемый id и вывели оставшиеся в списке позиции в блок «Компаньоны».

3. Задача с несоответствием архитектуры каталога в «1С» и на сайте была решена штатным сопоставлением категорий и созданием виртуальной структуры в стандартном модуле обмена внутри «1С». Мы создали папки, соответствующие нашей структуре, внешние коды привязали к категориям на сайте и сопоставили каждую папку «1С» с нужной папкой на сайте.

4. Чуть пришлось повозиться с обновлением цен и остатков на сайте для предложений. Дело в том, что стандартно обновление происходит по внешнему коду товара, но у нас особый случай — в «1С» все товары простые, а на сайте используется товар с торговыми предложениями и обновление цен/остатков должно происходить в инфоблоке именно предложений.

Для этого мы использовали наш код товара. Значение до символа дефис мы взяли за основу и заменили стандартное значение внешнего кода из «1С» на значение кода товара. Так для товара с кодом el84500-01, внешний код стал el84500-01, а код родительского товара — el84500. Теперь система ищет предложения именно по нашему специальному коду товара, а не по внешнему коду, и обновляет значения при их изменении.

5. Изображение. Заказчик решил не использовать хранение картинок внутри «1С». Сначала планировалось использовать хранение файлов в облаке. Но из-за сложностей с получением прямых ссылок на изображение из облака, в итоге остановились на загрузке картинок в отдельную папку в структуре сайта. В общем-то, где именно будут лежать изображения — не принципиально.

Работает все максимально просто и автоматизировано. Сначала в общую папку складываются подряд все картинки с названиями, соответствующими кодам товаров. Например, для товара el84500-01 есть 3 изображения. При этом первое должно стать заглавным. Мы сохраняем в папку 3 файла с именами: el84500-01_01.jpg, el84500-01_02.jpg, el84500-01_03.jpg, а также аналогично названные изображения для всех остальных товаров.

При обмене модуль импорта на сайте ищет для товара с кодом el84500-01 картинки по шаблону el84500-01*. Количество и разрешение изображения в этом случае не имеет никакого значения, главное, чтобы название картинки имело первую часть имени до символа_ равную коду соответствующего товара.

Разумеется, при использовании «1С» можно было бы написать обработку и не пришлось бы давать имена вручную, но задача стояла именно такой. Кстати, благодаря ручной обработке картинок мы решили и другие вопросы. С помощью программ пакетной обработки изображений выполняется массовое обрезка всех картинок для достижения одинакового соотношения сторон, уменьшение при необходимости до нужного размера и конвертация в компактный формат .webp.

6. Наконец, применили стандартное решение — настройка автоматического периодического обмена на стороне «1С». Мы задали выгрузку раз в сутки, для наших нужд этого вполне достаточно.

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

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

Аналогично можно попасть на эту страницу и с детальной страницы товара.

2. Связали товары с другими позициями по фильтру. Например, для обоев задали показать разные инструменты, клей и тому подобное.

3. Автоматизировали учет складских остатков. Для каждого торгового предложения необходимо вводить свой остаток на каждом складе. Но штатно модуль обмена суммирует остатки. Здесь мы реализовали запись значений нужного нам склада напрямую, минуя штатный функционал обмена, а при необходимости модуль суммирует складские остатки по каждому складу и выводит их как значение, актуальное для предложения в целом.

4. Создали автоматические стикеры «Новинка» и «Распродажа».

Мы используем вывод на главной виджета с выборкой популярных товаров.

Виджет имеет табы, соответствующие стикерам. Стикер «Новинка» автоматически устанавливается на товары, с момента загрузки которых прошло не более 30 дней. Раз в сутки cron-задание выполняет проверку соответствия этому условию. По истечении месячного срока с момента загрузки стикер автоматически удаляется, поэтому думать о его актуальность не приходится.

Аналогично, но чуть более сложнее обстоят дела с распродажей. Этот стикер присваивается товарам, участвующим в акциях. Для этого мы создаем акцию и связываем по фильтру акционные товары. В результате на все эти позиции автоматически проставляется стикер «Распродажа», и они помещаются в соответствующий блок на главной. Когда акция завершится и станет неактивной, исчезнет условие наличия стикера, и он автоматически уберется.

5. Настроено «Мегаменю» со ссылками на посадочные страницы с подборкам товаров, которые созданы через SEO умного фильтра. Это — максимально простое и эффективное решение одной из самых главных и трудоемких задач в любом интернет-магазине.

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

Готовую ссылку добавляем в «Мегаменю», которое обеспечивает быстрый доступ к таким подборкам.

6. А также настроили стандартные для интернет-магазинов стандартные решения по автоматизации, включая такие как:

• формирование списка просмотренных товаров;

• выгрузку в товарный фид;

• поиск по сайту.

В результате получился интернет-магазина с продуманной, оптимизированной для SEO и удобной для восприятия и навигации структура, легко выполняется подбор необходимых товаров с помощью «Мегаменю», фильтров и поиска. Все содержимое каталога меняется через интерфейс «1С:Управление торговлей», а синхронизация между сайтом и «1С» выполняется автоматически каждые сутки.