На этой странице
У BigCommerce нет такой строгой native-модели app-store, как у Shopify, а значит виджет рекомендации размера можно добавить не одним способом — и большинство неправильных способов ломаются только когда покупатель попадает на конкретную тему или устройство. Если сразу правильно разместить скрипт и настроить таргетинг страниц, это экономит неделю тикетов "почему не отображается на мобильном".
Продавцы BigCommerce находятся в необычном положении: платформа достаточно гибкая, чтобы разрешить прямое внедрение скрипта через Script Manager, но эта же гибкость означает, что виджет размеров может в итоге загружаться на каждой странице, блокировать рендер или дублироваться в разных вариациях темы Stencil, если настройка не продумана. Эта статья разбирает реальную механику — куда идёт скрипт, как ограничить его страницами товара и как убедиться, что он переживёт кастомизацию темы — вместо общей рекламы "установите наше приложение".
Почему интеграция с BigCommerce — это не просто "вставить тег скрипта"
Движок тем Stencil в BigCommerce рендерит страницы товаров из шаблонов Handlebars, и большинство магазинов со временем кастомизируют эти шаблоны — добавляют собственные поля, переставляют блок покупки или заменяют его секцией конструктора страниц. Виджет размеров, который предполагает фиксированную структуру DOM (например, всегда вставляется сразу после .productView-options), может незаметно не появиться на кастомизированной теме или появиться совсем не там.
Более безопасный подход — рассматривать виджет как две отдельные задачи: загрузка скрипта (один раз, глобально, асинхронно) и монтирование интерфейса виджета (только на страницах товара, с таргетингом на стабильный селектор или заданный контейнер). Смешивание этих двух вещей — самая частая причина того, что виджет "работал в демо-магазине", но сломался на реальной теме клиента.
Внедрение скрипта через Script Manager BigCommerce
Встроенный Script Manager BigCommerce (Storefront > Script Manager в панели управления) — рекомендуемый способ добавления сторонних скриптов: он создан именно для этого и позволяет избежать прямого редактирования файлов темы, а значит скрипт переживёт обновления темы.
Несколько практических настроек имеют значение:
| Настройка | Рекомендуемое значение | Почему |
|---|---|---|
| Расположение | Head или Footer | Footer не блокирует первую отрисовку |
| Метод загрузки | Async/defer | Не даёт скрипту виджета задерживать рендер страницы |
| Размещение на страницах | "Storefront pages", ограниченное страницами товара, или "All pages" с проверкой пути внутри скрипта | Не даёт JS виджета загружаться в корзине, на оформлении заказа, в блоге |
| Категория скрипта | Essential vs. Analytics | Essential гарантирует, что скрипт не будет заблокирован настройками управления согласием по умолчанию, рассчитанными на аналитические скрипты |
Если правила размещения по страницам в Script Manager недостаточно гибкие для структуры URL магазина, загружайте скрипт глобально, но отложите инициализацию проверкой во время выполнения — большинство SDK виджетов размеров предоставляют вызов init(), который можно обернуть в if (window.location.pathname.includes('/products/')) или в проверку объекта context.page_type BigCommerce, доступного в шаблонах Stencil.
Размещение виджета на странице товара
Большинство видимых сбоев происходит именно при размещении на странице товара. Темы BigCommerce Stencil (Cornerstone и её форки) обычно имеют согласованную структуру блока покупки, но "обычно" не значит "всегда" после того, как продавец установил кастомизацию темы.
Надёжно работают две стратегии размещения:
- Привязка к стабильному элементу, предоставленному темой. Темы на основе Cornerstone обычно сохраняют контейнер
.productView-optionsили.form-action-addToCart; вставка непосредственно перед кнопкой "Добавить в корзину" визуально привязывает виджет к решению о размере, не завися от точных отступов. - Использование выделенного placeholder-div. Для продавцов, готовых на небольшое редактирование шаблона, добавление пустого
<div id="size-widget-mount">вtemplates/components/products/product-view.html(или эквивалент в конструкторе страниц) даёт скрипту гарантированную стабильную цель независимо от будущих изменений темы. Это более надёжный вариант, если магазин планирует менять темы.
Избегайте стратегий селекторов, основанных на текстовом содержимом или позиции nth-child — обе ломаются, как только продавец переставляет блок покупки или добавляет блок опций подписки над ним.
Тестирование на разных темах и устройствах перед запуском
Скрипт, который корректно рендерится на демо-теме Cornerstone по умолчанию, не доказывает, что он работает на реальной теме продавца. Прежде чем считать интеграцию завершённой, проверьте на: реальной production-теме (не sandbox-теме), странице товара, отредактированной в конструкторе страниц, если продавец использует визуальный page builder BigCommerce, и хотя бы одном мобильном viewport, поскольку адаптивные брейкпоинты Stencil могут скрывать или сворачивать контейнер блока покупки, к которому привязан виджет.
Простой чек-лист перед запуском:
- Виджет появляется на обычном простом товаре.
- Виджет появляется на товаре с вариантами/опциями (виджеты размеров часто должны реагировать на выбор варианта).
- Виджет не появляется в корзине, на оформлении заказа или в блоге, если так ограничено.
- Нет ошибок в консоли при загрузке и нет сдвига макета, выталкивающего кнопку "Добавить в корзину" за пределы экрана на мобильном.
- Виджет по-прежнему рендерится после жёсткого обновления страницы и после клиентской навигации (Cornerstone от BigCommerce использует некоторые AJAX-механизмы корзины/быстрого просмотра, которые могут пропускать полную загрузку страницы).
Последний пункт выявляет удивительное количество багов — виджеты, инициализируемые только на DOMContentLoaded, могут исчезать после модального окна быстрого просмотра или смены варианта через AJAX, поскольку после этого полная загрузка страницы не срабатывает.
Где здесь место YourSizer
Скрипт YourSizer спроектирован так, чтобы его можно было добавить в Script Manager BigCommerce без редактирования файлов темы для большинства магазинов на базе Cornerstone, и он монтируется по настраиваемому селектору, поэтому продавцам с кастомизированными блоками покупки не приходится редактировать шаблоны. Для магазинов с сильно изменённой темой или макетом конструктора страниц мы поддерживаем описанный выше подход с placeholder-div, который сохраняет стабильное поведение монтирования при будущих изменениях темы. Логика подбора размера выполняется на стороне клиента и реагирует на выбор варианта, поэтому виджет остаётся синхронизированным, когда покупатель меняет цвет или стиль, а не срабатывает лишь один раз при первой загрузке — та же механика описана в статье как работает AI-примерка на диффузионных моделях применительно к тому, как движок рекомендаций считывает контекст товара и варианта.
Часто Задаваемые Вопросы
Замедляет ли добавление виджета размеров мой магазин на BigCommerce?
Может, если скрипт блокирует рендер или загружается синхронно в head. Загрузка асинхронно или с отложенным выполнением через Script Manager, а также ограничение только страницами товара, сводят влияние к минимуму — большинство хорошо реализованных виджетов размеров добавляют значительно меньше нескольких сотен миллисекунд и не затрагивают метрики Core Web Vitals, важные для SEO или конверсии, поскольку монтируются уже после того, как основной контент товара отрисован.
Будет ли виджет размеров работать со страницами товаров Page Builder в BigCommerce?
Да, но размещение требует небольшой корректировки. Page Builder позволяет продавцам визуально переставлять секции страницы товара, а значит виджет, привязанный к фиксированному CSS-селектору, может оказаться не в том месте или вообще не найти свою точку привязки. Подход с placeholder-div, при котором продавец размещает выделенный блок виджета прямо в макете Page Builder, — более устойчивый вариант для магазинов, активно использующих этот редактор.
Чем виджет размеров для BigCommerce отличается от установки приложения в Shopify?
BigCommerce не навязывает расширяемость исключительно через app-store так, как всё активнее делает модель theme-app-extension в Shopify, поэтому внедрение скрипта через Script Manager — это полностью поддерживаемый, штатный способ, а не обходной путь. Это даёт больше контроля над тем, где и когда именно загружается виджет, но также перекладывает больше ответственности на интегратора за корректное ограничение скрипта — модель app-block в Shopify часть этого ограничения берёт на себя автоматически.
Заключение
Успех или провал виджета рекомендации размера в BigCommerce зависит от деталей того, где загружается скрипт и куда он монтируется, а не от самой логики подбора размера. Правильно ограничьте внедрение скрипта через Script Manager, привяжите виджет к стабильной цели, а не к хрупкому селектору, и протестируйте на реальной теме продавца и мобильном viewport, прежде чем объявлять запуск — в результате получится виджет, который продолжает работать после следующего изменения темы, а не тот, который приходится чинить каждый квартал.