Where to access Swatch Functionality?

[sfj]

Ok, basically here is what I have done so far:

When you upload an image, it resizes it (standard able commerce)
But, now keeps the original large image as well, and if you click on the image, it takes you to a LARGER (original) version of the same image.

This works perfectly, EXCEPT

When we are using swatches, lets say you change to a different color, it changes just the 'image' inside, where can I access this functionality, so I can modify the link the image is contained in as well, as this will have a large image that it should link to.

Thanks

I am actually having a bit of time locating this functionality.

SFJ

[mazhar]

1)- Edit Product
2)- From left nav select Option and Variants
3)- In the available options grid there will be a note pad symbol in front of each option
click the symbol for desired option
4)- On this screen you can add choices with swatches or can edit existing ones by clicking edit choices.

[sfj]

I am sorry, i may not have been clear - What I mean is that

the swatch calls some javascript (I presume) that replaces the img with ID (ProductImage) to have a different SRC, so if you click the red swatch it changes image, as well as recalculates quantity.

Where can i access the code that 'changes the SRC of the ProductImage Element.

I want to modify the LINK I have created around this image, so that i can change that as well (to the larger image)

Its custom functionality..

SFJ

(I hope this was clear).

SFJ

[mazhar]

Check the BuildProductOptions(Product product, PlaceHolder phOptions) function of App_Code/ProductHelper.cs file.

[sfj]

Ok, I checked it out - but

correct me if I am wrong, if I want to modify the image that is changing, I need access to the source code?

I looked at it, and many of the references I think that may be of help - seem to be in the ac framework, versus the code that uses the framework?

I have coded another solution in there for now, (not the ideal way) I wrap around the image control in the scriptlets, with an anchor tag that has inline jaavscript to take the SRC of 'ProductImage' and parse it into the name of the original file.

Any better ideas?

What I am basically trying to do is this:
http://shukronline.com/mg1501.html

When you click the main image, it takes you to the larger image - I want to retain this functionality for all images, wether additional images, or option images (swatch), so to do this, I ensured each time an image is added to AC, it retains the original image (and stores it as name_org.jpg/.gif/jpeg)

What do you suggest?

My solution works for now, but I am thinking there may be a better way.

SFJ

[mazhar]

Following is another post regarding additional images and may be helpful to you
viewtopic.php?f=42&t=7739
You can check its example running over here
http://www.firefold.com/HDMI-Male-to-DV ... 2C487.aspx

[sfj]

Thanks

That did clear that part up for me, but as mentioned earlier I already implemented it for the additional images

I am trying to sort it out for Swatch specifically (and i already have a solution in place, but its just 'bothering' me if I can't do it the right way LOL).

No worries though, and thanks for your help, I'll sort it out one day when I have some free time

SFJ

[bemara579]

Did you ever figure how to do this correctly?

[bemara579]

Here's another way of doing, but its still a workaround and ugly. Add the below code to the Page_Init of BuyProductDialog.ascx. Its overwriting the Javascript function OptionPickerClick that the swatch uses to fill the image in the ProductImage container. I left that part out in the new Javascript function, and made it create an image html element and place it under the option name.

Two reasons why this is ugly... first is if AbleCommerce makes any modifications to the OptionPickerClick Javascript function, the new changes won't be used and can possible cause a Javascript error in the future. Another reason is that the only reason why this works is because the sequential placement of this new Javascript function. AbleCommerce can decide to change the placement of this Javascript function which would cause this to not work at all.

There's a third reason why this is ugly... you have to change the method "public static Dictionary<int, int> BuildProductOptions(Product product, PlaceHolder phOptions)" in PageHelper too. You have to make the AutoPostback set to false for the Thumbnail postback part. If you don't do this, the option image will disappear since it does a quick postback and the option image does not persist to the page because Javascript created it before the post was made. This will not make you product price update if you have price mods on the options.

The cleanest way to do this is for AbleCommerce to overload the BuildProductOptions method and allow us to optionally pass a image control. If no image control is passed in, it uses the default ProductImage control (the assumption that got us here in the first place). If an image control is passed in, then the method updates the option image in that control. Passing a client ID of a control would work well too.

Any thoughts on this?

Code: Select all

#region BEGIN MOD
            string optionImgScript = @"
function OptionPickerClick(e, name) {
    var td = (e.target) ? e.target : e.srcElement;
    var optid = td.style.zIndex;			        
    document.getElementById(name).value = td.style.zIndex;
    var t = document.getElementById(name + 'Text')
    if (t.innerText != undefined) { t.innerText = td.title }
    else {t.textContent = td.title}
        
    var images = eval(name + '_Images');
    var optImgId = 'newOptionImgLoc' + optid;
    if ((images != undefined) && (images[optid] != undefined)) {
        if (!document.getElementById(optImgId)) {
            var newOptionImg = new Image();
            newOptionImg.id = optImgId;
            newOptionImg.src = images[optid];
            t.appendChild(document.createElement('br'));            
            t.appendChild(newOptionImg);
        }
        else {
            document.getElementById('newOptionImgLoc').src = images[optid];
        }
    }
}
";
            ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "OptionImgOverride", optionImgScript, true);
            #endregion