Перейти к содержимому


Фотография
* * * * * 1 Голосов

[Рецепт] Адаптивный "Быстрый просмотр" с помощью css


Сообщений в теме: 6

#1 mr.varhola

mr.varhola

Отправлено 10 June 2018 - 10:03

Здравствуйте!

Столкнулся с задачей вывести "Быстрый просмотр" для товаров, с возможностью свободной стилизации через свой 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

  • 3

#2 CB9TOIIIA

CB9TOIIIA

Отправлено 10 June 2018 - 10:23

Круто! :) спасибо, но у меня при загрузке попапа - вначале он левее - потом смещение в центр, у Вас также? Chrome


  • 0

#3 mr.varhola

mr.varhola

Отправлено 10 June 2018 - 13:35

Вы правы, когда выключил вебинспектор увидел этот скачек.
Пофиксил, внес правки в рецепт


  • 0

#4 mmth

mmth

Отправлено 10 June 2018 - 13:40

Вы правы, когда выключил вебинспектор увидел этот скачек.
Пофиксил, внес правки в рецепт

чуть офтопа общая верстка не умещается в ширину экрана 1366px, и второе почему владельцев brandwomen не устраивает prestashop?


  • 0

#5 mr.varhola

mr.varhola

Отправлено 10 June 2018 - 13:47

чуть офтопа общая верстка не умещается в ширину экрана 1366px

Сайт ещё в разработке, адаптивность ещё не делалась.

 

 

и второе почему владельцев brandwomen не устраивает prestashop

Видимо чем-то не устраивает, в данной теме я хотел поделится рецептом по Быстрому просмотру, а не обсуждать решения заказчика..


Сообщение отредактировал mr.varhola: 10 June 2018 - 13:51

  • 0

#6 mmth

mmth

Отправлено 10 June 2018 - 13:49

Сайт ещё в разработке, адаптивность ещё не делалась.

 

 

Видимо чем-то не устраивает, в данной теме я хотел поделится решением, а не обсуждать решения заказчика..

Все верно, по решению не хватает "Крестика" - кнопки закрыть


  • 0

#7 mr.varhola

mr.varhola

Отправлено 10 June 2018 - 13:50

http://joxi.ru/l2Zx58ziwwgXRr

Опять же, пока нет адаптивности)

он у вас скорее всего не влезает в экран.


Сообщение отредактировал mr.varhola: 10 June 2018 - 13:50

  • 0




Click to return to top of page in style!