Витрина во внешних каналах

Все каналы лежат в одном месте: откройте витрину, зайдите в «Настройки витрины» и переключитесь на вкладку «Каналы». Они собраны в четыре группы: «Адрес витрины» (домен), «Каталог на чужих площадках» (товарный фид), «Витрина на чужих поверхностях» (код для вставки на сайт и Telegram) и «Измерение» (своя Яндекс.Метрика). Порядок не случайный — сначала адрес витрины, потом то, что на него ведёт. У каждой карточки справа стоит её состояние, поэтому что включено, видно с одного взгляда.

Фид — это файл со списком ваших товаров, который внешние площадки читают по ссылке и обновляют сами. Включается тумблером в карточке «Товарный фид (YML)». Сразу после включения ссылки ещё нет: платформа собирает файл, и на её месте написано «Собираем фид, обычно меньше минуты». Как только сборка закончится, поле с адресом и кнопка «Копировать» появятся сами — обновлять страницу не нужно.

• Под ссылкой видно, когда фид обновлялся, сколько в нём позиций и сколько он весит; варианты товара считаются отдельными позициями.
• Куда канал приведёт покупателя, написано один раз наверху вкладки — строкой «Все каналы ниже ведут покупателя на: …»: это ваш домен, если он привязан, иначе адрес витрины на merches.me.
• «Пересобрать сейчас» — принудительное обновление. Кнопка держится в состоянии «Пересобираем…», пока файл действительно не пересоберётся, а не пока платформа приняла запрос.
• «Сменить ссылку» — выпускает новый адрес и отзывает старый; платформа спросит подтверждение. После смены под ссылкой некоторое время висит напоминание проверить подключённые каналы.
• Если ассортимент упёрся в потолок — по числу позиций или по размеру файла, — появляется предупреждение «В фид вошли не все товары» и строка «Уехало N из M позиций» с тем лимитом, в который упёрлись. Лечится разделением: разнесите товары по нескольким витринам, у каждой свой фид, и каждый подключается в кабинете отдельно.
• Если в фид не вошло ни одной позиции, платформа называет самую массовую причину: в витрине вовсе нет товаров; нет готовых изображений; нет доступного к покупке размера или цвета; товары сняты с продажи или на паузе; товары не видны на платформе; товары не проходят по региону автора или по ограничению аккаунта. Рядом — ссылка «Посмотреть состав витрины».

Ниже — блок «Под какую площадку собирать» с двумя переключателями. Они настраивают САМ ФАЙЛ под требования площадки: набор полей и ограничения. Подключение платформа за вас не делает — ссылку в кабинет вставляете вы, и рядом с каждым переключателем перечислены шаги. Для ВКонтакте: «Управление сообществом», раздел «Товары» в базовом режиме, импорт из файла, вставьте ссылку на фид, тип кнопки — «Ссылка на товар». Для Яндекс Директа: раздел «Фиды», добавить фид по ссылке, дождаться первой загрузки.

В карточке фида, ниже адреса, появляется второй адрес — «Лента новинок (RSS)». Товарный фид автопостеры не читают: это каталог, а не лента записей, дат публикации в нём нет. Лента отвечает на другой вопрос — «что нового у продавца», — и её понимает бот, который сам публикует новинки в вашем Telegram-канале или сообществе ВКонтакте. Одна запись — один товар, а не вариант: иначе «Худи, Чёрный, XXL» рядом с «Худи, Белый, S» забили бы канал одним товаром. Сверху новые; дата записи — момент, когда товар попал на эту витрину. В записи идут название с ценой (со словом «от», если у вариантов цены разные), описание товара и картинка. В ленте держатся последние записи, а не весь каталог, и рядом с адресом написано, сколько их сейчас. Адрес появляется, только когда лента собрана, и живёт на том же ключе, что фид: «Сменить ссылку» меняет оба адреса сразу.

В карточке «Код для вставки на сайт» есть кнопка «Скопировать код» — это две строки: контейнер витрины с запасной ссылкой внутри и подключение скрипта. Вставьте их в любую страницу своего сайта или конструктора; в Tilda для этого подходит блок «HTML-код». Запасную ссылку скрипт не удаляет, а закрывает витриной — и только тогда, когда ему есть что нарисовать. Поэтому при отключённом JavaScript, на сайте со строгой политикой безопасности и у поисковых роботов на месте виджета остаётся рабочая ссылка на витрину, а не пустое место.

• Это не iframe: скрипт рисует карточки прямо в вёрстке вашей страницы, но в отдельной области со своим оформлением. Стили сайта внутрь не протекают, а оформление виджета не расползается по вашей странице: витрина выглядит так же, как на merches.me, и не подхватывает ваши шрифты и межбуквенные интервалы.
• Состав обновляется автоматически: добавили товар в витрину — он появился и на сайте.
• Карточки ведут ссылками на merches.me (или на ваш домен, если он привязан): покупатель оформляет и оплачивает заказ на платформе.
• Первой плиткой идёт обложка витрины, если она у вас загружена, — та же вертикальная картинка с описанием поверх, что открывает витрину на merches.me. Именно на ней играет видео-обложка, и по ней посетитель попадает в магазин целиком.
• Виджет показывает первую партию товаров и догружает следующие по мере прокрутки — так до конца витрины, не уходя с вашей страницы. Ссылка «Смотреть все →» стоит в ряду категорий, пока есть что догружать, и исчезает, когда показано всё. У варианта с iframe догрузки нет — там по замыслу не работают скрипты: в нём остаётся только первая партия, и «Смотреть все →» становится единственным продолжением. Сколько товаров в партию поместилось, сказано подписью под предпросмотром.
• Шапки и подвала в виджете нет: ни логотипа, ни названия витрины — на вашем сайте они уже свои. Вместо шапки идёт ряд категорий: слева «Все», дальше названия из каталога; ряд горизонтальный и прокручиваемый. Посетитель нажимает «Футболки» и видит только их, не уходя с вашей страницы: фильтр перебирает уже показанные карточки и ничего не перезагружает, а догрузились новые категории — они добавятся в ряд. Ряд появляется, только когда категорий больше одной: у витрины из одних футболок фильтровать нечего, и лишней строки на чужой странице не будет.
• Карточки ведут себя как на merches.me: при наведении картинка меняется на второй ракурс, а под ценой проявляется полоса размеров — размер кликабелен и открывает товар сразу на нём. Работает это там, где есть настоящий курсор и виджету отведено не меньше 1024 пикселей ширины. На телефоне и планшете второго ракурса нет вовсе — он даже не грузится, чтобы посетитель не платил за картинку, которую не увидит. Ширина меряется у самого виджета, а не у экрана: в узкой колонке широкого монитора он останется в мобильной раскладке.
• Если у витрины есть видео-обложка, в виджете она тоже играет — без звука и по кругу. Ролик начинает грузиться, только когда виджет реально попал на экран, поэтому посетители, не долиставшие до него, за видео не платят. В варианте с iframe для этого нужен атрибут allow="autoplay" — он уже стоит в готовом коде.

Ниже лежит второй вариант кода — на случай, когда сайт запрещает сторонние скрипты (типовая настройка Битрикса и корпоративных сайтов): там наш скрипт не запустится вовсе. Этот вариант вставляет витрину через iframe и работает вообще без скриптов; высоту в коде подберите под свою страницу.

Рядом с кодом стоит переключатель «Тема»: «Авто», «Светлая», «Тёмная». «Авто» — это не настройка системы посетителя, а замер: скрипт смотрит, какой фон у вашей страницы прямо под виджетом, и берёт тот из двух цветов текста, который на этом фоне читается; переключите тему сайта кнопкой — виджет поедет за ней, не дожидаясь перезагрузки. Выбирайте тему руками там, где замерять нечего или замер соврёт: фон задан картинкой или градиентом, блок стоит на тёмной секции светлого сайта. У варианта с iframe «Авто» означает светлую тему: внутри рамки скриптов нет и фон замерить нечем, а идти за настройкой системы посетителя нельзя — на светлом сайте это дало бы белый текст по белому. Переключатель меняет оба варианта кода сразу, поэтому копируйте код после того, как выбрали тему.

В самом низу карточки — живой предпросмотр: в рамку положена та же самая страница, что уедет на чужой сайт, а не её копия. Оговорок две. Рамка узкая, поэтому виджет показывает в ней мобильный вид — две колонки, без второго ракурса и размеров при наведении (они появляются, когда виджету отведено не меньше 1024 пикселей); рядом ссылка «откройте во всю ширину» — по ней виден настоящий широкий вид. И в рамке лежит вариант без скриптов, поэтому догрузки по прокрутке в предпросмотре не будет. Подпись под рамкой говорит, что именно попало: «В виджет попали все N товаров витрины» — либо «Виджет показывает первые N товаров и догружает следующие по мере прокрутки».

Свой домен или поддомен merches.me — тоже канал, и лежит он в той же вкладке «Каналы», первой карточкой. Это не просто красивый адрес: как только домен привязан, на него начинают вести ссылки во всех остальных каналах — товары в фиде, карточки виджета и превью в мессенджерах. Поэтому его настраивают первым.

В карточке «Telegram» есть готовая ссылка с кнопками «Скопировать ссылку» и «Открыть в Telegram». По ней витрина открывается прямо в мессенджере и выглядит как отдельный магазин; покупка, как и везде, происходит на merches.me.

Последняя группа вкладки — «Измерение», и это не канал показа: счётчик считает ваши страницы, а не отдаёт витрину наружу, поэтому работает при любой видимости витрины и пока в ней пусто. В поле «Номер счётчика» вводится номер из Яндекс.Метрики — просто число вида 12345678; пустое поле означает, что счётчик отключён. Считаются только страницы этой витрины: её главная, разделы, страницы товаров в её рамке и оформление заказа — остальная платформа в вашу статистику не попадает. При создании заказа в счётчик уходит цель merches_order_created: по ней Яндекс.Директ оптимизирует рекламу из вашего фида. Цель называется «заказ создан», а не «покупка», потому что оплату подтверждает банк уже после — считать её покупкой значило бы завысить конверсию и испортить себе ставки.