Выпадение в автокомплите при поиске товара

[Prooksius]

Всегда удручало, что выпадение в автокомплите в админке показывает только название. Оно иногда не достаточно информативно и приходится открывать параллельно еще одно окно с товарами, чтобы там видеть, что выбираешь.
Оказалось, поменять это досадное недоразумение легко.

получение товаров для списка автокомплита идет в
admin\controller\catalog\product.php
в public function autocomplete()

Вот там рядом с загрузкой других моделей добавить

$this->load->model('tool/image');

и в заполнении массива добавить картинку:
 

$json[] = array(
	'product_id' => $result['product_id'],
	'name'       => strip_tags(html_entity_decode($result['name'], ENT_QUOTES, 'UTF-8')),
	'model'      => $result['model'],
	'image'		 => $this->model_tool_image->resize($result['image'], 20, 20),
	'option'     => $option_data,
	'price'      => $result['price']
);

А во view,
admin/view/template/catalog/product_form.tpl
к примеру при заполнении Сопутствующих товаров для редактируемого товара:

// Related
$('input[name=\'related\']').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=catalog/product/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: (item['image'] ? '<img src="'+item['image']+'" style="width: 20px; margin-right: 6px;" />' : '') + item['name'],
						value: item['product_id']
					}
				}));
			}
		});
	},
	'select': function(item) {
		$('input[name=\'related\']').val('');

		$('#product-related' + item['value']).remove();

		$('#product-related').append('<div id="product-related' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="product_related[]" value="' + item['value'] + '" /></div>');
	}
});

здесь изменения я вносил только в заполнение label в ajax-запросе.

В итоге имеем такую гораздо более удобную систему

 

 

Змінено 7 лютого 2021 користувачем Prooksius

[KomissarJuve]

а ocmod может удобней будет ?

а идея у вас хорошая

Змінено 7 лютого 2021 користувачем KomissarJuve

[sasha3337774]

да, если бы показывало и картинку, то было бы очень круто
сейчас не очень удобно 

[Tobolskiy]

полезно, спасибо, а для выбранных уже как сделать тоже картинку?

[chukcha]

5 минут назад, Tobolskiy сказал:

уже как сделать тоже картинку?

Добавить в контроллер

[Prooksius]

1 час назад, KomissarJuve сказал:

а ocmod может удобней будет ?

да, сделаю, ок

[chukcha]

<?xml version="1.0" encoding="utf-8"?>
<modification>
	<name>related image</name>
	<code>related image</code>
	<version>2.3</version>
	<author>slasoft</author>
	<info><![CDATA[Идея https://opencartforum.com/topic/173570-vypadenie-v-avtokomplite-pri-poiske-tovara/]]></info>

	<link></link>

	<file path="admin/view/template/catalog/product_form.tpl">
		<operation>
			<search><![CDATA[<?php echo $product_related['name']; ?>]]></search>
			<add position="replace"><![CDATA[
			<img src="<?php echo $product_related['image']; ?>" style="width:20px; margin-left:6px;" alt="" /><?php echo $product_related['name']; ?>
				]]>
			</add>
		</operation>
	</file>

	<file path="admin/controller/catalog/product.php">
		<operation error="skip">
			<search><![CDATA[public function autocomplete() {]]></search>
			<add position="after"><![CDATA[
			$this->load->model('tool/image');
			$placeholder = $this->model_tool_image->resize('no_image.png', 20, 20);
				]]>
			</add>
		</operation>
		<operation error="skip">
			<search><![CDATA['name'       => strip_tags(html_entity_decode($result['name'], ENT_QUOTES, 'UTF-8')),]]></search>
			<add position="replace"><![CDATA[
			'name'       => '<img src="' . ($result['image']?$this->model_tool_image->resize($result['image'], 20, 20):$placeholder) . '" style="margin-right:6px" />' . strip_tags(html_entity_decode($result['name'], ENT_QUOTES, 'UTF-8')),
				]]>
			</add>
		</operation>
		<operation error="skip">
			<search><![CDATA[$related_info['name']]]></search>
			<add position="before"><![CDATA[
			'image'      => $related_info['image']?$this->model_tool_image->resize($related_info['image'], 20, 20):$placeholder_i,
				]]>
			</add>
		</operation>
		<operation error="skip">
			<search><![CDATA[$data['product_relateds'] = array();]]></search>
			<add position="after"><![CDATA[
			$placeholder_i = $this->model_tool_image->resize('no_image.png', 20, 20);
				]]>
			</add>
		</operation>
	</file>
	
</modification>

па-бысраму

[Prooksius]

Я еще добавил чтобы в уже выбраных списках тоже были икноки.

autocomplete_pic.ocmod.xml

[fanatic]

а common.js ?

[Dimasscus]

+. Чтоб не потерять

[Prooksius]

1 минуту назад, fanatic сказал:

а common.js ?

а там вроде все старое, ничего менять не надо

[Dimasscus]

22 минуты назад, Prooksius сказал:

Я еще добавил чтобы в уже выбраных списках тоже были икноки.

autocomplete_pic.ocmod.xml 3 \u043a\u0411 · 4 downloads

Если не затруднит- можно ли вьівод рядом с картинкой артикула товара? Иногда бьівают однотипньіе товарьі в которьіх отличие только артикул.

[Prooksius]

1 минуту назад, Dimasscus сказал:

Если не затруднит- можно ли вьівод рядом с картинкой артикула товара? Иногда бьівают однотипньіе товарьі в которьіх отличие только артикул.

Я сделаю, а кому-то не нужно...

тут наверное надо модуль ваять, с настройками, чтобы можно было выбирать, что  и как показывать.

[fanatic]

3 минуты назад, Prooksius сказал:

а там вроде все старое, ничего менять не надо

в выпадающем списке, изображения выводятся(без правок сommon.js) ?

[chukcha]

7 минут назад, fanatic сказал:

а common.js ?

а что там?

[chukcha]

Только что, fanatic сказал:

изображения выводятся(без правок сommon.js) ?

Да

в label подмешивается

[Prooksius]

Только что, fanatic сказал:

в выпадающем списке, изображения выводятся(без правок сommon.js) ?

да, у меня выводится.
в common - там сам autocomplete-компонент, который обеспечивает функционал, а в views - callback-функция, которая собственно и вставляет, что надо..

[fanatic]

2 минуты назад, chukcha сказал:

в label подмешивается

точно, протупил

[Prooksius]

2 минуты назад, chukcha сказал:

в label подмешивается

да, ваше решение, чтобы в контроллере image проставлять, изящнее, меньше правок)
и по-моему placeholder с no-image необязательно делать, resizе ее вернет, если картинки не присвоено

[Dimasscus]

8 минут назад, Prooksius сказал:

Я сделаю, а кому-то не нужно...

тут наверное надо модуль ваять, с настройками, чтобы можно было выбирать, что  и как показывать.

да ту согласен- сугубо от потребностей зависит. себе добавлю сам. просто думал для многих актуально. спасибо за идею и реализацию

[chukcha]

7 минут назад, Dimasscus сказал:

да ту согласен- сугубо от потребностей зависит. себе добавлю сам. просто думал для многих актуально. спасибо за идею и реализацию

 

12 минут назад, Prooksius сказал:

да, ваше решение, чтобы в контроллере image проставлять, изящнее, меньше правок)
и по-моему placeholder с no-image необязательно делать, resizе ее вернет, если картинки не присвоено

Не совсем.. в product_list при поиске...
 

[Prooksius]

также сделал еще и в Рекомендуемых, кстати

[GetWeb]

Полезная доработка

[chukcha]

21 минуту назад, chukcha сказал:

Не совсем.. в product_list при поиске...

с учетом

related_image.ocmod.xml

[Tom]

Если в контроллеры дописать второе (тоже самое изображение) но с большим размером, да потом всё это подключить к встроенному в bootstrap  скрипту Popover, то при наведении мышкой, можно без особых усилий получить ещё и увеличенное изображение.

А то в самом первом сообщении речь шла о трудностях в понимании какой именно товар, а с картинками 25 на 25 это не всегда выход.

Popover

Пример работы (в опциях)

По сути просто добавил в картинку data-toggle="popover-hover" data-placement="auto right" data-image-popup="Картинка_Большего _Размера" .

Ну и плюс в футер немного скрипта и стилей

 <script type="text/javascript"><!--
	$(document).ready(function(){
		$('[data-toggle="popover-hover"]').popover({
        container: 'body',
		html: true,
		trigger: 'hover',
		animation: 500,
		content: function () { return '<img src="' + $(this).data('image-popup') + '" />'; }
		});
	});
//--></script>  
<style>.popover-title {text-align:center;font-size:15px;font-weight:500;}.popover {max-width: 100% !important;}</style> 

Хотя это уже совсем другая история ))))