═══════════════════════════════════════════════════════════════ ИНСТРУКЦИЯ ПО УСТАНОВКЕ СКРИПТА ТАЙМЕРА АКЦИИ ═══════════════════════════════════════════════════════════════ ДЕМО СТРАНИЦА И ФАЙЛЫ ─────────────────────────────────────────────────────────────── Демо страница: https://embedlab.ru/scripts/timer/demo.html Файлы для скачивания: - JavaScript: https://embedlab.ru/scripts/timer/promo-timer.js - CSS: https://embedlab.ru/scripts/timer/promo-timer.css Скачайте эти файлы и разместите их на своем сайте согласно инструкции ниже. УНИВЕРСАЛЬНАЯ УСТАНОВКА ДЛЯ ЛЮБОЙ СИСТЕМЫ УПРАВЛЕНИЯ САЙТОМ ═══════════════════════════════════════════════════════════════ ШАГ 1: СКАЧИВАНИЕ И ЗАГРУЗКА ФАЙЛОВ НА СЕРВЕР ─────────────────────────────────────────────────────────────── 1. Скачайте файлы скрипта: - JavaScript: https://embedlab.ru/scripts/timer/promo-timer.js - CSS: https://embedlab.ru/scripts/timer/promo-timer.css Сохраните файлы на свой компьютер. 2. Подключитесь к вашему сайту через FTP-клиент (FileZilla, WinSCP и т.д.) или используйте файловый менеджер вашей панели управления (cPanel, ISPmanager и т.д.) 3. Перейдите в корневую директорию вашего сайта (обычно это папка public_html, www, htdocs или html) 4. Загрузите скачанные файлы в корень сайта: - promo-timer.css - promo-timer.js ВАЖНО: Файлы должны быть в корне сайта, чтобы к ним был доступ по адресам: https://ваш-сайт.ru/promo-timer.css https://ваш-сайт.ru/promo-timer.js ШАГ 2: ВСТАВКА КОДА НА САЙТ ─────────────────────────────────────────────────────────────── СПОСОБ 1: Для WordPress ──────────────────────── 1. Перейдите в админ-панель WordPress 2. Внешний вид → Редактор тем → header.php ИЛИ используйте плагин для вставки кода (например, "Insert Headers and Footers") 3. Вставьте следующий код перед закрывающим тегом : 4. Вставьте код инициализации перед закрывающим тегом : ВАЖНО: Если файлы в корне, используйте: СПОСОБ 2: Для Joomla ───────────────────── 1. Перейдите в админ-панель Joomla 2. Расширения → Шаблоны → Ваш шаблон → Изменить файлы 3. Откройте файл index.php или создайте файл custom.php 4. Вставьте код в секцию : 5. Вставьте код инициализации перед : СПОСОБ 3: Для 1С-Битрикс ───────────────────────── 1. Перейдите в админ-панель Битрикс 2. Контент → Файлы и папки → header.php (или footer.php) 3. Вставьте код подключения в header.php: 4. Вставьте код инициализации в footer.php перед : СПОСОБ 4: Для обычного HTML сайта ─────────────────────────────────── 1. Откройте файл index.html (или любой другой HTML файл) 2. В секции вставьте: 3. Перед закрывающим тегом вставьте: СПОСОБ 5: Через Google Tag Manager ──────────────────────────────────── 1. Перейдите в Google Tag Manager 2. Создайте новый тег типа "Пользовательский HTML" 3. Вставьте полный код: 4. Настройте триггер: "Все страницы" или нужные вам страницы СПОСОБ 6: Через плагин для вставки кода (универсальный) ───────────────────────────────────────────────────────── Для WordPress: плагин "Insert Headers and Footers" Для Joomla: плагин "Custom HTML Module" Для других CMS: найдите аналогичные плагины 1. Установите плагин 2. Вставьте код подключения в секцию HEAD 3. Вставьте код инициализации в секцию FOOTER ШАГ 3: НАСТРОЙКА ПАРАМЕТРОВ ─────────────────────────────────────────────────────────────── Измените параметры в функции initPromoTimer() под ваши нужды: ОБЯЗАТЕЛЬНЫЕ ПАРАМЕТРЫ: ─────────────────────── - text: 'Текст вашей акции' - Текст, который будет отображаться - endDate: '2026-02-01 23:59:59' - Дата и время окончания акции (формат: 'ГГГГ-ММ-ДД ЧЧ:мм:сс') ОСНОВНЫЕ ПАРАМЕТРЫ: ─────────────────── - backgroundColor: '#ff6b6b' - Цвет полоски (hex код) - buttonText: 'Участвовать' - Текст на кнопке - buttonLink: 'https://ваш-сайт.ru' - Ссылка при нажатии на кнопку - showButton: true - Показывать кнопку (true/false) - buttonColor: '#ffffff' - Цвет кнопки - buttonTextColor: '#333333' - Цвет текста кнопки ДОПОЛНИТЕЛЬНЫЕ ПАРАМЕТРЫ: ───────────────────────── - startDate: null - Дата начала (null = начать сразу) - onComplete: 'hide' - Действие после завершения: 'hide' - скрыть 'show_message' - показать сообщение 'redirect' - редирект на другую страницу - completeMessage: 'Акция завершена' - Сообщение (если onComplete = 'show_message') - redirectUrl: '' - URL для редиректа (если onComplete = 'redirect') - buttonLinkNewTab: true - Открывать ссылку в новой вкладке - showCloseButton: true - Показывать крестик для закрытия - saveCloseState: true - Сохранять состояние закрытия - showOnceAfterClose: false - Показывать только один раз после закрытия ПРИМЕРЫ НАСТРОЕК: ───────────────── Пример 1: Простая акция ─────────────────────── Пример 2: Акция с кастомными цветами ───────────────────────────────────── Пример 3: Без кнопки, только таймер ──────────────────────────────────── Пример 4: С редиректом после завершения ──────────────────────────────────────── ШАГ 4: ПРОВЕРКА РАБОТЫ ─────────────────────────────────────────────────────────────── Перед установкой на свой сайт вы можете посмотреть демо-страницу: https://embedlab.ru/scripts/timer/demo.html После установки на ваш сайт: 1. Откройте ваш сайт в браузере 2. Проверьте, что полоска с таймером отображается вверху страницы 3. Проверьте работу кнопки закрытия (крестик) 4. Проверьте работу кнопки акции (переход по ссылке) 5. Проверьте отображение на мобильных устройствах РЕШЕНИЕ ПРОБЛЕМ: ───────────────── Проблема: Полоска не отображается ────────────────────────────────── ✓ Проверьте, что файлы promo-timer.css и promo-timer.js загружены в корень сайта ✓ Проверьте пути к файлам в коде (должны быть /promo-timer.css и /promo-timer.js) ✓ Откройте консоль браузера (F12) и проверьте наличие ошибок ✓ Убедитесь, что код инициализации выполняется после загрузки DOM Проблема: Таймер не работает ───────────────────────────── ✓ Проверьте формат даты endDate: 'ГГГГ-ММ-ДД ЧЧ:мм:сс' ✓ Убедитесь, что дата окончания в будущем ✓ Проверьте консоль браузера на наличие ошибок JavaScript Проблема: Стили конфликтуют с сайтом ───────────────────────────────────── ✓ Все стили имеют уникальный префикс promo-timer-, конфликты маловероятны ✓ Если есть конфликты, можно добавить !important к нужным стилям в promo-timer.css Проблема: Полоска не закрывается ───────────────────────────────── ✓ Проверьте, что showCloseButton: true ✓ Проверьте консоль браузера на ошибки ✓ Попробуйте очистить localStorage браузера ТЕХНИЧЕСКАЯ ПОДДЕРЖКА: ─────────────────────── Если у вас возникли проблемы: 1. Проверьте консоль браузера (F12 → Console) 2. Убедитесь, что все файлы загружены правильно 3. Проверьте, что код инициализации выполняется 4. Убедитесь, что даты указаны в правильном формате ВАЖНЫЕ ЗАМЕЧАНИЯ: ────────────────── 1. Файлы должны быть доступны по прямым ссылкам 2. Дата должна быть в формате: 'ГГГГ-ММ-ДД ЧЧ:мм:сс' 3. Все пути к файлам должны быть правильными 4. Код инициализации должен выполняться после загрузки DOM 5. Скрипт использует localStorage для сохранения состояния закрытия ═══════════════════════════════════════════════════════════════ Успешной установки! ═══════════════════════════════════════════════════════════════