aspekter/aspekter_ref/editor-svelte

Конструктор писем 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 стоит на месте, если используете сборку мужской/женской версии.