Trouble assigning images to options

[cqpbert]

First let me say I am SO excited to be able to assign images to options now in version .10

But I am having problems. I see after I save the products an image icon appears in the option list. when I click the icon it opens another popup window telling me to choose the image by clicking the small + in the picture name. When I do this the popup goes away. The image icon remains as an icon. (I thought it would show the image here) when I test it nothing happens. it is as if the image has not been selected or assigned.

Am I doing something incorrectly here?

Also, can we assign an image to an option in an option set so it gets updated through out the site like when we add an attribute to the set? In other words I have an option set that is all my available colors. It would be great if I could assign color swatches to them in the option set. Then when I assign the option set to a product all the images will be assigned too?

[bsmither]

Something about the new code in admin.js is not working right.

It is not working for me on CubeCart Ltd's demo site, either.

[cqpbert]

Oh I am sad to hear this.

But I assume they will fix it up right quick. This feature will propel CC way ahead of where it is for sure!!

I for one can't wait. I already have half my site redesigned in my head just because of this 1 feature!!

[bsmither]

Please try this edit:

In the admin skin javascript file admin.js, starting near line 1100:

Find:

$(".choose_option_img").on("click", function(a) {
    var opnr = window.open('?_g=filemanager&mode=fck&source=options','chooser','toolbar=no,menubar=no,width=600,height=600');
    var selector = $(this);
    var assign_id = selector.attr("rel");
    opnr.addEventListener('message', function(event) {
        $('#option_image_id_'+assign_id).val(event.data.image_id);
        $('#option_image_preview_'+assign_id).attr('src',event.data.path);
        $('#remove_image_id_'+assign_id).show();
        $('#selector_image_id_'+assign_id).hide();
    });
});
$(".remove_option_img").on("click", function(a) {
    var assign_id = $(this).attr("rel");
    $('#option_image_id_'+assign_id).val(0);
    $('#option_image_preview_'+assign_id).attr('src','data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
    $('#remove_image_id_'+assign_id).hide();
    $('#selector_image_id_'+assign_id).show();
});

$("a.select").on("click", function(a) {
    var t = $(this).attr("href"),
        i = $(this).attr("rel"),
        e = $("#ckfuncnum").val();
    if($(this).hasClass('options')) {
        a.preventDefault();
        window.parent.postMessage({path: t, image_id: i}, "*");
        window.close();
        return;
    } else {
        return window.opener.CKEDITOR.tools.callFunction(e, t), window.close(), !1
    }
}), $("#discount_type, .lineprice").on("change", function() {


Change to:

$(".choose_option_img").on("click", function(a) {
    var opnr = window.open('?_g=filemanager&mode=fck&source=options','chooser','toolbar=no,menubar=no,width=600,height=600');
    var selector = $(this);
    var assign_id = selector.attr("rel");
    window.addEventListener('message', function(event) {
        $('#option_image_id_'+assign_id).val(event.data.image_id);
        $('#option_image_preview_'+assign_id).attr('src',event.data.path);
        $('#remove_image_id_'+assign_id).show();
        $('#selector_image_id_'+assign_id).hide();
    }, { once:true} );
});
$(".remove_option_img").on("click", function(a) {
    var assign_id = $(this).attr("rel");
    $('#option_image_id_'+assign_id).val(0);
    $('#option_image_preview_'+assign_id).attr('src','data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
    $('#remove_image_id_'+assign_id).hide();
    $('#selector_image_id_'+assign_id).show();
});

$("a.select").on("click", function(a) {
    var t = $(this).attr("href"),
        i = $(this).attr("rel"),
        e = $("#ckfuncnum").val();
    if($(this).hasClass('options')) {
        a.preventDefault();
        window.opener.postMessage({path: t, image_id: i}, "*");
        window.close();
        return;
    } else {
    return window.opener.CKEDITOR.tools.callFunction(e, t), window.close(), !1
    }
}), $("#discount_type, .lineprice").on("change", function() {

You should then force your browser to load fresh page resources. This is usually done with CTRL-F5.

It should now behave as expected.

What may not be immediately obvious is that, just like clicking the black picture icon will open the Image Picker window, clicking on the new image showing will also open the Image Picker window to change the image. Or click "Remove" to blank out the image for that option. It is not immediately obvious because it takes a second or two for the mouse-hover tooltip to display with the hint on what to do.

[bsmither]

Unfortunately, there is still a problem with getting the Option Image to show in Foundation.

 

[bsmither]

These edits in the Foundation skin is working (mostly) for me.

/skins/foundation/js/2.cubecart.js

Near line 443, find:

$('img#product_image').attr('src',product_image);

Change to:
$('img#img-preview').attr('src',product_image);

/templates/element.product.vertical_gallery.php

Near line 26, find:

<a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} id="product_image" title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>

Change to:

<a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>

Near line 29, find:

<div data-clearing><a href="{$PRODUCT.source}"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} id="product_image" title="{$PRODUCT.image_tags.medium.title}"{/if}></a></div>

Change to:

<div data-clearing><a href="{$PRODUCT.source}"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a></div>

/templates/element.product.horizontal_gallery.php

Near line 15, find:

<a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} id="product_image" title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>

Change to:

<a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a>

Near line 17, find:

<div data-clearing><a href="{$PRODUCT.source}"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} id="product_image" title="{$PRODUCT.image_tags.medium.title}"{/if}></a></div>

Change to:

<div data-clearing><a href="{$PRODUCT.source}"><img src="{$PRODUCT.medium}" alt="{if isset($PRODUCT.image_tags.medium.alt) && !empty($PRODUCT.image_tags.medium.alt)}{$PRODUCT.image_tags.medium.alt}{else}{$PRODUCT.name}{/if}"{if isset($PRODUCT.image_tags.medium.title)} title="{$PRODUCT.image_tags.medium.title}"{/if} id="img-preview"></a></div>

The problems left to solve is that, after selecting an imaged option, then selecting a non-imaged option, the image from the imaged option remains. For example, selecting "Red" shows a red swatch, but "Blue", with no image, still shows the red swatch. Ideally, selecting an option with no image would restore showing the product's primary image. As a practical matter, all options of a group would have had respective images assigned, so this anomaly would not be apparent.

Also, option combinations aren't part of this feature enhancement.

Also, an option's image will only be shown when one changes to that option choice. So, for a set of radio buttons where one of the choices is pre-selected (as a default choice), there will be no image from that option, or any of the option choices, displayed. (By default, anyway, the product's primary image is what is displayed on arriving at the Product's page.)

 

[cqpbert]

Thank you for your hard work on this. I have not tried the edits yet as I was hoping the issue would be fixed and a new release would be out. I guess that is not going to happen until a few hours after I use your fix. LOL

So Today I am working on it.

I try not to do too much fixing/customizing of the code so that I can follow all upgrades without any troubles. But this is too big a feature to not take advantage of.

[cqpbert]

I am not sure what I have done wrong, this still does not seem to work. I have even rebooted my puter. I assume somehow I am not able to "reload resources" I am off to find how to do that. On my laptop I have to press Fn button to get to function keys. When I hit Shift+Fn+F5 I get something that looks like it wants to record something likw a macro or something. I should say I am on Firefox.

WORKS PERFECT!!!

I had to use CTRL+Fn+F5

Now the images work as described by bsmither.

I will say this is a bit tedious and hope it gets fixed in the source soon. But until then bsmither is always awesome!!!