Каким образом можно добавить всплывающее окно на сайт, используя систему управления сайтом 1С-Битрикс?

Каким образом можно создать всплывающее окно с баннером на всех страницах детальных карточек товаров из конкретного раздела каталога? Пожалуйста, распишите по шагам, что нужно сделать.
  • 29 сентября 2023 г. 0:17
Ответы на вопрос 2
1. Подготовьте изображение для баннера, которое будет отображаться во всплывающем окне. Рекомендуется использовать изображение с прозрачным фоном и размерами, соответствующими дизайну сайта.

2. В системе управления сайтом 1С-Битрикс зайдите в раздел "Настройки", выберите "Технические настройки" и найдите пункт "Код в верхний слой сайта". В этом поле можно добавить JavaScript-код, который будет вызывать всплывающее окно.

3. Вставьте следующий JavaScript-код в поле "Код в верхний слой сайта":
```javascript
<script>
    $(document).ready(function() {
        // Проверяем, находимся ли мы на странице детальной карточки товара из конкретного раздела каталога
        if (BX.type.isFunction(window.BX.CatalogElement) && $('.product-detail').length && $('.product-detail[data-category="YOUR_CATEGORY_ID"]').length) {
            // Создаем HTML-разметку для всплывающего окна
            var popupHtml = '<div class="popup-overlay">' +
                                '<div class="popup">' +
                                    '<img src="YOUR_BANNER_IMAGE_URL" alt="Banner" />' +
                                    '<div class="close">X</div>' +
                                '</div>' +
                            '</div>';

            // Добавляем разметку на страницу
            $('body').append(popupHtml);

            // По клику на кнопку "Закрыть" скрываем всплывающее окно
            $('.close').click(function() {
                $('.popup-overlay').hide();
            });
        }
    });
</script>
```
В коде выше замените `YOUR_CATEGORY_ID` на идентификатор категории каталога, для которой вы хотите показывать всплывающее окно, и `YOUR_BANNER_IMAGE_URL` на URL-адрес изображения для баннера.

4. Сохраните изменения на странице настроек и проверьте работу всплывающего окна на страницах детальных карточек товаров из выбранной категории каталога.
Зайдите на https://freelance.habr.com/ и найдите исполнителя подходящего вам заказа. Оплатите заказ и дождитесь получения результата.
Похожие вопросы