Дополнительные фото в категории - галерея изображений
Дополнительные фото в категории как в товаре. Делаем галерею на странице категории
Сегодня речь пойдет о небольшой доработке — вывод дополнительных фотографий категории. Зачем это нужно? Если у вас в магазине продается плитка или же ламинат, покупателю будет интересно посмотреть в самой категории фото интерьеров или коллекции, если категория идет как "коллекция". Для этого возьмем уже готовый функционал с товара. В форме редактирования товара есть вкладка Изображения в которой можно добавить дополнительные фото и они будут отображены в карточке товара.
Для добавления такого же функционала в категорию для начала нам надо добавить дополнительную таблицу в базу данных product_image. Делаем запрос в базу через phpmyadmin:
CREATE TABLE IF NOT EXISTS `oc_category_image` (
`category_image_id` int(11) NOT NULL AUTO_INCREMENT,
`category_id` int(11) NOT NULL,
`image` varchar(255) DEFAULT NULL,
`sort_order` int(3) NOT NULL DEFAULT '0',
PRIMARY KEY (`category_image_id`),
KEY `category_id` (`category_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
В данном примере создается таблица с префиксом oc_ посмотрите, у вас может быть другой!
После этого открываем файл модели admin/model/catalog/category.php и добавляем возможность сохранения фотографий в базу данных. Для этого ищем в функции addCategory и editCategory строку:
if (isset($data['image'])) {перед ней вставляем:
if (isset($data['category_image'])) {
foreach ($data['category_image'] as $category_image) {
$this->db->query("INSERT INTO " . DB_PREFIX . "category_image SET category_id = '" . (int)$category_id . "', image = '" . $this->db->escape($category_image['image']) . "', sort_order = '" . (int)$category_image['sort_order'] . "'");
}
}Далее добавляем функцию выборки картинок категории, например перед строкой:
public function getCategory($category_id) {Вставляем:
public function getCategoryImages($category_id) {
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "category_image WHERE category_id = '" . (int)$category_id . "' ORDER BY sort_order ASC");
return $query->rows;
}После этого у нас изображения уже записываются в базу с формы редактирования товара. Далее открываем контроллер admin/controller/catalog/category.php находим строку:
$data['placeholder'] = $this->model_tool_image->resize('no_image.png', 100, 100);и после нее вставляем код обработки фото:
// Images
if (isset($this->request->post['category_image'])) {
$category_images = $this->request->post['category_image'];
} elseif (isset($this->request->get['category_id'])) {
$category_images = $this->model_catalog_category->getCategoryImages($this->request->get['category_id']);
} else {
$category_images = array();
}
$data['category_images'] = array();
foreach ($category_images as $category_image) {
if (is_file(DIR_IMAGE . $category_image['image'])) {
$image = $category_image['image'];
$thumb = $category_image['image'];
} else {
$image = '';
$thumb = 'no_image.png';
}
$data['category_images'][] = array(
'image' => $image,
'thumb' => $this->model_tool_image->resize($thumb, 100, 100),
'sort_order' => $category_image['sort_order']
);
}
После этого открываем форму редактирования категории admin/view/template/catalog/category_form.tpl и ищем строку:
<li><a href="#tab-data" data-toggle="tab"><?php echo $tab_data; ?></a></li>
после нее добавляем код вкладки:
<li><a href="#tab-image" data-toggle="tab">Изображения</a></li>
Далее ищем строку:
<p class="tab-pane" id="tab-design">
И перед ней вставляем блок вкладки с формой добавления изображений:
<div class="tab-pane" id="tab-image">
<?php $button_remove = 'Удалить'; $button_image_add = 'Добавить'; ?>
<div class="table-responsive">
<table id="images" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-left">Изображение</td>
<td class="text-right"><?php echo $entry_sort_order; ?></td>
<td></td>
</tr>
</thead>
<tbody>
<?php $image_row = 0; ?>
<?php foreach ($category_images as $category_image) { ?>
<tr id="image-row<?php echo $image_row; ?>">
<td class="text-left"><a href="" id="thumb-image<?php echo $image_row; ?>" data-toggle="image" class="img-thumbnail"><img src="<?php echo $category_image['thumb']; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a><input type="hidden" name="category_image[<?php echo $image_row; ?>][image]" value="<?php echo $category_image['image']; ?>" id="input-image<?php echo $image_row; ?>" /></td>
<td class="text-right"><input type="text" name="category_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $category_image['sort_order']; ?>" placeholder="<?php echo $entry_sort_order; ?>" class="form-control" /></td>
<td class="text-left"><button type="button" onclick="$('#image-row<?php echo $image_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
</tr>
<?php $image_row++; ?>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="text-left"><button type="button" onclick="addImage();" data-toggle="tooltip" title="<?php echo $button_image_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
</tr>
</tfoot>
</table>
</div>
</div>
И после этого конечно оживляем все кнопки скриптом. Внизу файла перед строкой
<script type="text/javascript"><!--
Вставляем этот код:
<script type="text/javascript"><!--
var image_row = <?php echo $image_row; ?>;
function addImage() {
html = '<tr id="image-row' + image_row + '">';
html += ' <td class="text-left"><a href="" id="thumb-image' + image_row + '"data-toggle="image" class="img-thumbnail"><img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a><input type="hidden" name="category_image[' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';
html += ' <td class="text-right"><input type="text" name="category_image[' + image_row + '][sort_order]" value="" placeholder="<?php echo $entry_sort_order; ?>" class="form-control" /></td>';
html += ' <td class="text-left"><button type="button" onclick="$(\'#image-row' + image_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#images tbody').append(html);
image_row++;
}
//--></script>
После таких правок у нас уже есть возможность в админке добавлять, редактировать и сохранять изображения в категории. После любых изменений в коде не забывайте обновлять кеш модификаторов (Дополнения — Менеджер дополнений — кнопка Обновить)
Вывод фото на странице категории.
Для вывода фото на странице категорий нам необходимо добавить функцию выборки изображений из базы данных в модель. Для этого открываем файл catalog/model/catalog/category.php и, например перед строкой:
public function getCategories($parent_id = 0) {вставляем нашу функцию
public function getCategoryImages($category_id) {
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "category_image WHERE category_id = '" . (int)$category_id . "' ORDER BY sort_order ASC");
return $query->rows;
}
После этого полученные данные надо обработать в контроллере, для этого идем в файл catalog/controller/product/category.php и перед строкой:
$data['description'] = html_entity_decode($category_info['description'], ENT_QUOTES, 'UTF-8');
вставляем код обработки:
$data['images'] = array();
$results = $this->model_catalog_category->getCategoryImages($category_id);
if($results){
$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');
foreach ($results as $result) {
$data['images'][] = array(
'popup' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height')),
'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_additional_width'), $this->config->get($this->config->get('config_theme') . '_image_additional_height'))
);
}
}
После этого у нас в шаблон идет массив $images в котором находятся фотографии категории. Для отображения их на сайте надо сделать вывод в шаблоне. Для этого открываем файл catalog/view/theme/default/template/product/category.tpl и в нужном месте вставляем код:
<?php if ($images) { ?>
<p class="row images">
<?php foreach ($images as $image) { ?>
<p class="col-xs-6 col-sm-6 col-md-3"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p>
<?php } ?>
</p>
<hr>
<script>
$(document).ready(function() {
$('.images').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
enabled:true
}
});
});
</script>
<?php } ?>
Учтите, что у вас может быть другой шаблон. В примере указан шаблон default (выделен выше). После всех правок можете чистить кеш модификаторов, кеш модуля кеширования (если он есть) и радоваться результатам.
Кстати, если Вы не используете кеш — рекомендую установить бесплатный модуль кеширования.
Вопросы, предложения и замечания приветствуются в комментариях.