Здравствуйте!
Столкнулся с задачей вывести "Быстрый просмотр" для товаров, с возможностью свободной стилизации через свой css + адаптивностью данного окна с помощью того-же css.
Необходимый результат я получил и хочу поделится ним с остальными, возможно кому-то пригодится.
В первую очередь не забываем о том, что для корректной работы элемента "Быстрый просмотр" необходимо в настройках SEF отключить Исправить дубли (BETA!), делается это в настройках jbzoo /administrator/index.php?option=com_zoo&controller=jbconfig&task=sef
Далее в нашем файле \media\zoo\applications\jbuniversal\templates\uikit\renderer\item\quickview.php
подключаем все необходимые файлы css и js, так как это iframe использоваться будут только подключенные тут файлы, сделать это можно так:
<link rel="stylesheet" href="/templates/Название_Вашего_шаблона_Joomla/css/reset.css" type="text/css" />
<link rel="stylesheet" href="/templates/Название_Вашего_шаблона_Joomla/fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="/templates/Название_Вашего_шаблона_Joomla/css/quickview.css" type="text/css" />
Рекомендую создать свой css файл для быстрого просмотра, чтобы не подгружать лишние стили в iframe.
Я использую шаблон Uikit и по этому править элемент кнопки быстрого просмотра нужно в данном шаблоне:
media\zoo\applications\jbuniversal\templates\uikit\elements\jbquickview\tmpl\button.php
Заменяем внутренности стандартного файла на следующие:
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
$this->app->jbassets->fancybox();
$btnAttrs = array_replace_recursive($quickView->btnAttrs, array(
'class' => 'fastShowBtn quickview jsQuickView'
));
?>
<script type="text/javascript">
jQuery(function($){
setTimeout(function(){
$("<? echo '#'.$quickView->uniqId ?>").fancybox({
beforeLoad: function() {
this.width = $('.fancySize').width();
this.height = $('.fancySize').height();
},
"type":"iframe",
"fitToView":true,
"autoSize":"false",
"iframe":{"scrolling":"no","preload":true},
"closeClick":false,
"title":false,
"helpers":{"overlay":{"locked":true}}
});
},0);
});
</script>
<?
echo '<!--noindex--><div id='.$quickView->uniqId.'></div>' .
'<a ' . $this->app->jbhtml->buildAttrs($btnAttrs) . '>' .
$quickView->buttonText .
'</a>' .
'<!--/noindex-->';
?>
В данном файле я изменил стандартный вызов fancybox iframe на свой, в котором получаю заданную ширину и высоту для быстрого просмотра, дополнительно для этого необходимо в файле /templates/Название_Вашего_шаблона_Joomla/index.php добавить див сразу после открывающего <body>:
<div class="fancySize"></div>
и потом указать нужную ширину и высоту для fancybox iframe и скрыть этот самый див в файле css шаблона Joomla: /templates/Название_Вашего_шаблона_Joomla/css/style.css
Дальше в этом же файле для этого же класса вы и будете указывать размеры своего fancybox iframe для адаптивности.
У меня для основной версии такие параметры:
.fancySize{
width: 1170px;
height: 715px;
position: absolute;
left: -1000%;
}
Далее необходимо добавить строчку с формированием уникального id в файле: \media\zoo\applications\jbuniversal\elements\jbquickview\jbquickview.php
Находим строку:
$return['buttonText'] = $buttonText;
и сразу после неё добавляем:
$return['uniqId'] = $uniqId;
Дополнительно, если нужно чтобы ссылки которые находятся в нашем iframe открывались в родительском окне, а не внутри самого iframe, в моем случае это переход на товар в другом цвете или на страницу данного товара, нужно в файле \media\zoo\applications\jbuniversal\templates\uikit\renderer\item\quickview.php добавить немного js:
jQuery(function() {
jQuery('a').attr('target','_top');
});
На этом все, теперь размеры окна fancybox iframe можно спокойно указывать в css файле своего шаблона Joomla, и также делать адаптивность данного окна в соседнем файле css который мы создавали специально для быстрого просмотра: quickview.css
Рабочий пример можно посмотреть тут: https://brandwomen.ru/katalog
адаптивность в рабочем примере ещё не делал(уже сделал), но уже протестировал изменение размеров окна - все работает корректно.
Edited by mr.varhola, 05 May 2020 - 21:05.
спасибо, но у меня при загрузке попапа - вначале он левее - потом смещение в центр, у Вас также? Chrome
