Header, menu, footer, layouts

1.Два пути — решить before писать

А. header или footer из законченного site движется как есть — vizen-transfer §3 Шаг 4; выбор ниже для создания одного.

⚠️ Самое дорогое упущение, которое мы измерили: а chrome group брать любой block, включая `kind:"html"` (Как это было kit.top/kit.bottom before Вот как это полностью custom header Агент провел зонд — Писать в a live shop — Чтобы узнать это, потому что ни один гид не сказал этого..

2.Как. chrome собирается

GROUP (a content block, group_type:"chrome")   props.widgets = [block ids]
   ↓ bound by
PUT /design/bindings/{resource_type}/{id}   { "slots": { "header": <group id> } }

Четыре slots сделать page — header · feed · body · footer — У каждого из них есть свой own Лестница: это resource → тот category chain → тот layout (§2а) → shop → Самый ранний group из этого label. resource_type это shop (id 0), category, category_children, product, article, плюс theme и system (§2а). category_children Наследует все поддеревья.

А. slot Есть три ответа, а не два: отсутствует на карте. = inherit, 0 = ничего здесь (Лестница останавливается — вот как header переключается off, Нет никакого флаг, а id = это group.

Прочти current государство first: GET /v1/storefronts/resolve?slug=<shop> → chrome, и GET /design/bindings/category/<id> → resolved с помощью source каждого из них slot.

⚠️ Построенные магазины before 2026-08-21 все еще работает на устаревшем комплекте — kind:"chromeKit" block в slot chrome, props.kit = {top:[…], bottom:[…]}. Он продолжает работать; писать groups для чего угодно new. Полный model: GET /docs/chrome §3.1–3.5.

2а. Склады и system pages

А. layout ("Лейа-Ат в admin, theme в API) Сидит над вертикалью chrome: а group-container group_type:"theme" чей "content" не является widgets но связывание — PUT /design/bindings/theme/{id} с header, feed, body, footer, плюс body за page kind (body_product, body_category, body_news, body_article). Который layout а page использования является его own Короткая лестница тот slot theme: это resource → тот category chain → тот shop → Самый ранний layout. Один звонок дает целое section его own design:

PUT /design/bindings/category/648   {"slots": {"theme": 1837}}   # a section
PUT /design/bindings/shop/0         {"slots": {"theme": 1837}}   # the whole shop

А. layout Также владеет папкой для совместного CSS, шрифты и favicon. Использовать vizen-own-markup §6.2 для загрузки и /docs/own-markup §7.2 для одного CSS/positioning поверхностный матрикс. /_site/<path> Решает вопрос shop's active layout на хозяина квартиры, а не на page-специфический layout.

Ан article это design resource слишком (2026-09-13):

PUT /design/bindings/article/<id>   {"slots": {"theme": 1837}}   # one article, another design

Лестница является the article → its rubric and the rubric's ancestors → the layout → the shop → the default — Рубрика Ветка является category, Обязательная, сделанная на Рубрика сама по себе дошла до своих статей. Прочитайте ее обратно с помощью article: GET /articles/by-slug/{slug} Ответы с помощью design (тот admin GET /articles/{id} never решать design). body_article оставаться в slot из layout, не из этого article — Просить его на article ответы DESIGN_SLOT_NOT_FOR_RESOURCE.

Система pages — cart, checkout, account, orders, Список желаний, поиск, сделки, приборная панель, купоны, не найдено, thankyou, compare — есть design ресурсов: resource_type:"system", resource_id из реестра cart=1 · checkout=2 · account=3 · orders=4 · wishlist=5 · search=6 · deals=7 · dashboard=8 · coupons=9 · notfound=10 · thankyou=11 · compare=12, slots theme|header|footer (только у них есть свой собственный магазин) body). Несвязанные, они inherit тот shop's layout и chrome:

PUT /design/bindings/system/1  {"slots": {"header": 1975}}   # 1 = cart
GET /design/system/cart?company_id=<N>                        # what actually applies

⚠️ В охраняемых зонах (/cart, /checkout, /account, /wishlist, /orders, /coupons, /deals, /dashboard) ан author-принадлежащий (level 3) header рендеринг Без своих сценариев и без его относительного <link rel="stylesheet"> (измеренных 2026-09-12, и layout's code - Не работает вообще., рядный <style> и layout папка's Стиль листа Stay — keep тот header's CSS там и never Обещать owner а script в cart.

2б. chrome Что меняется на сервере — что меняется для вас

С 2026-09-13 header, menu и footer печатаются сервером; только кусочки, которые на самом деле щелкают судном JavaScript (Поиск и бургер Toggles, тот level-Два последствия, и ни один из них не является new rule следовать:

• тот menu's level-2 панели прибывают в HTML, закрытый (data-open="0"), в пределах бюджета узла — 60 nodes Корень, панель которого не Для того чтобы нагрузить его на first щелкнуть GET /categories?view=menu, Один запрос На вкладке, совместно с предложением поиска. after короткий В огромном каталоге есть нормальный, Не является дефектом для сообщения;
• Ничто из этого не касается вашего own header. Бюджет и хостинг принадлежат к платформе siteMenu widget. Ваша наценка в chrome group напечатано целым, в точности как before, и active menu item Теперь вычисляется из запросить path на сервере вместо after гидратация — появляется выделение немедленно.

3. Рецепт: а custom header на одном section только

1. publish Разметка как папка: node backend-3D/tools/html-transfer/transfer.mjs ./header --name "Header" (нет --page — а chrome widget не установлен на page; Командование создает тот level-3 document, публикует выпуск и печатает document id);
2. Завернуть в A block, kind: "html";
3. создавать два groups (group_type: "chrome", props.widgets: [<block id>]) — Один для header, Один для footer;
4. PUT /design/bindings/category/<id> с {"slots": {"header": <header group>, "footer": <footer group>}}.

Остальная часть shop Проверь, что у него было: открой дом. page и Подтвердить его data-vz-kit Показаны оригинальные id. Наденьте одну и ту же пару тот layout вместо (/design/bindings/theme/<id>) И каждый их них дарит. page это layout ↑ «Вот в чем разница между этим» section" и "это design".

4. Слепые заголовки.

vz-sticky на корневом узле вашей разметки делает block Два пути в жизни, Оба приземляются в одном и том же месте.:

• own разметка — vz-sticky На корневой узле;
• любой block — props.position: "sticky", с props.stickyTop в пк когда Что-то выше уже есть sticky.

В любом случае платформа применяет его к block wrapper, который является единственным Узел с местом для путешествий: а sticky элемент, помещенный внутрь block cannot move, Потому что его родитель точно такой же высокий, как и его мать. block.

Использовать sticky для header перед выбором вида на порт-fixed наложение, читать /docs/own-markup §7.2: chrome Держит отдельно query container, и фактически fixed натяжение зависит от CSS containment/transform и браузер.

⚠️ Два пути в этом не Везде взаимозаменяемы. props.position и vz-sticky Оба работают для любого block в page zone или chrome Костюм — это то, что custom-header Они делают. не Работа на платформе siteHeader / siteMenu / siteFooter, чей оркестр wrapper never Жеребьевка: The header использование его own props.sticky: true, и menu и footer У меня нет переключателя. столик по поверхности: GET /docs/own-markup §5.7.

⚠️ props.overflow: "clip" Сломает липкость для всего внутри block — Отсеченный предок не является свитком container тот sticky элемент может прилипать. Сдержанный и clip взаимоисключающие; выберите один на block.

4а. Сохраняя widget И все равно перезагрузить

Прежде чем заменить header с own Проверить, является ли третья path это достаточно: props.wrapperClass ставить твой class На полосе siteHeader, siteMenu или siteFooter, И вы отождествляете это с вашим own CSS. The widget Сохраняет свои live data, Его остров поисков и его cart только контрафакт; look изменения.

{ "kind": "siteHeader", "props": { "wrapperClass": "shop-hdr", "sticky": true } }

.shop-hdr             { background: #0b0b12; border: 0 }
.shop-hdr > .vz-inner { max-width: none; padding-inline: 40px }

The wrapper's CSS должен находиться вне а level-1 теневой корень. own wrapper class ограничение переопределения; устойчивые названия не делают глобальный рестайлинг безопасным;. канонический CSS/availability матрица: /docs/own-markup §§5.5,7.2.

5. Замена пакета product card

Построить product group чей props.widgets Список - это ваш widgets — твой card, breadcrumbs, Что бы ни было в вашем order — и привязывают его к slot body:

PUT /design/bindings/category_children/<id>   {"slots": {"body": <group id>}}
# one product only: PUT /design/bindings/product/<id>

category_children И каждый из них product Ветви, не прикасаясь к одиночный product Запись. body Один из них group и page Собирается на Сервер, так Нет двух не бывает-cards Проблема любой more: а card с явно выраженным card.productId Это рисует product где угодно, а card Без одного взять page's product.

⚠️ Рецепт для пенсионеров, не используйте его. Старые заметки говорят, чтобы очистить refs: [] в каждом product's __page:top Чтобы удалить второй card. Под этим group model Это делает Ничего не исправлять — это стирает page's own blocks: __page:top / __page:bottom Это они. blocks тот owner наносить before и after наследуемый body в page editor (/docs/components §4.7.1). hideSystemBlock Ответ тоже не является: Скрывает всю техническую layer, В том числе и ваш own связанный card.

6.Проверить

• Домой page нетронутым sections Показать оригинал data-vz-kit;
• твой section показывает new один;
• тот menu Открыть (по клику) и header удерживается на нескольких ширинах;
• а product page У него точно один card.

Полный контрольный список: vizen-troubleshoot.

Для строителя groups, Сохранение согласованных ссылок и автор version: /docs/chrome §3.1 Повторное использование active theme's container class (§3.7 Там). Замена а category сетка через токен, включая откат, имеет один рецепт: /docs/components §4.8.