Product Option Images

Quote

Post by Evanslooten » Fri Jan 13, 2012 3:25 am

I did a few searches, trying to find a way to allow the images specified under options to be swapped when the option was changed; I wasn't able to find anything so I figured I would post my solution here.

As with ANY modifications, ALWAYS back up your files!

Catalog/view/theme/YOUR_THEME/template/product/product.tpl
Find this code

Code: Select all

<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
And add this

Code: Select all

image="<?php echo $option_value['image']; ?>"
so it looks something like this

Code: Select all

<option image="<?php echo $option_value['image']; ?>" value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
What this does, is add the image url as an attribute in our select options. This will default to a no-image image if nothing is specified in the admin panel. Now that the url is somewhere accessible, we place some simple jQuery to handle the swapping.

This code binds a function that when the select is changed, swaps the default image to the image specified in your options area. Change YOUR_SELECT_SELECTOR to a valid jQuery selector for the desired option.

For example, my select was wrapped in a div with an HTML id of 'option-228'. Therefor, my script looks like this

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
	$('#option-228 select').change(function() {
		alert($('#option-228 select option:selected').attr('image'));
		$('#image').attr('src', $('#option-228 select option:selected').attr('image'));
	});
});
</script>
Note the default image area has an id of #image. If you have changed this, or this is not the case for your theme, you will need to update the script below with that id.


Great! But my image is REALLY SMALL! What's going on??
By default, OpenCart passes you an image that is 50x50. If you would like it in a different size (say 228x228, the typical size of the product image) you will need to make these changes below.

Catalog/Controller/Product/Product.php
Find this bit of code

Code: Select all

foreach ($option['option_value'] as $option_value) {
						if (!$option_value['subtract'] || ($option_value['quantity'] > 0)) {
							$option_value_data[] = array(
								'product_option_value_id' => $option_value['product_option_value_id'],
								'option_value_id'         => $option_value['option_value_id'],
								'name'                    => $option_value['name'],
								'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
								'price'                   => (float)$option_value['price'] ? $this->currency->format($this->tax->calculate($option_value['price'], $product_info['tax_class_id'], $this->config->get('config_tax'))) : false,
								'price_prefix'            => $option_value['price_prefix']
							);
						}
					}
See the section that says

Code: Select all

$this->model_tool_image->resize($option_value['image'], 50, 50),
That's where our image is being resized! Simply change the integer values to the desired size (in my case 228, 228)!

This is my first site developed with OpenCart, so I'm sure there are things I've missed here. I will update frequently until I am satisfied all loose ends are taken care of. If you have any questions or problems making these changes, message me with details and I will help best I can.
Evanslooten
Newbie
Posts
1
Joined
Wed Dec 14, 2011 2:30 am
Top

Re: Product Option Images

Quote

Post by huntr77 » Fri Feb 10, 2012 8:54 pm

Have you started using this method? The problem I just noticed is that every Options box would have a different selector. In your example you use 228, but then wouldn't you need to do that for each different Options box?
huntr77
Newbie
Posts
4
Joined
Thu Feb 02, 2012 8:04 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 7 guests