[PHP, JavaScript, Программирование] OpenCart popup, модальные окна
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Статья нашего сотрудника из его личного блога.Разрабатывая модуль в админке мне понадобилось использовать модальные окна OpenCart для вывода определенной информации, а так же для показа формы. Мой опыт frontend на тот момент был так себе, однако коллега подсказал что в OpenCart используется jquery (2.1.1), а у этой библиотеки есть поддержка popup окон. Но не все так просто …Уточним: модальное окно == всплывающее окно == popup.Библиотека модальных окон
Кнопка при клике по которой показывается модальное окноДля того чтобы использовать модальное окно OpenCart, надо определить какая библиотека предоставляет для этого функционал, используемый в этом движке. Разбирая админку OpenCart 3.0 (в 2.3 такой кнопки нет), в разделе Панель состояния была найдена кнопка, при клике по которой показалось всплывающее окно. То что нужно, начинаем разбор :)
Модальное окно в админке OpenCart Настройки разработчикаЗаходим на страницу "Панель состояния", открываем ее исходный код и смотрим в конце скрипт:
$('#button-setting').on('click', function() {
$.ajax({
url: 'index.php?route=common/developer&user_token=D9aTD65JQVdyOY9pcVxcRUx0M3eTefnr',
dataType: 'html',
beforeSend: function() {
$('#button-setting').button('loading');
},
complete: function() {
$('#button-setting').button('reset');
},
success: function(html) {
$('#modal-developer').remove();
$('body').prepend('<div id="modal-developer" class="modal">' + html + '</div>');
$('#modal-developer').modal('show');
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
Как видно, на кнопку с id button-setting вешается обработчик на клик, в котором ajax запрос, успешный результат которого показывается в popup окне. А для показа этого окна используется:
$('#modal-developer').modal('show');
Похоже на библиотеку jquerymodal. Однако в bootstrap тоже есть поддержка модальных окон. Пробуем выяснить через отладчик какая библиотека все-таки используется, ставим брекпоинт в вышеприведенном скрипте на методе modal.
Брекпоинт на методе modalНажимаем на кнопку (на первом скрине), попадаем на брекпоинт, шагаем внутрь и попадаем в bootstrap.min.js.
Стек привел в bootstrap.min.jsВсплывающие окна в OpenCart реализуются через bootstrap.Использование popup окон в OpenCartПроинспектировав окно выясняем что оно уже содержит нужную нам логику закрытия окна и состоит из двух важных для нас частей:
- div с классом modal-header в котором h4, который и есть заголовок окна
- div с классом modal-body¨C11Cвнутри содержит контент окна
Просмотр html кода модального окна Настройки разработчикаТак как окно уже имеет оформление, то просто возьмем его каркас, классы и на основе верстки этого окна составим свое:
<div id="modal-window" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<!--заголовок и кнопка закрытия-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<!--контентная часть окна-->
<div class="modal-body"></div>
</div>
</div>
</div>
Для показа окна с id modal-window будем использовать:
$('#modal-window').modal('show');
Теперь в нужном нам месте страницы в админке разместим свои вёрстку и js. Для этого используем события в OpenCart. Например повесим обработчик на страницу редактирования заказа:
$this->model_extension_event->addEvent('modal_window', 'admin/view/sale/order_form/after', 'extension/module/modal_window/eventSaleOrderFormAfter');
Теперь обработчик:
public function eventSaleOrderFormAfter(&$route, &$args, &$output)
{
$idOrder = $args["order_id"];
$this->load->model('sale/order');
$this->load->model('catalog/product');
//загрузка списка продуктов заказа
$aOrderProducts = $this->model_sale_order->getOrderProducts($args["order_id"]);
//строка верстки списка товаров
$sOrderProducts = "";
//формируем список товаров
for($i=0; $i<count($aOrderProducts); ++$i)
{
$aProduct = $this->model_catalog_product->getProduct($aOrderProducts[$i]["product_id"]);
$sOrderProducts .= "<li>".$aProduct["name"]." - ".$aProduct["model"]." (".$aOrderProducts[$i]["quantity"]." шт.): ".round($aOrderProducts[$i]["total"], 2)."р. </li>";
}
$sOrderProducts = "<ul>$sOrderProducts</ul>";
//верстка модального окна и скрипт вызова
$sModal = '
<div id="modal_window" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Список товаров</h4>
</div>
<div class="modal-body">
'.$sOrderProducts.'
</div>
</div>
</div>
</div>
<script>$("#modal_window").modal("show");</script>
';
//находим закрывающий тег body и перед ним вставляем модальное окно и скрипт его показа
$iPos = strripos($output, "</body>");
$output = substr($output, 0, $iPos).$sModal.substr($output, $iPos);
}
Каждый раз при входе на страницу редактирования заказа будет появляться всплывающее окно со списком товаров.Можно вставлять кнопку в панель кнопок в админке (или в любое другое место), повесить на кнопку обработчик клика и показывать модальное окно (как это сделано на странице Панель состояния). Однако для этого придется использовать регулярные выражения или парсер DOM.Автор: Виталий Бутурлин
===========
Источник:
habr.com
===========
Похожие новости:
- [Веб-дизайн, CSS, JavaScript, HTML, Usability] Свободно стилизируемы outline DOM элементов
- [Программирование, Системное программирование, Отладка, Реверс-инжиниринг] Особенности структурной обработки исключений в Win64
- [JavaScript, Flutter] Пакет валидации mobx form validation kit 2.0 (TypeScript / Flutter)
- [Системное администрирование, Системное программирование, DevOps] Как управлять многоступенчатым окружением с помощью Ansible (перевод)
- [Программирование, Разработка мобильных приложений, Учебный процесс в IT, Карьера в IT-индустрии] 1 марта SimbirSoft приглашает на Весенний интенсив
- [Разработка веб-сайтов, PHP, Программирование] Это не легаси-код, это PHP (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование] Будущее JavaScript: декораторы
- [Программирование микроконтроллеров, Разработка под Arduino, DIY или Сделай сам] Запускаем код для Arduino в браузере
- [Программирование, Машинное обучение] Введение: Соревнование от финансовой группы HOME CREDIT по определеню риска дефолта заемщика
- [Open source, PHP, PostgreSQL, Совершенный код, GitHub] Интеграция PHP проекта на GitHub и Scrutinizer
Теги для поиска: #_php, #_javascript, #_programmirovanie (Программирование), #_programmirovanie (программирование), #_javascript, #_php, #_boot, #_opencart, #_php, #_javascript, #_programmirovanie (
Программирование
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 13:49
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
Статья нашего сотрудника из его личного блога.Разрабатывая модуль в админке мне понадобилось использовать модальные окна OpenCart для вывода определенной информации, а так же для показа формы. Мой опыт frontend на тот момент был так себе, однако коллега подсказал что в OpenCart используется jquery (2.1.1), а у этой библиотеки есть поддержка popup окон. Но не все так просто …Уточним: модальное окно == всплывающее окно == popup.Библиотека модальных окон Кнопка при клике по которой показывается модальное окноДля того чтобы использовать модальное окно OpenCart, надо определить какая библиотека предоставляет для этого функционал, используемый в этом движке. Разбирая админку OpenCart 3.0 (в 2.3 такой кнопки нет), в разделе Панель состояния была найдена кнопка, при клике по которой показалось всплывающее окно. То что нужно, начинаем разбор :) Модальное окно в админке OpenCart Настройки разработчикаЗаходим на страницу "Панель состояния", открываем ее исходный код и смотрим в конце скрипт: $('#button-setting').on('click', function() {
$.ajax({ url: 'index.php?route=common/developer&user_token=D9aTD65JQVdyOY9pcVxcRUx0M3eTefnr', dataType: 'html', beforeSend: function() { $('#button-setting').button('loading'); }, complete: function() { $('#button-setting').button('reset'); }, success: function(html) { $('#modal-developer').remove(); $('body').prepend('<div id="modal-developer" class="modal">' + html + '</div>'); $('#modal-developer').modal('show'); }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }); $('#modal-developer').modal('show');
Брекпоинт на методе modalНажимаем на кнопку (на первом скрине), попадаем на брекпоинт, шагаем внутрь и попадаем в bootstrap.min.js. Стек привел в bootstrap.min.jsВсплывающие окна в OpenCart реализуются через bootstrap.Использование popup окон в OpenCartПроинспектировав окно выясняем что оно уже содержит нужную нам логику закрытия окна и состоит из двух важных для нас частей:
Просмотр html кода модального окна Настройки разработчикаТак как окно уже имеет оформление, то просто возьмем его каркас, классы и на основе верстки этого окна составим свое: <div id="modal-window" class="modal">
<div class="modal-dialog"> <div class="modal-content"> <!--заголовок и кнопка закрытия--> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"></h4> </div> <!--контентная часть окна--> <div class="modal-body"></div> </div> </div> </div> $('#modal-window').modal('show');
$this->model_extension_event->addEvent('modal_window', 'admin/view/sale/order_form/after', 'extension/module/modal_window/eventSaleOrderFormAfter');
public function eventSaleOrderFormAfter(&$route, &$args, &$output)
{ $idOrder = $args["order_id"]; $this->load->model('sale/order'); $this->load->model('catalog/product'); //загрузка списка продуктов заказа $aOrderProducts = $this->model_sale_order->getOrderProducts($args["order_id"]); //строка верстки списка товаров $sOrderProducts = ""; //формируем список товаров for($i=0; $i<count($aOrderProducts); ++$i) { $aProduct = $this->model_catalog_product->getProduct($aOrderProducts[$i]["product_id"]); $sOrderProducts .= "<li>".$aProduct["name"]." - ".$aProduct["model"]." (".$aOrderProducts[$i]["quantity"]." шт.): ".round($aOrderProducts[$i]["total"], 2)."р. </li>"; } $sOrderProducts = "<ul>$sOrderProducts</ul>"; //верстка модального окна и скрипт вызова $sModal = ' <div id="modal_window" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Список товаров</h4> </div> <div class="modal-body"> '.$sOrderProducts.' </div> </div> </div> </div> <script>$("#modal_window").modal("show");</script> '; //находим закрывающий тег body и перед ним вставляем модальное окно и скрипт его показа $iPos = strripos($output, "</body>"); $output = substr($output, 0, $iPos).$sModal.substr($output, $iPos); } =========== Источник: habr.com =========== Похожие новости:
Программирование ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 13:49
Часовой пояс: UTC + 5