How can I load a manufacturer list on BO Products page?

[ReactionCode]

Hi there.

 

I'm trying to load the dropdown list of manufacturers in the product listing page of the back office.

 

filter-manufacturer1.PNG

 

It would be the same as we see in the Associations tab when configuring a product.

 

filter-manufacturer2.PNG

 

To do this, I modified the "list_header.tpl" from back office. I have adapted the code and javascript to show the filter option and toggle with the categories filter.

var base_url = '{$base_url}';
// Load category products page when category is clicked
$('#categories-treeview :input').live('click', function(){
	if (this.value !== "")
		location.href = base_url + '&id_category=' + parseInt(this.value);
	else
		location.href = base_url + '&reset_filter_category=1';
});

// Make sure the checkbox is checked/unchecked when the link is clicked
$('#toggle_category_tree').bind('click', function(event){
	event.preventDefault();
	$('#block_category_tree').toggle();				
	if ($('#block_category_tree').is(':visible'))
	{
		$(this).find('input').attr('checked', true);
		if ($('#block_manufacturer_list').is(':visible'))
		{
			$('#block_manufacturer_list').toggle();
			$('#toggle_manufacturer_list').find('#manufacturer_list').removeAttr('checked');
		}
	}	
	else
	{
		$(this).find('input').removeAttr('checked');
		location.href = base_url + '&reset_filter_category=1';
	}
});

// Load manufacturer products page when manufacturer is clicked
$('#categories-treeview :input').live('click', function(){
	if (this.value !== "")
		location.href = base_url + '&id_manufacturer=' + parseInt(this.value);
	else
		location.href = base_url + '&reset_filter_category=1';
});

// Make sure the checkbox is checked/unchecked when the link is clicked
$('#toggle_manufacturer_list').bind('click', function(event){
	event.preventDefault();
	$('#block_manufacturer_list').toggle();				
	if ($('#block_manufacturer_list').is(':visible'))
	{
		$(this).find('input').attr('checked', true);
		if ($('#block_category_tree').is(':visible'))
		{
			$('#block_category_tree').toggle();
			$('#toggle_category_tree').find('input').removeAttr("checked");
			$("select#id_manufacturer1").getManufacturers();
		}	
	}
	else
	{
		$(this).find('input').removeAttr('checked');
		location.href = base_url + '&reset_filter_category=1';
	}
});

To display the list of manufacturers I copied part of the code "associations.tpl" and I added the necessary javascript fform "admin-products.js"

 

HTML

	<span> | </span>
	<a href="#" id="toggle_manufacturer_list">
		<input type="checkbox" id="manufacturer_list" {if $is_manufacturer_filter}checked="checked"{/if} />{l s='Filter by manufacturer'}
	</a>
</form>
<div id="block_manufacturer_list" {if !$is_manufacturer_filter}style="display:none"{/if}>
	<br />
	<select name="id_manufacturer" id="id_manufacturer">
		<option value="0">- {l s='None'} -</option>
	</select>	
</div>							

JAVASCRIPT

/**
 * Update the manufacturer select element with the list of existing manufacturers
 */
$('select#id_manufacturer').getManufacturers = function(){
	$.ajax({
			url: 'ajax-tab.php',
			cache: false,
			dataType: 'json',
			data: {
				ajaxProductManufacturers:"1",
				ajax : '1',
				token : token,
				controller : 'AdminProducts',
				action : 'productManufacturers'
			},
			success: function(j) {
				var options = $('select#id_manufacturer').html();
				if (j)
				for (var i = 0; i < j.length; i++)
					options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
				$("select#id_manufacturer").html(options);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$("select#id_manufacturer").replaceWith("<p id=\"id_manufacturer\">[TECHNICAL ERROR] ajaxProductManufacturers: "+textStatus+"</p>");
			}
	});
};
this.onReady = function(){
	self.getManufacturers();
};					

I Attach my modified code from:

www.domain.com/backoffice/themes/default/template/controllers/products/helpers/list/list_header.tpl

 

list_header.zip

 

¿Why don't load the manufacturer list?

 

Hi there.

 

I'm trying to load the dropdown list of manufacturers in the product listing page of the back office.

 

 

It would be the same as we see in the Associations tab when configuring a product.

 

 

To do this, I modified the "list_header.tpl" from back office. I have adapted the code and javascript to show the filter option and toggle with the categories filter.

var base_url = '{$base_url}';
// Load category products page when category is clicked
$('#categories-treeview :input').live('click', function(){
	if (this.value !== "")
		location.href = base_url + '&id_category=' + parseInt(this.value);
	else
		location.href = base_url + '&reset_filter_category=1';
});

// Make sure the checkbox is checked/unchecked when the link is clicked
$('#toggle_category_tree').bind('click', function(event){
	event.preventDefault();
	$('#block_category_tree').toggle();				
	if ($('#block_category_tree').is(':visible'))
	{
		$(this).find('input').attr('checked', true);
		if ($('#block_manufacturer_list').is(':visible'))
		{
			$('#block_manufacturer_list').toggle();
			$('#toggle_manufacturer_list').find('#manufacturer_list').removeAttr('checked');
		}
	}	
	else
	{
		$(this).find('input').removeAttr('checked');
		location.href = base_url + '&reset_filter_category=1';
	}
});

// Load manufacturer products page when manufacturer is clicked
$('#categories-treeview :input').live('click', function(){
	if (this.value !== "")
		location.href = base_url + '&id_manufacturer=' + parseInt(this.value);
	else
		location.href = base_url + '&reset_filter_category=1';
});

// Make sure the checkbox is checked/unchecked when the link is clicked
$('#toggle_manufacturer_list').bind('click', function(event){
	event.preventDefault();
	$('#block_manufacturer_list').toggle();				
	if ($('#block_manufacturer_list').is(':visible'))
	{
		$(this).find('input').attr('checked', true);
		if ($('#block_category_tree').is(':visible'))
		{
			$('#block_category_tree').toggle();
			$('#toggle_category_tree').find('input').removeAttr("checked");
			$("select#id_manufacturer1").getManufacturers();
		}	
	}
	else
	{
		$(this).find('input').removeAttr('checked');
		location.href = base_url + '&reset_filter_category=1';
	}
});

To display the list of manufacturers I copied part of the code "associations.tpl" and I added the necessary javascript fform "admin-products.js"

 

HTML

	<span> | </span>
	<a href="#" id="toggle_manufacturer_list">
		<input type="checkbox" id="manufacturer_list" {if $is_manufacturer_filter}checked="checked"{/if} />{l s='Filter by manufacturer'}
	</a>
</form>
<div id="block_manufacturer_list" {if !$is_manufacturer_filter}style="display:none"{/if}>
	<br />
	<select name="id_manufacturer" id="id_manufacturer">
		<option value="0">- {l s='None'} -</option>
	</select>	
</div>							

JAVASCRIPT

/**
 * Update the manufacturer select element with the list of existing manufacturers
 */
$('select#id_manufacturer').getManufacturers = function(){
	$.ajax({
			url: 'ajax-tab.php',
			cache: false,
			dataType: 'json',
			data: {
				ajaxProductManufacturers:"1",
				ajax : '1',
				token : token,
				controller : 'AdminProducts',
				action : 'productManufacturers'
			},
			success: function(j) {
				var options = $('select#id_manufacturer').html();
				if (j)
				for (var i = 0; i < j.length; i++)
					options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
				$("select#id_manufacturer").html(options);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$("select#id_manufacturer").replaceWith("<p id=\"id_manufacturer\">[TECHNICAL ERROR] ajaxProductManufacturers: "+textStatus+"</p>");
			}
	});
};
this.onReady = function(){
	self.getManufacturers();
};					

I Attach my modified code from:

www.domain.com/backoffice/themes/default/template/controllers/products/helpers/list/list_header.tpl

 

list_header.zip

 

¿Why don't load the manufacturer list?

Edited August 16, 2014 by javsmile (see edit history)