Дополнительные фото в категории - галерея изображений

Дополнительные фото в категории как в товаре. Делаем галерею на странице категории

Сегодня речь пойдет о небольшой доработке — вывод дополнительных фотографий категории. Зачем это нужно? Если у вас в магазине продается плитка или же ламинат, покупателю будет интересно посмотреть в самой категории фото интерьеров или коллекции, если категория идет как "коллекция". Для этого возьмем уже готовый функционал с товара. В форме редактирования товара есть вкладка Изображения в которой можно добавить дополнительные фото и они будут отображены в карточке товара.

Для добавления такого же функционала в категорию для начала нам надо добавить дополнительную таблицу в базу данных 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 (выделен выше). После всех правок можете чистить кеш модификаторов, кеш модуля кеширования (если он есть) и радоваться результатам.