Здравствуйте!
Столкнулся с задачей вывести "Быстрый просмотр" для товаров, с возможностью свободной стилизации через свой 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
адаптивность в рабочем примере ещё не делал(уже сделал), но уже протестировал изменение размеров окна - все работает корректно.
Сообщение отредактировал mr.varhola: 05 May 2020 - 21:05