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
75 lines
5.8 KiB
Markdown
75 lines
5.8 KiB
Markdown
# Конструктор писем VipAvenue (Svelte)
|
||
|
||
Подробная инструкция по использованию редактора для сборки Pug-кода писем.
|
||
|
||
## Запуск проекта
|
||
1. Установите зависимости: `npm install`
|
||
2. Запустите dev-сервер: `npm run dev`
|
||
3. Откройте ссылку из терминала (обычно `http://localhost:5173`)
|
||
|
||
## Сохранение в email-gen
|
||
Для записи `let.pug` и `html.pug` нужен локальный сервер. Автосохранение работает только для `html.pug`, а `let.pug` сохраняется кнопкой «Сохранить».
|
||
|
||
### Сборка и запуск
|
||
1. Соберите фронт: `npm run build`
|
||
2. Запустите сервер: `npm run serve`
|
||
3. Откройте интерфейс: `http://localhost:4173`
|
||
|
||
### Переменные окружения
|
||
- `EMAIL_GEN_ROOT` — путь к корню `email-gen`
|
||
- `EMAIL_GEN_PROJECT` — имя проекта (по умолчанию `vipavenue`)
|
||
- `EMAIL_GEN_HTML_PATH` — путь к `html.pug` внутри `email-gen` (опционально)
|
||
- `EMAIL_GEN_LETTERS_DIR` — путь к папке `letters` внутри `email-gen` (опционально)
|
||
- `EMAIL_GEN_PUBLIC_INDEX` — путь к `public/index.html` (опционально)
|
||
- `PORT` — порт сервера (по умолчанию `4173`)
|
||
|
||
Кнопка `HTML` в конструкторе копирует содержимое `public/index.html` через `/api/html`.
|
||
|
||
### Dev-режим (опционально)
|
||
Если запускаете `npm run dev`, укажите `VITE_API_BASE=http://localhost:4173`,
|
||
чтобы кнопка сохранения обращалась к backend.
|
||
|
||
## Общие элементы
|
||
- **Тёмная тема** — переключатель в топбаре. Сохраняется в `localStorage`.
|
||
- **Папка изображений** — глобальный префикс для всех картинок. В блоках указывается только имя файла и расширение.
|
||
- **Цены в товарах** — один глобальный флажок. Управляет всеми товарными блоками (включая «3 товара + картинка»).
|
||
- **Собрать мужское / Собрать женское** — переставляет сегменты относительно разделителя (`dividerVA`), сохраняя общие блоки до и после.
|
||
- **Сохранить как пресет** — сохраняет текущее состояние блоков и настроек.
|
||
- **Сбросить** — очищает блоки и Pug.
|
||
|
||
## Работа с блоками
|
||
- Добавляйте блок через выпадающий список «Тип блока».
|
||
- Каждый блок имеет сегмент: **O** (общий), **Ж**, **М**. Сегментный бейдж меняется при клике.
|
||
- Перетаскивайте блоки за «ручку» или кнопками ↑/↓.
|
||
- Параметры блока сразу попадают в Pug (панель справа).
|
||
- Кнопки «Скопировать код» / «Экспорт .pug» работают сверху и снизу панели кода.
|
||
|
||
### Сегменты и сборка версий
|
||
- Общие блоки **до** разделителя `dividerVA` всегда остаются сверху.
|
||
- При сборке **мужской** версии: сегмент М становится над разделителем, Ж — под ним; общие блоки вокруг разделителя остаются на месте.
|
||
- При возвращении на **женскую** версию порядок восстанавливается.
|
||
|
||
## Пресеты
|
||
- Вкладка «Пресеты»: Новинки, Акция, Новые коллекции, Мои пресеты.
|
||
- Для Новинок/Акции/Новых коллекций введите женские и мужские ID (до 16), при необходимости цены.
|
||
- Кнопки «Женская версия» / «Мужская версия» создают набор блоков и переходят в конструктор.
|
||
- «Мои пресеты» — сохранённые состояния конструктора. Доступны загрузка/удаление.
|
||
|
||
## Поля и картинки
|
||
- В блоках с картинками указывайте только имя файла и расширение; базовый путь — в «Папка изображений».
|
||
- Расширение по умолчанию: `.png`.
|
||
|
||
## Хранение данных
|
||
- `localStorage` ключи:
|
||
- `vip_letter_editor_blocks_v1`
|
||
- `vip_letter_editor_settings_v1` (включая `imageBaseUrl`, `showPrices`, тема)
|
||
- `vip_letter_editor_theme`
|
||
- `vip_letter_editor_custom_presets_v1`
|
||
|
||
## Частые действия
|
||
- **Показать превью HTML для текстового блока** — чекбокс внутри текстового блока (если нужен рендер HTML).
|
||
- **Убрать отступ после блока** — флажок внутри блока.
|
||
- **Ширина/высота, отступы** — в доп. настройках (кнопка «Доп. настройки» там, где она есть).
|
||
|
||
Если что-то пошло не так: проверьте, что глобальный флажок цен включён/выключен как нужно, и убедитесь, что разделитель `dividerVA` стоит на месте, если используете сборку мужской/женской версии.
|