Forums (Obsolete)

Member

Tillotto - 1/27/2010 4:14:08 PM

Swatch Feature - colours for product options using the image

Hello,
I'm trying to amend the ProductOptionSelector to display the image that is uploaded
when a new Product Option is created, but I can't actually work out how to get at the option's image.
I think the option button is created in \App_Code\CMSModules\Ecommerce\ProductOptionSelector.cs using a call to LoadSKUOptions. I think LoadSKUOptions is only available with the source code?
If I can find a way to display the image that is recorded with a product option I could create a simple Swatch feature. This would be useful, for example, with clothing - create the colour options but also display a little graphic image of the actual colour with the radio button.
I understand how to get at the actual product document's information using the API/pathing but I can't find out what to use for the option's image. If someone could point me in the right direction for that then I could (possibly) write my own.
Many thanks,

Kentico Consulting

kentico_mirekr - 2/2/2010 2:02:51 AM

RE:Swatch Feature - colours for product options using the image

Hi,

The method which you have mentioned LoadSKUOptions is located in \App_Code\CMSModules\Ecommerce\ProductOptionSelector.cs file and it internally calls following method:

CMSEcommerce.SKUInfoProvider.GetOptionCategorySKUs(categoryId, where);

Please refer to our API reference:

http://devnet.kentico.com/downloads/kenticocms_api.zip

This method uses 'selectbyoptioncategoryid' query from CMS_QUERY table:

SELECT * FROM COM_SKU WHERE (SKUOptionCategoryID = @OptionCategoryID) AND (##WHERE##) ORDER BY SKUOrder

So, the resulting DataSet object from this method also contains SKUImagePath column from COM_SKU table which can contain path for product option image.

Generally, products and also product options are stored in COM_SKU table in database.

Best regards,
Miroslav Remias.


Member	Tillotto - 2/4/2010 4:22:49 PM RE:Swatch Feature - colours for product options using the image Many thanks, kentico_mirekr, I will look into this.


Member	Tillotto - 5/27/2010 2:59:30 PM RE:Swatch Feature - colours for product options using the image Hello, just to update you, I have implemented a swatch feature (for t-shirts and hoodies, etc) for a site and it is quite straightforward. Many thanks.

Member

Tillotto - 6/28/2010 6:14:48 AM

RE:Swatch Feature - colours for product options using the image

Hello,
see example at

http://www.slopeseeker.com/Where-To-Ski/France/Tignes/What-to-Wear/Ladyfit-Wings-over-Tignes.aspx.

there's a caching condition that I don't understand here. In Firefox, Opera and one or two others the background t-shirt image does not flicker when the swatch options are rolled-over. With IE there's the briefest message in the status bar that the image is being downloaded again, every time, and the graphic flickers. I can see that a piece of JavaScript is added by Kentico with a timeout value, but I don't know why, where it is applied nor how to change it.
Does anyone know if I can stop this repeated download?

Cheers,

Kentico Consulting

kentico_mirekr - 7/8/2010 9:10:43 AM

RE:Swatch Feature - colours for product options using the image

Hi,

I can see that you are generating somewhere links to your images in following format:

~/getmetafile/a52aad5f-955e-465f-a79a-2a983f7b6f35/defLTBlack.aspx

Then you are changing the URL in javascript changeGarmentBackground method.

Could you please try to generate resolved URLs with CMS.GlobalHelper.UrlHelper.ResolveUrl() method and then you do not need to change the URL in your changeGarmentBackground method.

I think that IE is then trying to download the image again, since the URL is changed. However, the image is not downloaded completely and it is just checked whether the image was modified - server returns code 304 (not modified).

Best regards,
Miroslav Remias.


Member	Tillotto - 7/12/2010 4:53:34 AM RE:Swatch Feature - colours for product options using the image Hello, thanks for the suggestion. I can see where my code is causing this - I've got an explicit reference to an image in the CSS and then the transformation sets up the rollover image names differently. I'll have a go at changing it. Cheers,


Member	radrez - 5/23/2011 2:45:51 AM RE:Swatch Feature - colours for product options using the image Hi, I am newbie to Kentico, I can't find any solution or posibility to add image to product option. Now I see solution on your pages http://www.slopeseeker.com/. Do you have published anywhere how you add image to CartItemSelector? Thank you, Radek

Kentico Consulting

kentico_mirekr - 5/26/2011 1:11:12 AM

RE:Swatch Feature - colours for product options using the image

Hi,

Product option is special type of product, but still, you can have image for product option as well as for product. Product options as well as products are stored in COM_SKU table in database and by default, product image paths are stored in SKUImagePath column for each record in this table, so when editing your product option in UI of Kentico CMS, you can either upload or select some image to be associated with your product option.

What you need to do in order to display your product option images is to modify ProductOptionSelector control for this purpose:

~\CMSModules\Ecommerce\Controls\ProductOptions\ProductOptionSelector.ascx.cs

In LoadSelector method in this file, you can check type of the product option category (in this case I’m modifying CheckBoxesHorizontal layout) and then for each product option (product) you can get image path and display the image according your needs. Example:

        switch (this.OptionCategory.CategorySelectionType)
        {
            case OptionCategorySelectionTypeEnum.CheckBoxesHorizontal:

                LocalizedCheckBoxList boxListHorizontal = (LocalizedCheckBoxList)this.SelectionControl;
                foreach (ListItem item in boxListHorizontal.Items)
                {
                    if (item != null)
                    {
                        SKUInfo sku = SKUInfoProvider.GetSKUInfo(ValidationHelper.GetInteger(item.Value, 0));

                        if (sku != null && !string.IsNullOrEmpty(sku.SKUImagePath))
                        {
                            item.Text += " <img alt=\"" + sku.SKUName + "\" src=\"" + UrlHelper.ResolveUrl(sku.SKUImagePath) + "\" width=\"50\" height=\"50\" />";
                        }
                    }
                }
                break;
        }

I hope this will point you to right direction.

Best regards,
Miro Remias.


Member	Derek - 12/18/2013 10:40:06 AM RE:Swatch Feature - colours for product options using the image Hi, From the products options and their images being returned upon load, how can I access them from a transformation? I am displaying other information about a product using a basic repeater, but I need to also display images of all product options. Thanks!

Certified Developer 13

kentico_josefd - 1/2/2014 10:44:25 AM

RE:Swatch Feature - colours for product options using the image

Hi Derek,

You can show the product option images based on the current node SKUID using a SQL Data Source and a Basic Repeater.

First, place the SQL Data Source web part and use this query to return all related product options:

SELECT * FROM COM_SKU WHERE SKUOptionCategoryID IN (SELECT SKUOptionCategoryID FROM COM_SKUOptionCategory WHERE SKUID = '{%currentdocument.nodeskuid%}')

Then, place a Basic Repeater web part, filling the SQL Data Source control ID into the Data source name property.

Afterwards, create the following example transformation in:

CMS Site Manager -> Development -> Document Types -> E-commerce - Transformations -> Transformations -> New transformation

<%# Eval("SKUName") %>:<br />
<%# EcommerceFunctions.GetProductImage(Eval("SKUImagePath"), 140, Eval("SKUName"))%>
<hr />

Finally, select this transformation it for the Transformation name and Selected item transformation properties of the Basic Repeater web part.

Let me know if you need any more help.

Regards,
Josef Dvorak