[How-to] Global Mega Options Image working IE7 and IE8
Posted: Sun Jun 12, 2011 5:09 am
Hi everybody i have been working hard to get a fix done for the Global Mega Options Select Field Drop down so when you set an image for an option in the backend it works in IE6, IE7, IE8, IE9, FireFox, Google Chrome, Safari, Opera and many more and i have finally fixed it so all you have to do is this:
edit the product.tpl file in:
catalog/view/theme/templatename/template/product.tpl so change "templatename" to what template you are using if it is a custom theme other wise just go here:
catalog/view/theme/default/template/product.tpl
Find this:
Replace with this:
Now for the second part of the code find this:
Replace with this:
Now near the bottom of the page find:
And replace with:
And that is it now should work in all browsers for Changing images on drop down for all select fields
Hope this helps people
Regards,
Aaron
edit the product.tpl file in:
catalog/view/theme/templatename/template/product.tpl so change "templatename" to what template you are using if it is a custom theme other wise just go here:
catalog/view/theme/default/template/product.tpl
Find this:
Code: Select all
<!-- GMO start copy global options here -->
<?php if (!empty($attributes)) { ?>
<?php foreach ($aoptions as $aoption) { ?>
<tr>
<td>
<?php if($aoption['mode'] != "hidden"){echo $aoption['name']; ?>:<br /><?php } ?>
<?php if($aoption['mode'] == "select"){ ?>
<select name="option[<?php echo $aoption['option_id']; ?>][]" id="option[<?php echo $aoption['option_id']; ?>]"<?php echo $aoption['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($aoption['option_value'][0]['extra']['allowmultiple']) && $aoption['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($aoption['option_value'][0]['extra']['list_height']) ? ' size="'.$aoption['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
<option value="">Please select --------------- </option>
<?php foreach ($aoption['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['option_value_id']; ?>" <?php echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'onclick="getPreview(\''.$option_value['option_image_thumb'] .'\', \''.$option_value['option_image_popup'] .'\');"' : ''); ?>><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
<?php } ?>
</option>
<?php } ?>
</select>
<?php } //end if select ?>
Code: Select all
<!-- GMO start copy global options here -->
<?php if (!empty($attributes)) { ?>
<?php foreach ($aoptions as $aoption) { ?>
<tr>
<td>
<?php if($aoption['mode'] != "hidden"){echo $aoption['name']; ?>:<br /><?php } ?>
<?php if($aoption['mode'] == "select"){ ?>
<select name="option[<?php echo $aoption['option_id']; ?>][]" id="option[<?php echo $aoption['option_id']; ?>]"<?php echo $aoption['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($aoption['option_value'][0]['extra']['allowmultiple']) && $aoption['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($aoption['option_value'][0]['extra']['list_height']) ? ' size="'.$aoption['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
<option value="">Please select --------------- </option>
<?php foreach ($aoption['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['option_value_id']; ?>" <?php echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'data-image="'.$option_value['option_image_thumb'] .'" data-popup="'.$option_value['option_image_popup'] .'"' : ''); ?>><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
<?php } ?>
</option>
<?php } ?>
</select>
<?php } //end if select ?>
Code: Select all
<!-- GMO start copy of amended normal options -->
<?php foreach ($options as $option) { ?>
<tr>
<td>
<?php if($option['mode'] != "hidden"){echo $option['name']; ?>:<br /><?php } ?>
<?php if($option['mode'] == "select"){ ?>
<select name="option[<?php echo $option['option_id']; ?>][]"id="option[<?php echo $option['option_id']; ?>]"<?php echo $option['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['allowmultiple']) && $option['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['list_height']) ? ' size="'.$option['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['option_value_id']; ?>" <?php echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'onClick="getPreview(\''.$option_value['option_image_thumb'] .'\', \''.$option_value['option_image_popup'] .'\');"' : ''); ?>><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
<?php } ?>
</option>
<?php } ?>
</select></td>
<?php } //end if select ?>
Code: Select all
<!-- GMO start copy of amended normal options -->
<?php foreach ($options as $option) { ?>
<tr>
<td>
<?php if($option['mode'] != "hidden"){echo $option['name']; ?>:<br /><?php } ?>
<?php if($option['mode'] == "select"){ ?>
<select name="option[<?php echo $option['option_id']; ?>][]" id="option[<?php echo $option['option_id']; ?>]"<?php echo $option['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['allowmultiple']) && $option['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['list_height']) ? ' size="'.$option['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
<option value="">Please select --------------- </option>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['option_value_id']; ?>" <?php /*echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'data-image="'.$option_value['option_image_thumb'] .'" data-popup="'.$option_value['option_image_popup'] .'"' : ''); */?>><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
<?php } ?>
</option>
<?php } ?>
</select></td>
<?php } //end if select ?>
Code: Select all
<script language="javascript" type="text/javascript"><!--
function getPreview(image,popup){
$('#image').attr('src', image); //return a preview file
$('a.thickbox').attr('href', popup); //return a preview file
}
//--></script>
Code: Select all
<script language="javascript" type="text/javascript"><!--
$('select').change(function() {
getPreview($(this).children('option:selected').data('image'), $(this).children('option:selected').data('popup'));
});
function getPreview(image, popup) {
$('#image').attr('src', image);
$('a.thickbox').attr('href', popup);
}
//--></script>
Hope this helps people

Regards,
Aaron