Шаблоны виджетов

Система шаблонов виджетов

Система шаблонов даёт вам полный контроль над тем, как на витрине вашего магазина отображаются варианты гарантии, товары в корзине, статус заказа и защита доставки. Для каждого из 12 типов виджетов можно задать собственный HTML-шаблон с переменными в стиле Handlebars и data-атрибутами для интерактивности.

---

Менеджер шаблонов

Менеджер шаблонов находится в разделе Панель управления → Виджеты → Шаблоны. В нём есть редактор кода Monaco с подсветкой синтаксиса и автодополнением, панель предпросмотра и описание переменных, доступных для каждого типа виджета.

---

Справочник data-атрибутов

Data-атрибуты связывают элементы шаблона с JavaScript-кодом виджета Umbrella.

Открытие модального окна

Атрибут	Описание
data-umbrella-modal-trigger	Открывает модальное окно по клику. Значение: "selector" или "info".
data-umbrella-modal-close-btn	Закрывает модальное окно по клику.

Выбор варианта гарантии

Атрибут	Описание
data-umbrella-options	Обязательный. Контейнер для элементов выбора вариантов.
data-umbrella-option	Обязательный. Отмечает отдельный вариант для выбора.
data-umbrella-option-price	Отображает цену варианта (обновляется при смене варианта товара).
data-umbrella-selected-state	Меняет видимость в зависимости от состояния выбора.
data-umbrella-selected-warranty-title	Показывает название выбранной гарантии.
data-umbrella-selected-warranty-price	Показывает цену выбранной гарантии. Используйте "rounded" или "withCents".

Действия с корзиной

Атрибут	Описание
data-umbrella-add-to-cart-btn	Обязателен в модальных окнах и корзине. Добавляет выбранную гарантию в корзину.
data-umbrella-decline-btn	Обязателен в модальных окнах и корзине. Отказ от гарантии.

Защита доставки

Атрибут	Описание
data-umbrella-shipping-protection-checkbox	Обязательный. Флажок для включения защиты доставки.
data-umbrella-shipping-protection-checkbox-label	Обязательный. Подпись к флажку.

Раскрывающиеся разделы

Атрибут	Описание
data-umbrella-expandable-section	Контейнер раскрывающегося раздела.
data-umbrella-expandable-content	Содержимое, которое показывается и скрывается.
data-umbrella-expandable-toggle	Кнопка, переключающая содержимое.

Аккордеон

Атрибут	Описание
data-umbrella-collapsible-accordion	Контейнер аккордеона.
data-umbrella-collapsible-item	Отдельный элемент аккордеона.
data-umbrella-collapsible-button	Кнопка переключения элемента.
data-umbrella-collapsible-content	Область содержимого элемента.

Выпадающее меню

Атрибут	Описание
data-umbrella-dropdown-menu	Контейнер выпадающего меню.
data-umbrella-dropdown-toggle	Открывает и закрывает выпадающее меню.
data-umbrella-dropdown-content	Панель содержимого выпадающего меню.
data-umbrella-dropdown-option-value	Значение каждого пункта выпадающего меню.
data-umbrella-dropdown-selected-value	Отображает выбранное значение.
data-umbrella-dropdown-unselected-placeholder	Заполнитель, когда ничего не выбрано.

---

Справочник переменных шаблона

Переменные используют синтаксис Handlebars: {{variable}} для текста, {{{variable}}} для содержимого с HTML (цены).

Товар

{{productImage}}, {{productName}}, {{productType}}, {{productHandle}}, {{productId}}, {{productQuantity}}, {{{productPrice}}}

Выбранный вариант

{{selectedVariantId}}, {{selectedVariantTitle}}, {{{selectedVariantPrice}}}

Гарантия

{{warrantyId}}, {{warrantyTitle}}, {{{warrantyDescription}}}, {{warrantyImage}}, {{warrantyProductHandle}}, {{warrantyProductUrl}}

Цикл по вариантам ({{#each options}})

{{serviceLevel}}, {{term}}, {{title}}, {{{description}}}, {{imageUrl}}, {{isNoCoverageOption}}, {{{priceRounded}}}, {{{priceWithCents}}}, {{{totalPrice}}}, {{variantId}}

Выбранная гарантия (корзина)

{{warrantyTerm}}, {{warrantyServiceLevel}}, {{{warrantyPrice}}}, {{{warrantyPriceRounded}}}, {{warrantyTermDisplay}}, {{warrantyVariantId}}

Флаги режима отображения

{{isInlineMode}}, {{isIndividualMode}}, {{isModalMode}}, {{{cheapestPrice}}}, {{{cheapestPriceRounded}}}

Контекст позиции

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Цены в корзине

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (а также варианты rounded и withCents)

Флаги покрытия

{{isEligible}}, {{coversManufacturerDefect}}, {{coversAccidentalDamage}}, {{coversWearAndTear}}, {{coversSpillOrStain}}, {{coversLostOrStolen}}

Полис (статус заказа)

{{policyId}}, {{policyNumber}}, {{policyStatus}}, {{policyStartDate}}, {{policyEndDate}}, {{isActive}}, {{claimWindowOpen}}, {{daysRemaining}}, {{orderName}}, {{fileClaimUrl}}

---

Переменные, доступные для каждого типа виджета

Тип виджета	Товар	Вариант	Гарантия	Варианты гарантии	Покрытие	Режим отображения	Позиция	Корзина	Полис
pdp_widget	Да	Да	Да	Да	Да	Да	—	—	—
selector_modal	Да	Да	Да	Да	Да	Частично	—	—	—
info_modal	Да	Да	Да	—	Да	—	—	—	—
cart_protected	Да	Да	Да	—	Да	—	Да	Да	—
cart_unprotected	Да	Да	Да	Да	Да	Да	—	Да	—
order_status	—	—	Да	—	Да	—	—	—	Да
order_status_modal	—	—	Да	—	Да	—	—	—	Да
order_status_post_purchase	—	—	Да	Да	Да	—	—	—	—
order_status_post_purchase_modal	—	—	Да	Да	Да	—	—	—	—
shipping_protection	—	—	Да	—	Да	—	—	—	—
shipping_protection_modal	—	—	Да	—	Да	—	—	—	—

---

Советы

• Используйте тройные фигурные скобки {{{price}}} для цен, чтобы HTML-сущности отображались корректно
• Всегда добавляйте data-umbrella-options и data-umbrella-option, иначе выбор вариантов не будет работать
• Проверяйте шаблон на разных вариантах товара, чтобы убедиться, что цены обновляются
• Используйте {{#if isInlineMode}} для макетов, зависящих от режима отображения
• Добавляйте data-umbrella-modal-close-btn в модальные окна

---

См. также

• Настройка виджетов — поведение виджетов и параметры отображения
• Расширение темы Shopify — виджет PDP через встраивание в тему
• Расширения оформления заказа Shopify — настройки расширений оформления заказа
• Расширения заказов Shopify — отображение виджета статуса заказа