OpenCart Community

Posted: **Fri Nov 27, 2015 11:42 pm**

I am writing my first module for OC 2.1.0.1.
I have an embedded C background so used to programming, just not HTML/PHP/Opencart. I have read and followed a number of tutorials about OpenCart's MVC architecture and after experimenting I think I have the basics down.

The eventual output from my custom module will be a featured product box that displays only 1 product rather than the 3/4 products currently in the "Featured" module, but with more information and and quick add to cart button.

Starting at the admin back end i have modified the Featured.php controller, language and template. the FeaturedSingle module I created is working in the admin backend except for 1 part. I can't successfully change the part of the form that allows for multiple products to be selected into one that only allows one to be selected.

The original Controller code:

Code: Select all

		$this->load->model('catalog/product');
		$data['products'] = array();
		if (isset($this->request->post['product'])) {
			$products = $this->request->post['product'];
		} elseif (!empty($module_info)) {
			$products = $module_info['product'];
		} else {
			$products = array();
		}
		foreach ($products as $product_id) {
			$product_info = $this->model_catalog_product->getProduct($product_id);

			if ($product_info) {
				$data['products'][] = array(
					'product_id' => $product_info['product_id'],
					'name'       => $product_info['name']
				);
			}
		}

The original View code:

Code: Select all

          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-product"><?php echo $entry_product; ?></label>
            <div class="col-sm-10">
              <input type="text" name="product" value="" placeholder="<?php echo $entry_product; ?>" id="input-product" class="form-control" />
              <div id="featured-product" class="well well-sm" style="height: 150px; overflow: auto;">
                <?php foreach ($products as $product) { ?>
                <div id="featured-product<?php echo $product['product_id']; ?>"><i class="fa fa-minus-circle"></i> <?php echo $product['name']; ?>
                  <input type="hidden" name="product[]" value="<?php echo $product['product_id']; ?>" />
                </div>
                <?php } ?>
              </div>
            </div>
          </div>

That gives a multi select box as in the original Featured module. What I want to be able to have is a single text input box , with the same auto-complete functionality and for the option selected from the dropdown to fill in the text input box. Equivalent functionality can be seen in the "Links" tab of the standard edit product page where the "Manufacturer" option gives a drop down of each manufacturer and only one can be chosen. I used that code as an Example and changed the default code above to the following:
Controller

Code: Select all

		$this->load->model('catalog/product');
		
		if (isset($this->request->post['product_id'])) {
			$data['product_id'] = $this->request->post['product_id'];
		} elseif (!empty($module_info)) {
			$data['product_id'] = $module_info['product_id'];
		} else {
			$data['product_id'] = 0;
		}

		if (isset($this->request->post['product'])) {
			$data['product'] = $this->request->post['product'];
		} elseif (!empty($module_info)) {
			$product_info = $this->model_catalog_product->getProduct($product_id);

			if ($product_info) {
				$data['product'] = $product_info['name'];
			} else {
				$data['product'] = '';
			}
		} else {
			$data['product'] = '';
		}

View:

Code: Select all

          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-product"><?php echo $entry_product; ?></label>
            <div class="col-sm-10">
            	<input type="text" name="product" value="<?php echo $product ?>" placeholder="<?php echo $entry_product; ?>" id="input-product" class="form-control" />
                <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
            </div>  
          </div>

This works to chow just the text input box with a drop which shows the products as an auto-complete list, however whatever I select from the list does not fill in the text input, that keeps showing the place-holder text "Product". as show in the attached image:

featured_single_interface_issue.png (16.23 KiB) Viewed 1102 times

Any ideas?

Posted: **Mon Nov 30, 2015 2:50 am**

Ok I managed to make this work, In the controller I needed to get the name correctly:

Code: Select all

			$product_info = $this->model_catalog_product->getProduct($module_info['product_id']);

And in the View file the autocomplete Java script at the bottom needed to be changed to:

Code: Select all

  <script type="text/javascript"><!--
$('input[name=\'product\']').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['name'],
						value: item['product_id']
					}
				}));
			}
		});
	},
	select: function(item) {
		$('input[name=\'product\']').val(item['label']);
		$('input[name=\'product_id\']').val(item['value']);
	}
});

Now it works. The selection persists with save and the autocomple works correctly. Next job it to make the front end of the module display in the home page layouy

OpenCart Community

Single Product Selection v2.1.0.1

Single Product Selection v2.1.0.1

Re: Single Product Selection v2.1.0.1 (resolved)