Ready-made modules for your markup

/docs/modulescurrentМашинный перевод с английского· проверено 2026-10-26

Статус: current · проверенный: 2026-10-26, время выполнения витрины и level-1 анализы на психику; каждый html Сниппет ниже проверяется TestModulesSnippetsSurviveLevel1 владелец: гладиатр API документация · Служить: GET /docs/modules связанный: /docs/own-markup, /docs/vz-keys, /docs/webcoding, /docs/forms, /docs/guide-family-cards

1.Как использовать это page

Модуль — это поведение платформы, которое вы прикрепляете к твой own разметка с помощью vz- key: Световой ящик, а product окно, а cart button. Ты копируешь фрагмент, переделываешь его с твоим CSS и не пиши поведение сам — платформа управляет им, держит Доступен и обновляется для всех.

Сниппеты работают в HTML документов и компонентов в level 1 и level 3. Уровень 2 (каркас в песочнице) не имеет ключей; откуда модуль может быть вызван из него, тот section показывает message публиковать.
Модули работают на витрина. The editor Канвас показывает разметку, но делает Не открывать окна или световые коробки.
Ключи перечислены в /docs/vz-keys (машина form /docs/vz-keys.json); разметка Правила (уровни, санитария), images) в /docs/own-markup. Никогда не изобретай key: ан unknown vz- атрибут удаляется.

Модуль	Ключи	Раздел
Лайтбокс	`vz-lightbox`, `vz-lightbox-item`	2
Продукт или group окно	`vz-modal`, `href="modal:…"`	3
Галерея продуктов с зумом	`vz-gallery` + `vz-lightbox`	4
Выборщик вариантов	`vz-variants`	5
Карта и фавориты	`vz-add-to-cart`, `vz-cart-count`, `vz-cart-open`, `vz-fav`, `vz-fav-count`	6
Поиск с предложениями	`vz-search`	7
Магазин menu	`vz-menu`	8
Твой own переключаться	`vz-toggle`	9
Ведущий form button	`href="form:<id>"`	10
Варианты чипов на плитке	`vz-panes`, `vz-pane`, `vz-pick`	11
Вступив в силу и live events	`vz-auth`, `vz-user-initial`, `vz:cart` …	12

2. Лайтбокс

Покупатель получает Видитель платформы: full-кадр экрана, миниатюра rail, стрелки и свайпы, клавиатура (Esc, ←/→), зум до 4х (пинч, колесо, двойной кран)), ленивая загрузка больших кадров, фокус вернулся к открывателю.

Копия: a photo сетка

Каждый <img> внутри vz-lightbox становится кадром; щелчок открывает на нем лайтбокс.

<div class="photos" vz-lightbox>
  <img src="/files/sofa-1.jpg" sizes="(min-width: 768px) 320px, 50vw" alt="Sofa, front">
  <img src="/files/sofa-2.jpg" sizes="(min-width: 768px) 320px, 50vw" alt="Sofa, side">
  <img src="/files/sofa-3.jpg" sizes="(min-width: 768px) 320px, 50vw" alt="Sofa, fabric">
</div>

Настройка sizes к вашей плитке width (/docs/own-markup §6: без него page грузоподъемность a full-width Для каждой плитки - шаг. Большая рама построена из оригинал file в 1024/1600/2560 — Ты не можешь link большой version. Фотография внутри а link (<a href="/catalog/sofa"><img></a>) или внутри него button с его own action (vz-add-to-cart, vz-fav, vz-modal …) Не является фреймом: клик остается их. Фотографии в а hidden узел (hidden, закрытая vz-pane) Не принимать участие. Для доступа к клавиатуре оберните кадры в ссылки, как в следующем рецепте — а plain <img> cannot Получить фокус.

Копия: явные рамки, большой file и captions

Марка фреймов с vz-lightbox-item Когда только некоторые pictures должны быть открыты, когда большой file отличается от миниатюры, или когда рама является link Это должно работать без JavaScript. The caption Приходит из ближайших <figcaption>, иначе из title.

<div vz-lightbox="thumbs=none&transition=fade">
  <figure>
    <a href="/files/room-big.jpg" vz-lightbox-item><img src="/files/room.jpg" alt="Living room"></a>
    <figcaption>Living room, oak finish</figcaption>
  </figure>
  <img src="/files/plan.jpg" vz-lightbox-item="/files/plan-big.jpg" title="Floor plan" alt="Plan">
  <img src="/files/logo.svg" alt="Brand">
</div>

Здесь логотип не является рамкой: как только существуют явные рамки, plain pictures из set Не участвуй. Один vz-lightbox-item вне любого set Открывается на его own. В петле, свяжите большой file: vz-lightbox-item="{{ i.zoom_url }}".

Скопируй это: video

<a href="/files/tour.mp4" vz-lightbox-item><img src="/files/tour-poster.jpg" alt="Tour"></a>

А. .mp4, .webm или .mov address открывается как video. В level 3 а. <video src poster vz-lightbox-item> тоже работает; level 1 Удалить <video>, так используют a link Как тот, что выше.

Настройки

The value из vz-lightbox, написанный как modal: query: key=value&key=value.

настройка	ценности	по умолчанию
`thumbs`	`rail` · `none`	`rail` (hidden для одного кадра или для video)
`transition`	`slide` · `fade`	`slide`
`layout`	`fit` · `coverflow`	`fit` (`coverflow` Показать затуманенные соседи)
`captions`	`1` · `0`	`1`

Все четыре сразу: vz-lightbox="thumbs=none&transition=fade&layout=coverflow&captions=0". Счетчик, стрелки, зум и фон везде одинаковы и не являются одинаковыми. Настраиваемый. unknown Для этого устанавливают ignored; Консоль браузера показывает vz-lightbox: Предупреждение (также в отношении live shop), Как это делается для родственника address.

Из аниме script (level 3)

document.querySelector('.open-gallery').addEventListener('click', () => {
  document.dispatchEvent(new CustomEvent('vz:lightbox-open', { detail: {
    start: 0,
    options: { thumbs: 'rail', transition: 'fade' },
    items: [
      { src: '/files/a.jpg', alt: 'Front', caption: 'Front' },
      { src: '/files/b.jpg', alt: 'Side' },
      { kind: 'video', src: '/files/tour.mp4', poster: '/files/tour.jpg' },
      { src: '/files/c.jpg', cta: { label: 'Request a call', href: 'form:12' } },
    ],
  } }))
})

Пункт fields: src (required), kind (image · video), alt, caption, poster (video), cta (label + href; щелчок закрывает лайтбокс first, так form: Popup открывается top). До 100 items; недействительный items есть skipped. Назови это от покупателя action: Звонок во время page load, before Внешнее время выполнения имеет Начало, потеряно.

Из аниме sandbox (level 2)

parent.postMessage({ type: 'vizen-lightbox-open', start: 0, items: [{ src: '/files/a.jpg' }] }, '*')

Тот же самый fields; Платформа принимает message Только от вашего own рама.

Правила и limits

Открыватель окон выигрывает. Узел с vz-modal, vz-quickview или href="modal:…" Открывает окно (section 3), не лайтбокс.
Адреса. Использовать absolute корень (/…) адреса в пределах key value и в тот link href. относительный path не переписывается сервером (level 3 проект files): Затем картина возвращается к своей own src, а link или video Без картинки не обрамление.
Файлы одного HTML проект (/_html/…), svg Иностранцы, как они, так и без изменения размера.
Внутри product быстро view, Светодиод открывается по всему page.

3. продукт или group Окно (быстро) view)

Покупатель получает тот live product page — или готовый design group — внутри shop's own окна, не покидая page.

<a href="/catalog/chair" vz-modal="modal:product:42?size=full">Chair</a>

<a href="modal:product:42">Chair</a>

<button type="button" vz-modal="modal:product:42?foot=1&nav=ids:42,43">Quick view</button>

Все, что нужно окну, ездит в одном modal: струна: size, header, footer, padding, CSS крюк, body group, соседи, variant. Таблица параметров и окно's поведение (клавиатура, открыватель внутри окна), CSS крючки рама) live в /docs/webcoding#14-3-modal-window-from-html-a-product-or-a-ready-design-group. vz-modal-size, vz-modal-tpl и подобные ключи не являются ключами — санитар удаляет Они. design group (modal:group:<id>) Также необходимо заявить в props.html.modalTargets из document.

Из аниме sandbox (level 2): parent.postMessage({ type: 'vizen-content-modal-open', href: 'modal:product:42' }, '*').

4. Галерея продуктов с зумом

Над product page: Для переключения больших рамок; с vz-lightbox на тот же корень, щелчок по большому кадру открывает лайтбокс на current изображение.

<div class="gallery" vz-gallery vz-lightbox>
  <img vz-gallery-main vz-src="product.preview_url" alt="{{ product.name }}">
  <div vz-gallery-thumbs>
    <img vz-for="i in product.gallery" vz-src="i.thumb_url" srcset="{{ i.thumb_srcset }}" sizes="64px" alt="">
  </div>
</div>

Светоотражающий блок берет свои рамки из миниатюр, в order. The selected Щелчок получает vz-state="active" — style Это ты сам. Галерея читает product.gallery Только: a empty Галерея ничего не рисует. sizes к твоему миниатюра width; image fields и их steps: /docs/own-markup §6. Чтобы это сказать накладка на product page Вместо платформенной галереи заменяйте page's blocks как бы /docs/webcoding#16-page-layers-your-markup-instead-of-someone-else-s-not-on-top-of-it (Безопасный рецепт для записи и возврата /docs/components §4.8).

5. Выборщик вариантов

Над product page Платформа передает size и цвет choices в узел и привязывает их к price, запас и cart. Это приводит к base style Вы отклоняетесь от твой own container.

<div class="my-variants" vz-variants></div>
<button vz-add-to-cart>Add to cart</button>

6. Карта и фавориты

<button vz-add-to-cart>Add to cart</button>
<button vz-fav>♡ Save</button>
<a href="/cart" vz-cart-open>Cart <span vz-cart-count></span></a>
<a href="/wishlist">♥ <span vz-fav-count></span></a>

Без него value Ключи действуют на product из page Почитание избранных variant. В одном feed плитка проходит id: vz-add-to-cart="{{ p.id }}", vz-fav="{{ p.id }}" (в group панацея — {{ m.id }}). Кнопки получают vz-state="adding", "in-cart", "in-fav" когда и after Действуй, счетчики empty при нулевом: [vz-cart-count]:empty{display:none}.

7.Поиск предложений

<div class="search" vz-search>Search products</div>

Сервер вставляет вход внутрь container; его text становится placeholder. Если покупатель, то тот же live Предложения как платформа header drop Войди, открой, results. Используйте container, не является <input>: level 1 Удалить author form контроль.

<nav class="menu" vz-menu>
  <a vz-for="m in menu" vz-href="m.url">{{ m.name }}</a>
</nav>

vz-menu приносить shop's section tree входить page data как menu; ты print Вложенные петли проходят три уровня глубоко (c in m.children). The current section получать aria-current от сервера — style a[aria-current].

9.Твоя. own переключатель: выпадающий, аккордеон, ящик

<button vz-toggle="#specs">Specifications</button>
<div id="specs" class="panel">…</div>
<style>.panel{display:none}.panel[vz-state="open"]{display:block}</style>

Клик-погружает vz-state="open" на target (а CSS селектор в том же document); без value Он переворачивает button Как "открыто" выглядит твоя CSS.

10. Ведущий form button

<a href="form:12">Request a call</a>

Открой. shop's свинец form 12 в платформе popup.Создание forms, предварительное заполнение и тот level 2 моста: /docs/forms. vz-lead Зарезервировано и ничего не делает — пользуйтесь тот form: link.

11. Вариантные чипы на product плитка

Одна плитка на product Семья: А size Цветной чип переключает всю плитку не покидая page; тот link Работает без JavaScript. Вставка нуждается в feed устанавливать "productsMode": "collapse" — Без него нет никакого p.members.

<article vz-for="p in products" vz-panes>
  <div vz-for="m in p.members" vz-pane="{{ m.id }}" vz-hidden="!m.selected">
    <a vz-href="m.url">{{ m.name }}</a>
    <div vz-for="ax in m.variants">
      <a vz-for="o in ax.options" vz-href="o.url" vz-pick="{{ o.member_id }}" aria-current="{{ o.current }}">{{ o.label }}</a>
    </div>
  </div>
</article>

The full учебный — feed settings, combo цены, выпуск и откат: /docs/guide-family-cards.

12. состояние регистрации и live events

<div class="account" vz-auth>
  <a class="login" href="/account">Sign in</a>
  <span class="avatar" vz-user-initial></span>
</div>
<style>.account[vz-state="out"] .avatar,.account[vz-state="in"] .login{display:none}</style>

Сценарии слушают вместо опросов: vz:navigate, vz:cart, vz:fav, vz:auth на document. Таблица live ключи и те event контракт: /docs/own-markup#4-0-live-data-without-your-own-script.

Исходник: https://api.vizen.shop/docs/modules?full=1

← НазадWeb coding guide: build a shop page with code Далее →Forms, leads and CRM boards