scary.png Happy Halloween! Лови жутко страшный список шаблонов и модулей со скидками.
Jump to content
Sign in to follow this  
Solange

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

Recommended Posts

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

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

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

 

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

ПРИМЕР.png

Share this post


Link to post
Share on other sites

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

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

 

Пример:

additional-hover-image-3product.gif.b75e309ede7092032bf139db7f8dd77d.gif

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.