Opencart фотогалерея

30.03.2015 04:28

Если возникла необходимость создать галерею на opencart, то в стандартной сборке присутствует плагин magnific-popup. По умолчанию он автоматически подключается к карточке товара, а чтобы был подключен всегда сделаем следующее:

В /catalog/controller/common/header.php добавим строчки:

$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');

Эти же строчки нужно удалить из /catalog/controller/product/product.php

После этого плагин magnific-popup подгружается всегда и его можно использовать где угодно на сайте. Теперь создадим страницу с информацией и назовём её "галерея". В тексте страницы вставляем нужные картинки, затем заходим в html редактор (кнопка "Code view").

Каждую картинку нужно обернуть в ссылку, а каждой ссылке присвоить класс gallery. Получится примерно следующее:

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_3.jpg"><img src="/image/catalog/demo/canon_eos_5d_3.jpg" style="width: 250px;"></a>

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_2.jpg"><img src="/image/catalog/demo/canon_eos_5d_2.jpg" style="width: 250px;"></a>

<a class="gallery" href="/image/catalog/demo/canon_eos_5d_1.jpg"><img style="width: 250px;" src="/image/catalog/demo/canon_eos_5d_1.jpg">
</a>

Далее подключаем плагин Magnific Popup:

<script>
$(document).ready(function() 
{
$('.gallery').magnificPopup(
 {
 type: 'image',
 gallery: {enabled: true},
 removalDelay: 500,
 mainClass: 'mfp-fade'
 });
});
</script>

Галерея уже готова, но её можно слегка приукрасить, подключив плавную анимацию:

<style>
.mfp-fade.mfp-bg {
  background-color:rgba(0,0,0,0);
  transition: all 0.5s linear;
}
.mfp-fade.mfp-ready
{
  background-color:rgba(0,0,0,0.8);
}
.mfp-fade.mfp-removing
{
  opacity: 0;
}
</style>
Opencart галерея

Таким образом можно подключить галерею в любом месте шаблона opencart 2 версии, к примеру, в описании категории, в левой или правой колонке, шапке и т.д. Готовый пример можно посмотреть здесь.



Как взламываются сайты

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

Opencart файловый менеджер

Много раз возникала задача к какой-либо текстовой странице прикрепить ссылку на .pdf или .xlx файл. По умолчанию менеджер файлов opencart не поддерживает работу с этими типами файлов, а для их размещения предусмотрен отдельный механизм, файлы для скачивания становятся доступны на странице личного кабинета покупателя. Нашу задачу этот способ никак не решает, так что выход один- переделать файловый менеджер.


(3) Комментариев

Хатам - 22.02.2016 02:33:44
- 0    + 0
Огромное спасибо! Вы мне очень помогли )
lato - 05.03.2016 10:46:54
- 0    + 0
Sposibo!
Роман - 18.10.2016 09:50:21
- 0    + 0
Здравствуйте.
Объясните пожалуйста после каких строчек вставлять
$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');
?