s.zotov
718821fdd6
- z51-pug-builder: Svelte 5 SPA, визуальный редактор Pug-писем - email-gen: Node.js рендерер Pug→HTML через email-templates + Juice - email-gen-api: HTTP сервер рендеринга (порт 8787) - coin-scout: сервис подбора монет из фидов - Docker Compose для dev/prod - Nginx конфиг с SSL для app.aspekter.ru
150 lines
9.5 KiB
HTML
150 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Инструкция по конструктору писем VipAvenue</title>
|
||
<style>
|
||
body {
|
||
margin: 24px;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background: #0f1115;
|
||
color: #e5e5e5;
|
||
line-height: 1.6;
|
||
}
|
||
h1, h2, h3 {
|
||
color: #dcdcaa;
|
||
margin-top: 1.2em;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
a { color: #9abcf9; }
|
||
code { background: #1e1e1e; padding: 2px 4px; border-radius: 4px; }
|
||
pre { background: #1e1e1e; padding: 12px; border-radius: 6px; overflow-x: auto; }
|
||
ul { margin: 0.4em 0 0.8em 1.4em; }
|
||
.section { margin-bottom: 1.6em; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Конструктор писем VipAvenue (Svelte)</h1>
|
||
<p>Максимально подробная инструкция: запуск, глобальные настройки, блоки, сегменты, пресеты, экспорт и хранение.</p>
|
||
|
||
<div class="section">
|
||
<h2>1. Запуск и окружение</h2>
|
||
<ol>
|
||
<li><code>npm install</code> — установка зависимостей.</li>
|
||
<li><code>npm run dev</code> — запуск dev-сервера.</li>
|
||
<li>Открыть адрес из терминала (обычно <code>http://localhost:5173</code>).</li>
|
||
</ol>
|
||
<p>Все состояния (блоки, настройки, тема, кастомные пресеты) хранятся в <code>localStorage</code>.</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>2. Макет интерфейса</h2>
|
||
<ul>
|
||
<li><strong>Топбар</strong>: переключатель темы (тёмная/светлая, сохраняется).</li>
|
||
<li><strong>Левая колонка — Конструктор</strong>:
|
||
<ul>
|
||
<li>Папка изображений — глобальный префикс URL.</li>
|
||
<li>Цены в товарах — общий флажок для всех товарных блоков.</li>
|
||
<li>Тип блока — добавление нового блока.</li>
|
||
<li>Собрать мужское / Собрать женское — обмен сегментов относительно разделителя.</li>
|
||
<li>Сохранить как пресет — сохраняет текущее состояние (блоки + настройки).</li>
|
||
<li>Сбросить — удаляет все блоки и код.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Левая колонка — Пресеты</strong>: Новинки, Акция, Новые коллекции, Мои пресеты.</li>
|
||
<li><strong>Правая колонка</strong>: живой Pug-код, кнопки копирования/экспорта (дублируются сверху и снизу).</li>
|
||
<li><strong>Футер</strong>: цитата и ссылка на инструкцию.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>3. Блоки и сегменты</h2>
|
||
<ul>
|
||
<li>Сегменты: <strong>O</strong> — общий, <strong>Ж</strong> — женский, <strong>М</strong> — мужской. Меняются кликом по бейджу в заголовке.</li>
|
||
<li>Перетаскивание: за «ручку» или кнопки ↑/↓.</li>
|
||
<li>Все поля блока моментально обновляют Pug справа.</li>
|
||
<li>Опция «Убрать отступ после блока» позволяет стыковать плотнее.</li>
|
||
<li>Глобальный флажок «Цены в товарах» управляет всеми товарными блоками, включая «3 товара + картинка».</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>4. Сборка женской/мужской версии</h2>
|
||
<ul>
|
||
<li><code>dividerVA</code> — центр обмена сегментов.</li>
|
||
<li>Общие блоки до/после разделителя остаются на местах.</li>
|
||
<li>При «Собрать мужское» блоки М поднимаются над разделителем, блоки Ж опускаются под него.</li>
|
||
<li>При «Собрать женское» порядок возвращается (запоминается при переключении на мужскую).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>5. Перечень блоков</h2>
|
||
<ul>
|
||
<li><strong>Заголовки/текст</strong>: АКТУАЛЬНЫЙ заголовок, Текстовый блок (поддержка <code><br></code>, <code> </code>, <code>—</code>, жирный через <code><span style="font-weight:700;"></code>). Есть HTML-превью.</li>
|
||
<li><strong>Кнопки</strong>: одиночная, двойная, тройная. Настройки ширины/высоты/цветов/шрифта/отступов.</li>
|
||
<li><strong>Баннеры</strong>: с ссылкой/без, 2/3 баннера (с/без текста). Имя файла + расширение, префикс берётся из «Папка изображений».</li>
|
||
<li><strong>Товары</strong>:
|
||
<ul>
|
||
<li>4 в ряд, 3 в ряд.</li>
|
||
<li>Товары + картинка слева/справа; 3 товара + картинка слева/справа.</li>
|
||
<li>Цены регулируются глобальным флажком.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Текст + картинка</strong>: картинка слева/справа, кнопка под текстом.</li>
|
||
<li><strong>Сервис</strong>: Отступ, Разделитель (<code>dividerVA</code>), Размерная сетка, Промокод.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>6. Картинки</h2>
|
||
<ul>
|
||
<li>Заполните «Папка изображений» (например, <code>https://email-files.vipavenue.ru/newsletter_2025/2025_12_07/</code>).</li>
|
||
<li>В блоках — только имя файла и расширение (<code>.png</code> по умолчанию). При необходимости есть поля расширения и прямой URL (fallback).</li>
|
||
<li>URL собирается автоматически: префикс + имя файла + расширение.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>7. Пресеты</h2>
|
||
<ul>
|
||
<li><strong>Новинки</strong>: 16 женских + 16 мужских ID, заголовок, подзаголовок, кнопки, ссылки размерных сеток, кнопки «Больше новинок». Цены — глобальным флажком.</li>
|
||
<li><strong>Акция</strong>: баннер, два блока товаров (жен/муж), разделитель, кнопки «Подборка для неё/него».</li>
|
||
<li><strong>Новые коллекции</strong>: похожий набор с отдельными текстами/ссылками/баннером.</li>
|
||
<li><strong>Мои пресеты</strong>: сохранённые состояния конструктора (блоки + настройки). Доступны загрузка/удаление.</li>
|
||
<li>Кнопки «Женская версия» / «Мужская версия» применяют пресет и возвращают на вкладку Конструктор.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>8. Экспорт Pug</h2>
|
||
<ul>
|
||
<li>Поле справа всегда содержит актуальный Pug.</li>
|
||
<li>«Скопировать код» — в буфер; «Экспорт .pug» — скачивает файл <code>letter.pug</code>.</li>
|
||
<li>Кнопки копирования/экспорта продублированы сверху и снизу панели кода.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>9. Хранение данных (localStorage)</h2>
|
||
<ul>
|
||
<li><code>vip_letter_editor_blocks_v1</code> — блоки.</li>
|
||
<li><code>vip_letter_editor_settings_v1</code> — настройки (включая <code>imageBaseUrl</code>, <code>showPrices</code>).</li>
|
||
<li><code>vip_letter_editor_theme</code> — тема.</li>
|
||
<li><code>vip_letter_editor_custom_presets_v1</code> — пользовательские пресеты.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>10. Практические советы</h2>
|
||
<ul>
|
||
<li>Следите, чтобы <code>dividerVA</code> стоял на месте, если используете сборку мужской/женской версии.</li>
|
||
<li>После «Собрать мужское» вернуться на женскую можно той же кнопкой (текст меняется).</li>
|
||
<li>Для плотного стыка блоков снимайте «Отступ после блока».</li>
|
||
<li>В текстовых блоках включайте HTML-превью, если хотите увидеть рендер <code><br></code>/<code> </code>/<code>—</code> и жирного текста.</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|