Доброго времени суток, уважаемое сообщество... Сей пост про использование стандартной библиотеки всплывающих окон PopupWindow
Для начала тем, кто еще не знаком, стоит познакомиться с официальной документацией и с постом:
Итак ...
Была у меня задача - сделать аяксовую сменую 3-х отображений списка товаров инфоблока. Об этом писать не буду. Тут достаточно изучить пост . Это успешно было реализовано. Все обрадовались, попили пива ... А дальше начали детально все тестировать и обнаружили, что стандартная всплывашка, которая появилась в eshop и реализованная через JCCatalogSection после аякс-показа элемента - просто не отрабатывает. Потратил часа 4 - так и не разобрался, что же нужно сделать, чтобы работала ... Посему, решил сделать свою всплывашку.
Создал отдельный js-файл, подключил его сразу в хедере (знаю, что можно было подключить и только на тех страницах, где это нужно, но не стал уже заморачиваться.... хотя стоило бы:) ), а также подключаем в хедере popup:
ну и последний штрих: во всех видах отображения у ссылок, отвечающих за добавление товара в корзину, добавляем класс "buy_btn". Примерно вот так:
<a class="buy_btn" href="#" product_id="<?=$arItem['ID']?>" > В корзину </a>
обычно в атрибут "product_id" помещаю ID товара, который нужно добавить в корзину. Не совсем корректно, но ничего умнее пока не придумал:)
Суть скрипта: вешаем на ссылку с классом buy_btn обработчик, который получает ID товара и количество единиц, которое нужно добавить (в данном случае - всегда 1 )и это все передаем в функцию, которая делает аякс- запрос к файлу, добавляющему товар в корзину (этот файл возвращает обратно компонент "Ссылка на корзину", который также обновляем при добавлении товара в корзину) и вызывает всплывашку.
Простите, если сбивчиво описал - у меня отпуск начался:) Всем, кто также как и я в отпуске - удачно отдохнуть!
P.S. Если не хотите портить дефолтные стили у шаблонов от eshop - просто удалите атрибут ID у ссылок добавления в корзину:)
UPD ATE 201-09-22
Увидел еще одну штуку: если нужно какое-то событие после показа popup-окна, то добавляется еще один параметр, описывающий popup:
Это увидел в компоненте catalog.se t.constructor. Оставил так, как было в исходнике. Суть: сначала в попапе показывается прелоадер, а при открытии из файла popup.php тянется содержимое попапа ... Но, конечно же, можно сделать еще кучу других очень полезных фишек, используя данный метод ...
Попович Алексей, не подскажите как на содержимое окна повесить функцию this.popupWindow.close? То есть, чтобы при клике на содержимое, окно закрывалось. В вашем примере и всех что видела, закрытие вешается на созданные кнопки, что мне в данной ситуации не подходит... Заранее спасибо!
Муромцева Ирина, я бы на вашем месте написал обработчик клика на каком-то объекте внутри окна, который бы передавал клик кнопке закрытия. Т.е. в обработчике придется жестко прописать, как ему найти кнопку. Лучшего ничего в голову не приходит:(
Почему-то при первом вызове окно не правильно позиционируется на экране - гораздо выше чем нужно, в следующие разы ок - по центру видимой области. С чем это может быть связано, как пофиксить?
Александр, я так помнию, с проблемой разобрались:)
Связано, скорей всего с тем, что контейнер, который подтягивается в попап, не фиксированной, а резиновой ширины. Структура html, которая будет показываться при попапе генерится сразу же при загрузке страницы и лежит себе в футере и при вызове попапа происходит позиционирование по ширине этого самого html. Вам нужно принудительно задать ширину и тогда должно все отлично работать.
Попович Алексей, Спасибо за ответ, нет решение мне ночью померещилось, но оказалось в итоге не рабочим ) У дива задана ширина жестко и min-height, этого не достаточно? Кстати баг только в файрфоксе такой.
Не понятно 1) Как назвать созданный .js файл и в какую директорию его закинуть 2) Как прописать ", добавляем класс "buy_btn"." всем ссылкам? В каком файле 3) Куда денется текущая всплывающая форма и как её отредактировать?
Для таких, как я: /httpdocs/bitrix/js/main/core/core_popup.js Но править его очень не рекомендую! Лучше вешать большой js в своём файле, чем работать через файлы ядра...
Немного про анимацию BX.PopupWindow имеет возможность открывать и закрывать pop-up с анимацией. задается через BX.PopupWindow.setAnimation(option) Option - либо строка (fading, fading-slide, или scale), либо null или false (отключает анимацию), либо объект (на счет последнего надо смотреть отдельно, но вроде как позволяет задать свой собственный тип анимации)
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».