Загрузка страницы..
Быстрый просмотр в 1С-Битрикс
В этой статье мы научимся делать модальное окно "быстрый просмотр" в 1С-Битрикс
2015-03-12T08:03 12 марта 2015 08:03
Просмотров: 13211

Быстрый просмотр

Как же создать модальное окно в CMS 1С-Битрикс? Для этого нам понадобится FancyBox(плагин под jQuery) http://fancybox.net (является инструментом для отображения изображений), jQuery(библиотека JavaScript) и пара прямых рук. Я использую для решения данной задачи FancyBox, можно так же использовать другие плагины.

И так приступим:

  1. нам необходимо подключить библиотеку jQuery по CDN, для этого в файле header.php вашего шаблона вставляем следующую строку

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  2. далее в том же файле подключаем плагин FancyBox

    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>(предварительно скачав его и поместив на свой ресурс)
  3. так же в том же файле подключаем css стили плагина

    <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  4. после мы должны инициализировать обработку определённых html/css структур в FancyBox, для этого в тот же header.php вставляем следующий код:

    <script type="text/javascript"> 
            $(document).ready(function() { 
                $("a.modalbox").fancybox( 
                {                                  
                    "frameWidth" : 510,     
                    "frameHeight" : 400, 
                    "hideOnContentClick" :false               
                }); 
            }); 
    </script>
    
  5. данный кусок кода будет обращаться к FancyBox и по событию нажатия на ссылку

    <a href="<?=SITE_TEMPLATE_PATH?>/quick_view.php?ID=<?=$arElement["ID"]?>&SECTION_ID=<?=$arElement["IBLOCK_SECTION_ID"]?>" class="modalbox">Быстрый просмотр</a>

    с классом "modalbox", будет построено модальное окно.

  6. далее создаём файл который будет подгружаться при данном событии. Назовём его element.php и для наглядности положим его в корень сайта(рекомендую на будущее данный файл хранить в месте с шаблоном в котором он используется).

  7. потом в данном файле размещаем например catalog.element для того, чтобы загрузить детальную информацию о товаре(карточку товара в модальное окно).

  8. в начале данного файла не забываем прописывать

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
  9. в параметрах catalog.element на странице element.php в поле "ELEMENT_ID" пишем $_GET["ID"], т.к. на данную страницу мы передаём id просматриваемого элемента. В поле SECTION_ID пишем $arElement["IBLOCK_SECTION_ID"]

Данную технологию отображения контента в модальных окнах можно использовть в случаях когда пользователю необходимо показать контент без перезагрузки страницы:

  • быстрый просмотр детальной страницы новости
  • быстрый просмотр карточки товара
  • показ расширенной информации из связных элементов
  • загрузка полновесных и полноразмерных изображений
  • быстрый просмотр корзины
  • и т.п.


Комментарии: 1

комментарий Вячеслав
Вячеслав
2017-04-20T10:1820 апр. 2017 10:18
Здравствуйте. А что, если надо добавлять такой товар в корзину? Если подключать в это окно "Элемент детально", то добавляет только 1 товар. Остальные - нет.

Добавить комментарий

Яндекс.Метрика Яндекс.Метрик