OpenCart – How Auto-Complete Works

This is an article about yet another Opencart application that is used all of the time but rarely discussed. The AUTO COMPLETE is used to quickly and easily locate an item in your catalog and fill it in an INPUT FIELD. This is done using Ajax/ Jquery / PHP. We will give you an example of a basic Auto Fill flow and will of course tell you where to locate it.

Open /admin/controller/catalog/product.php and find this code:

public function autocomplete() {
		$json = array();

		if (isset($this->request->get['filter_name']) || isset($this->request->get['filter_model']) || isset($this->request->get['filter_category_id'])) {
			$this->load->model('catalog/product');
			$this->load->model('catalog/option');

			if (isset($this->request->get['filter_name'])) {
				$filter_name = $this->request->get['filter_name'];
			} else {
				$filter_name = '';
			}

			if (isset($this->request->get['filter_model'])) {
				$filter_model = $this->request->get['filter_model'];
			} else {
				$filter_model = '';
			}

			if (isset($this->request->get['limit'])) {
				$limit = $this->request->get['limit'];	
			} else {
				$limit = 20;	
			}			

			$data = array(
				'filter_name'  => $filter_name,
				'filter_model' => $filter_model,
				'start'        => 0,
				'limit'        => $limit
			);

			$results = $this->model_catalog_product->getProducts($data);

			foreach ($results as $result) {
				$option_data = array();

				$product_options = $this->model_catalog_product->getProductOptions($result['product_id']);	

				foreach ($product_options as $product_option) {
					$option_info = $this->model_catalog_option->getOption($product_option['option_id']);

					if ($option_info) {				
						if ($option_info['type'] == 'select' || $option_info['type'] == 'radio' || $option_info['type'] == 'checkbox' || $option_info['type'] == 'image') {
							$option_value_data = array();

							foreach ($product_option['product_option_value'] as $product_option_value) {
								$option_value_info = $this->model_catalog_option->getOptionValue($product_option_value['option_value_id']);

								if ($option_value_info) {
									$option_value_data[] = array(
										'product_option_value_id' => $product_option_value['product_option_value_id'],
										'option_value_id'         => $product_option_value['option_value_id'],
										'name'                    => $option_value_info['name'],
										'price'                   => (float)$product_option_value['price'] ? $this->currency->format($product_option_value['price'], $this->config->get('config_currency')) : false,
										'price_prefix'            => $product_option_value['price_prefix']
									);
								}
							}

							$option_data[] = array(
								'product_option_id' => $product_option['product_option_id'],
								'option_id'         => $product_option['option_id'],
								'name'              => $option_info['name'],
								'type'              => $option_info['type'],
								'option_value'      => $option_value_data,
								'required'          => $product_option['required']
							);	
						} else {
							$option_data[] = array(
								'product_option_id' => $product_option['product_option_id'],
								'option_id'         => $product_option['option_id'],
								'name'              => $option_info['name'],
								'type'              => $option_info['type'],
								'option_value'      => $product_option['option_value'],
								'required'          => $product_option['required']
							);				
						}
					}
				}

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

		$this->response->setOutput(json_encode($json));
	}

Now open /admin/view/template/catalog/product_form.tpl and find this code:

$('input[name=\'related\']').autocomplete({
	delay: 500,
	source: function(request, response) {
		$.ajax({
			url: 'index.php?route=catalog/product/autocomplete&token=<?php echo $token; ?>&filter_name=' +  encodeURIComponent(request.term),
			dataType: 'json',
			success: function(json) {		
				response($.map(json, function(item) {
					return {
						label: item.name,
						value: item.product_id
					}
				}));
			}
		});
	}, 
	select: function(event, ui) {
		$('#product-related' + ui.item.value).remove();

		$('#product-related').append('<div id="product-related' + ui.item.value + '">' + ui.item.label + '<img src="view/image/delete.png" alt="" /><input type="hidden" name="product_related[]" value="' + ui.item.value + '" /></div>');

		$('#product-related div:odd').attr('class', 'odd');
		$('#product-related div:even').attr('class', 'even');

		return false;
	},
	focus: function(event, ui) {
      return false;
   }
});

The code that you have located is what we will be looking at and is enough to show you how these two files communicate.

From a user’s standpoint this is how it works: An admin logs in and wants to find a product in their catalog so they open up the entire list of items. In the input box that says Product Name you simply have to start typing and the auto fill will be activated with the detection of a key press.

When the admin starts typing, this line of code is executed with the help of AJAX to contact the php function above:

url: ‘index.php?route=catalog/product/autocomplete&token=<?php echo $token; ?>&filter_name=’ +  encodeURIComponent(request.term),

The beauty of Ajax is that all of the action takes place ON THE PAGE without a refresh so after the HTTP REQUEST you basically see INSTANT RESULTS. This is why after typing you start seeing a list of items that the PHP function is RETURNING as data.

The php code that grabs all of the products according to the letters (filter) being typed in is this:

$results = $this->model_catalog_product->getProducts($data);
            
            foreach ($results as $result) {

Within that foreach loop you have an array that is created and echoed onto the TPL in the form of the data list. Easy Peasy. Yes, you have to type in letters that resemble an item in the catalog for it to work so no…..it’s not that reliable and some even say it’s not user friendly. However, it is clever in how it works!

Looking for quality OpenCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

5 Comments on OpenCart – How Auto-Complete Works

  1. swed says:

    Thanks again Joe. I think that the Auto-Complete is a cool and useful feature. There’s very seldom any problem using it, at least in OC 1.5.6.1.

  2. Gary Grant says:

    Hi Joe, thanks for the insight into the autocomplete function. This is actually the first post I’ve found that has been extremely helpful.

    I was wondering if you could help me increase the number of results in the drop down when initiating a search.

    I noted that by default, it returns a list of 20, and when I saw the $limit = 20; – figured I’d hit the jackpot.

    However, I tried increasing it to 100, and there was no change – still only gives me 20.

    I have a client who has requested this modification so am really hoping to figure out why it’s not allowing more results.

    Hope you are able to help me with this issue.

    Thanks in advance,
    Gary Grant.

    • Are you sure you are filling the right variable?
      if (isset($this->request->get['limit'])) {
      $limit = $this->request->get['limit'];
      } else {
      $limit = 20;
      }
      Changing the 20 to 100 will only work if the $limit is NOT set first.

  3. No problem! If there is anything else just ask!

    Joe

Leave a Reply

Your email address will not be published. Required fields are marked *


× 5 = 20

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>