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

[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

[pdmstudios]

Which GMO is this for?

[aaron1988]

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

[luizccm]

Hello,
i have same problem in new version 1.5.1.3!!
There is some solution to new version??
Thanks,
Luiz

[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

[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

[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

[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