Page 1 of 1

[How-to] Global Mega Options Image working IE7 and IE8

Posted: Sun Jun 12, 2011 5:09 am
by aaron1988
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:

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 ?>
Replace with 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']) ? '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 ?>
Now for the second part of the code find this:

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 ?>
Replace with this:

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 ?>
Now near the bottom of the page find:

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>
And replace with:

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>
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

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Fri Jul 29, 2011 12:25 pm
by pdmstudios
Which GMO is this for?

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Fri Jul 29, 2011 3:09 pm
by aaron1988
pdmstudios wrote:Which GMO is this for?
Well i used it on the latest but have looked at previous versions and the code looks the same :)., so should work for 1.4.9.3, 1.4.9.4, 1.4.9.5 and maybe below: 1.4.9.3 as i not checked below that version.

Kind Regards,
Aaron

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Sun Nov 06, 2011 3:07 am
by luizccm
Hello,
i have same problem in new version 1.5.1.3!!
There is some solution to new version??
Thanks,
Luiz

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Mon Nov 21, 2011 9:23 pm
by SiteE@se
Thanks for this very useful post - works a treat on 1.4.9.5. This has been perplexing us for quite some time :-)

Kind regards

Chris

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Tue Mar 13, 2012 12:16 pm
by kyllaz
Sorry for opening such an old topic.
I´m working on opencart 1.4.9.4 with global mega options installed.
I´m having the same problem and tried your fix but without sucess. The images in select mode changes in firefox, but in chrome and safari doesn´t work. I´ve tried contacting the seller of the extension but he even respond me :(
Hope that you guys here can give me a hint on how to fix this bug.

Best regards

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Thu Apr 12, 2012 6:00 pm
by hanuman
Hi

I'm not sure if this is what you're after exactly, but this mod allows you to use GMO text input fields to enter text which is displayed over product images. The images themselves are not GMO ones, though.

The mod's called Text Overlays For Images and it's an addon to an extension called Product Attribute Pictures. Works with both v1.4.x and 1.5.x.

you can see a demo here:

http://www.product-attribute-pictures.c ... demos.html

regards

Re: [How-to] Global Mega Options Image working IE7 and IE8

Posted: Wed May 16, 2012 6:56 pm
by aaron1988
Hi i not sure why your having issues, as it worked for me i am on latest version now and i have been using Q's mod Options Boost

Aaron