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

Задача: сделать кнопку “быстрый просмотр” в шаблоне категории, при клике по которой подгружается шаблон. Для решения этой задачи есть 2 пути: править контроллеры или писать модуль. Отличие только в том, что написание модуля займет больше времени, но разрешит обновлять opencart (тоже сомнительно, так как к примеру переход 2.2-2.3 ломает половину модулей), в этой статье используется редактирование контроллеров.

Начиная с текущей записи и далее подразумевается, что Opencart версии 2.3 и выше. Дело в том, что на этой версии произошло изменение путей некоторых файлов и папок, что делает неработоспособными многие модули, которые подходили под opencart 2.2. В дальнейшем выйдет статья про переработку модуля под версию 2.3 из модуля под версию 2.0-2.2.

По подярку:

  1. Подключить фансибокс
  2. Изменить шаблон категории
  3. Изменить шапку
  4. Изменить контроллер категории
  5. Изменить вывод товаров (контроллер)
  6. Изменить шаблоны
  7. Подредактировать js

1. Фанси нужно подключить свежий, учитывая версию jquery которая на текущем opencart. Подключать или правильно в контроллере шапки – или просто допишем в шаблон вывода шапкис абсолютными путями:

	<link rel="stylesheet" href="catalog/view/theme/himi/fancybox/jquery.fancybox.css">
	<script src="catalog/view/theme/himi/fancybox/jquery.fancybox.pack.js"></script>

Так же в js подключить класс fancy-iframe для ссылок. Почитайте документацию для FancyBox чтобы сделать верно (обратите внимание на опции для iframe).

2. В шаблоне категории нужно добавить нужным образом кнопку идентичную ссылке на товар с параметром:

	<a href="<?php echo $product['href']; ?>&fancy=1" class="white-but fancy-iframe">Быстрый просмотр</a>

Мы добавили параметр fancy в url. Если параметр передается в url – он будет передаваться методом get. Чем мы и воспользуемся в контроллерах.

3, 4, 5. В эти места нужно добавить получение этого параметра.

	$data['fancy'] = (isset($this->request->get['fancy'])) ? 1:0;

Такой параметр позволит в шаблонах использовать параметр $fancy – его наличие будет говорить шаблону использовать те или иные элементы, когда вызывается быстрый просмотр.

6. Изменение шаблонов. Для начала нужно используя параметр $fancy скрыть в шапке и футере весь html. Это нужно для того, чтобы не вызывалось меню, футер в окошке быстрого просмотра. Далее нужно поставить таких же ограничителей в тех местах, где нужно. Пример:

	<?php if ($fancy) { ?>
		какой то текст шаблона, модули и всякое такое
	<?php } ?>

7. Мелкие правки по js. Во-первых не забудьте про класс .breadcrumbs. После него появляются алерты вроде “товар добавлен в корзину”. Так же желательно добавить скрытие фансибокса после добавления в корзине, так как в этом фанси-окне сайт будет работать полностью – можно перемещаться по ссылкам, если переместиться – будет и шапка и футер и прочее. Пример для шаблона продуктов (там где обрабатывается удачное добавление в корзину):

	setTimeout(function(){
		parent.$.fancybox.close();
	},1000);

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *