OpenCart — галерея — создаем галерею изображений с помощью модуля галереи
OpenCart — движок для создания интернет-магазина, в котором по умолчанию не предусмотрена возможность создания портфолио или размещения галереи. Но порой бывает необходимо или просто хочется разместить образцы работ, фотографии популярных или необычных товаров, продемонстрировать весь ассортимент цветов, например обивки для мебельных магазинов, разместить галерею всех работ и т. д. В общем, иногда приходится искать сторонние решения для добавления функционала магазину. В данном случае, создание галереи не является исключением.
Простой модуль «Gallery Images» поможет создать любое количество галерей, разместить их как на стандартных схемах движках, так и на отдельной странице.
Установка и настройка модуля
1. Скачиваем модуль «Gallery Images». Модуль совместим с версиями 1.5.5.1-1.5.6.4, требует установленного vqmod.
Также, если хотите выводить галерею на отдельной странице, а не только блоками на других страницах магазина, то стоит скачать и установить модуль «Clean Category page». Суть модуля заключается в том, чтобы убирать со страницы категорий заголовок, кнопку «Продолжить» и фразу о том, что в этой категории нет товаров, когда их действительно нет в этой категории. Этот модуль сослужит нам службу при размещении галереи на отдельной странице.
2. Распаковываем модуль «Clean Category page» и загружаем его содержимое в корень своего магазина, будут только добавлены новые файлы, ни один из существующих файлов не будет перезаписан.
Аналогично поступаем и с модулем «Gallery Images» — распаковываем и содержимое папки «FILES TO UPLOAD OC-1.5.5.1-up» загружаем в корневую папку магазина.
3. Отправляемся в админку/Дополнения/Модули и устанавливаем модуль «Gallery». Также идем в Система/Пользователи/Группы пользователей и главному администратору даем все права, для внесения изменений и просмотра.
4. Для того, чтобы заголовок модуля в админке имел адекватный вид, откроем файл vqmod/xml/gallery_images.xml и в пути к языковому файлу (строка 24)
1 |
<file name="admin/language/english/common/header.php"> |
сменим «english» на «*»
1 |
<file name="admin/language/*/common/header.php"> |
5. На данном этапе галерея уже функционирует и можно заниматься ее наполнением. Для этого переходим по вкладкам Каталог/Gallery Images и создаем новую галерею.
6. Для вывода галереи, на одной из существующих схем магазина, идем в Дополнения/Модули/Gallery и задаем вывод созданной галереи. Выбираем нужную галерею, указываем размеры изображений, схему, порядок сортировки — порядок вывода галерей и отмечаем статус «включено».
и в итоге получаем галерею на главной (или на той странице, какую указали вы), внизу страницы
Но что, если нам нет надобности выводить галерею с другой информацией, а необходимо вывести ее на отдельной странице? Чтобы все галереи были на одной странице, шли одна за другой. Или будет одна галерея, но с большим количеством изображений. Да вариаций вывода галерей может быть сколько угодно, суть в том как же создать отдельную страницу для вывода галереи?
Вот тут-то и сыграет свою роль «Clean Category page». Модуль у нас уже установлен, так что с ним порядок, но теперь нам необходимо создать ту страницу, на которой будут отображаться наши галереи.
1. Идем в Система/Дизайн/Схемы и создаем новую схему, называем ее на свое усмотрение «Галерея», «Наши работы» и т. п.
2. Создаем новую категорию с аналогичным названием. Отмечаем в настройках «показывать в главном меню», если хотим, чтобы в меню появилась вкладка «Галерея» (вкладка с таким названием, которое носит ваша категория). В табе «Дизайн» меняем схему на ту, которую мы создали в предыдущем шаге!
3. В Дополнения/Модули/Gallery задаем новый вывод галереи, но теперь выбираем нашу новую схему. Проверяем магазин — вуаля, галерея(и) выводится на отдельной странице (как на первом скрине этого поста). Все изображения открываются в pop-up окне с возможностью перелистывания.
Но есть одно «но» — вместо названия галерей выводится заголовок «Gallery». Итак, исправляем это.
1. Открываем файл catalog/model/catalog/gallimage.php и меняем запрос
1 |
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "gallimage_image gi LEFT JOIN " . DB_PREFIX . "gallimage_image_description gid ON (gi.gallimage_image_id = gid.gallimage_image_id) WHERE gi.gallimage_id = '" . (int)$gallimage_id . "' AND gid.language_id = '" . (int)$this->config->get('config_language_id') . "'"); |
на следующий
1 |
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "gallimage_image gi LEFT JOIN " . DB_PREFIX . "gallimage gin ON (gi.gallimage_id = gin.gallimage_id) LEFT JOIN " . DB_PREFIX . "gallimage_image_description gid ON (gi.gallimage_image_id = gid.gallimage_image_id) WHERE gi.gallimage_id = '" . (int)$gallimage_id . "' AND gin.gallimage_id = '" . (int)$gallimage_id . "' AND gid.language_id = '" . (int)$this->config->get('config_language_id') . "'"); |
2. Открываем файл catalog/controller/module/gallimage.php, находим строки (20-29)
1 2 3 4 5 6 7 8 9 10 |
foreach ($results as $result) { if (file_exists(DIR_IMAGE . $result['image'])) { $this->data['gallimages'][] = array( 'title' => $result['title'], 'link' => $result['link'], 'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height']), 'popup' => $this->model_tool_image->resize($result['image'], 500, 500) ); } } |
и меняем их на
1 2 3 4 5 6 7 8 9 10 11 |
foreach ($results as $result) { if (file_exists(DIR_IMAGE . $result['image'])) { $this->data['gallimages'][] = array( 'title' => $result['title'], 'name' => $result['name'], 'link' => $result['link'], 'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height']), 'popup' => $this->model_tool_image->resize($result['image'], 500, 500) ); } } |
3. Открываем последний файл для правки — catalog/view/theme/ваша-тема/template/module/gallimage.tpl и находим строку с выводом заголовка, находится она практически в самом начале файла
1 |
<div class="box-heading"><?php echo $heading_title; ?></div> |
и меняем ее на
1 |
<div class="box-heading"><?php echo $gallimages[0]['name']; ?></div> |
Проверяем магазин — теперь все категории имеют свои собственные заголовки, те, которые мы им задали в админке при создании.
Важно! Для того, чтобы изменить размер всплывающего окна изображений, открываем файл catalog/controller/module/gallimage.php, находим строку
1 |
'popup' => $this->model_tool_image->resize($result['image'], 500, 500) |
и меняем 500х500 на свои значения.
Теперь в нашем интернет-магазине на движке OpenCart появилась страница с галереями, в которые можно добавить все что душе угодно. Галерея простая, не особо функциональная, но при этом бесплатная, легкая в наполнении и в работе магазина.
И снова порадовали, спасибо за простое и понятное обьяснение
Спасибо!
Не работает. Выдает ошибку:
Notice: Error: Unknown column ‘gi.gallimage_idВ ‘ in ‘on clause’
Error No: 1054
SELECT * FROM oc_gallimage_image gi LEFT JOIN oc_gallimage gin ON (gi.gallimage_idВ = gin.gallimage_id) LEFT JOIN oc_gallimage_image_description gid ON (gi.gallimage_image_idВ = gid.gallimage_image_id) WHERE gi.gallimage_id = ‘3’ AND gin.gallimage_id = ‘3’ AND gid.language_id = ‘1’ in /var/www/user7475/data/www/МОЙ_САЙТ/system/database/mysql.php on line 50
В меню так и не пояявилась ссылка, что делать?
а как сделать, что бы галерея была ввиде категории, то есть фото с названием, и при клике на него открывались все товары размещённые там
Подскажите, пожалуйста решение следующего вопроса. На сайте есть фото товара разрешением 150*150, это фото показано на странице каталога. Необходимо сделать так, что бы при нажатие на это фото во всплывающем окне открывалась другое фото этого товара, но с большим разрешением, примерно 1024*768. Получается что существует 2 разных фото одного и того же товара. Один с меньшим разрешением, другое с большим. Заранее спасибо за помощь.
Не работает:
Notice: Error: Unknown column ‘gi.gallimage_id ‘ in ‘on clause’
Error No: 1054
SELECT * FROM lmn_gallimage_image gi LEFT JOIN lmn_gallimage gin ON (gi.gallimage_id = gin.gallimage_id) LEFT JOIN lmn_gallimage_image_description gid ON (gi.gallimage_image_id = gid.gallimage_image_id) WHERE gi.gallimage_id = ‘3’ AND gin.gallimage_id = ‘3’ AND gid.language_id = ‘1’ in /public_html/***/system/database/mysqliz.php on line 53
Ребята, перепроверьте синтаксис/кодировку указаного вами примера кода SQL запроса. Ошибка 1054 ушла после того, как вручную переписал запрос.
P.S. А вообще молодцы — реально помогаете экономить время.
Спасибо за замечение. Постараюсь разобраться с кодом в ближайшее время.
Подскажите, разобрались ли с кодом этого запроса?
У меня таже ошибка 1054… Никак не получается исправить, не хватает знаний.
Напишите, пожалуйста верный код запроса в файле catalog/model/catalog/gallimage.php
Еще вопрос. Файла gallimage.tpl нет по пути «Ваша тема», но есть в теме «default».
Может ли это отразиться на работоспособности метода?
RobRoy, а в чем там ошибка — в этом запросе, не подскажешь? Хотелось бы выводить галереи с названиями!
Не отображается галерея в админ панеле. Подскажите что сделать нужно?
У меня тоже не отображается галерея в админ панеле. Подскажите что сделать нужно? Версия Version 1.5.4.1
Скажите, на опенкарт 2.0 есть что то подобное?
Не могу сказать что такую же, но одну из галерей для OpenCart линейки 2.0 рассмотрю в ближайшее время и напишу пост.
Посмотрите пост о модуле для создания галереи на OpenCart 2.x.
скажите а можно такую галерею в категорию поставить, чтоб у каждой категории была своя презентационная галерея?
Спасибо.
Для этого необходимо разве что делать свой шаблон категории для каждой категории, чтобы в схемах (макетах), в админке находился не просто макет «Категория», а необходимое кол-во категорий, к которым и будут привязываться галереи. Но надо сказать, дело это муторное, тут уж стоит оценивать стоит ли оно того.
Не работает замена заголовка «GALLERY» на заголовки галерей. Выскакивает ошибка 1054. Какая-то ошибка в коде запроса (пункт 1). Поправьте, пожалуйста, код запроса, который нужно вставить в файл catalog/model/catalog/gallimage.php
Поправила. Протестировала на 1.5.6.4, заголовки выводятся, ошибки нет.
Спасибо за подробное объяснение, такая галерея очень пригодилась.
Единственная проблема — при каждом сохранении Галереи (даже без добавления новых изображений) — слетает сортировка изображений. В итоге после каждого сохранения все оказывается в произвольном порядке. Не знаете в чем может быть причина?
Все работает (1.5.6.3). У кого не отображаются названия галлерей — проверьте цвет текста для .box .box-heading.
У меня был белый на белом фоне а я пол дня искал грабли =))
Все работает, спасибо большое разработчику за труд.
Только вот всю работу омрачают два момента:
1. Можно ли так сделать, чтобы popup менял свои пропорции в зависимости от каждой картинки? Чтобы можно было задать только ширину а высота вычислялась автоматом, или задать ширину попапа в процентах от ширины экрана (опять-же с автоматическим вычислением пропорции).
Ну и еще один момент — ооочень не хватает добавление картинок кучей — множественным выделением или указанием целой папки. Это огромная проблема.
Еще раз спасибо за Ваш труд, жду с нетерпением ответ по поводу размеров popup.
Причин неработоспособности модуля может быть много: несовместимость модулей, версия vqmod старая, нет таких строк кода, которые заданы модулем в xml файле и потому новый код не может полключиться и т.д.
Благодарю Вас очень классный модуль , вопрос решился когда обновила vqmod до последней версии
Вот и отлично, что разобрались с проблемой!
Здравствуйте.
Все отлично, просто супер.
Но есть еще один вопрос: — Как реализовать название галерей на двух языках?
Спасибо.
Здравствуйте!
У меня тоже такая же проблема.
Как реализовать название галерей на двух языках?
Здравствуйте! Как сделать, чтобы ссылка на категорию Галерея» не отображалась в боковом меню категорий?
Вопрос решен!
Алгоритм действий:
Заходим в Каталог – Категории, и создаем следующую иерархию категорий:
1. Первая родительская категория (скрытая категория) = статус отключен
1.1. Основная категория (скрытая от глаз, но рабочая) = статус включен
1.1.1. другие категории по необходимости = статус включен или отключен.
Метод рабочий и с ним разберется даже новичок.
Вот таким нехитрым способом мы решили эту проблему.