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

Solange · 13 вересня 2018

Необходимо добавить изображения в категории.

Это я сделал вот так:

Для добавления такого же функционала в категорию для начала нам надо добавить дополнительную таблицу в базу данных 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 ;
После этого открываем файл модели 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 } ?>

Теперь мне нужно вывести эти изображения в каталог, т.е. когда видно весь перечень категорий на каждую категорию есть одна фотография, а нужно чтоб выводило все. Наглядно на картинке пример сделала. Буду благодарна за любую помощь.

OldAine · 11 січня 2019

Может кому-то это будет полезно - Готовое решение →

При наведении, выводит дополнительные картинки товара на всех страницах сайта.

Пример:

Вхід

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

Recommended Posts

Solange

Надіслати

Поділитися на інших сайтах

OldAine

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Ваші замовлення

ocStore

Шаблони

OpenCart.Pro

Important Information