Image Swatch Selection

Posted By Tiggywiggler Thu 20 Oct 2016
Add to Favorites1
Author Message
Tiggywiggler
 Posted Thu 20 Oct 2016
Supreme Being

Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)

Group: Forum Members
Last Active: Mon 6 Dec 2021
Posts: 235, Visits: 750
In addition to the drop down and radio lists I am currently building an 'image swatch' control. In this you will see coloured images in the option area and when you click on one (say 'red') the image in the main image viewer will show alternate images against that option (so the main image view will show the product in red, if you have loaded those images).

I have laid the ground work and it is a major piece of work so I was wondering if there was any hunger for it or if I am wasting my time on something no one wants?


We are always willing to help out the community or pitch in to help you fix a problem. However, if you want a complete solution made such as a code module or new feature added you have two options. Either
1) Reach out to the Kartris internal development team at http://www.kartris.com/Contact.aspx.
2) Contact one of the Kartris approved partners at http://www.kartris.com/t-Worldwide-Developers.aspx.

Have fun and good luck coding.
shulemj
 Posted Thu 20 Oct 2016
Supreme Being

Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)

Group: Forum Members
Last Active: Thu 11 Jul 2019
Posts: 115, Visits: 565
I'd love such a feature. Just wondering, how would each option get mapped with the appropriate image?
Tiggywiggler
 Posted Thu 20 Oct 2016
Supreme Being

Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)

Group: Forum Members
Last Active: Mon 6 Dec 2021
Posts: 235, Visits: 750
There are a number of extra pages and modules required to make this work. Firstly, in the backend we now have the option type 'swatch'. When you create an option group as 'swatch', and then add the various options names such as Red, Blue, Green, etc. you have the ability to upload an image of the swatch. The swatch is the little image that will appear in the option group on the right hand side of the screen. This swatch can be reused for any product that has this option group against it. To achieve this there is now a new folder within ~/Images/ called ImageSwatches.

Then you need the images for each product. This is something I am working on now but there are lots of ways to do this. At present I am thinking about using the file name to separate the options out. At the moment you have a folder called ~/Images/Products/ and then in here a numbered folder for each product. e.g. Product 123 has a folder ~/Images/Products/123.

you can create a folder for each option group or whatever, but at present I intend to create an image structure that would look like this:

ps_123_1_2

for 'Product Swatch', 123 is the product number, 1 is the option group, and 2 is the option within that group.

When you select an image swatch the option controller will push it's selected value to the ProductView.ascx control and then within there I will need to have some code to lookup the correct images and display them as appropriate.

As I said, all in development, but I was looking to understand what people wanted if possible.

I will setup a demo site once I have the code correct and then people can view it. Thank you for your comment.


We are always willing to help out the community or pitch in to help you fix a problem. However, if you want a complete solution made such as a code module or new feature added you have two options. Either
1) Reach out to the Kartris internal development team at http://www.kartris.com/Contact.aspx.
2) Contact one of the Kartris approved partners at http://www.kartris.com/t-Worldwide-Developers.aspx.

Have fun and good luck coding.
shulemj
 Posted Fri 21 Oct 2016
Supreme Being

Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)

Group: Forum Members
Last Active: Thu 11 Jul 2019
Posts: 115, Visits: 565
IMHO, the solution sounds great, with elegant engineering. I also like the simplified underscore-separated image name structure.

I realize that this system will also allow multiple swatch sets per product (i.e. outer color and inner color). I would even extend this idea past color swatches, and implement on other option groups that are easily definable with a little icon, like round neck and v-neck with images respectively.

Just one comment: Don't forget to set if no image is uploaded for a certain option, to fall back to the previous image (main image, or last image displayed). I can even imaging site owners using the swatch feature without any different images per option.
Tiggywiggler
 Posted Fri 21 Oct 2016
Supreme Being

Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)

Group: Forum Members
Last Active: Mon 6 Dec 2021
Posts: 235, Visits: 750
Yes certainly, if there is no image available for that swatch then the main product image will be selected. My only confusion at the moment is how to handle compound selections. For example, if you have two swatch option lists for a single product, one is colour, and one is texture. The challenge is how to manage if someone selected 'Red', and 'Rough Pattern' how to show the red rough pattern.

I think that at the start you will be allowed a single swatch option group for a product, and I will manage compound selections at a later date.

Thank you for your comments Smile


We are always willing to help out the community or pitch in to help you fix a problem. However, if you want a complete solution made such as a code module or new feature added you have two options. Either
1) Reach out to the Kartris internal development team at http://www.kartris.com/Contact.aspx.
2) Contact one of the Kartris approved partners at http://www.kartris.com/t-Worldwide-Developers.aspx.

Have fun and good luck coding.
shulemj
 Posted Fri 21 Oct 2016
Supreme Being

Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)

Group: Forum Members
Last Active: Thu 11 Jul 2019
Posts: 115, Visits: 565
Good point.

Good luck and post demo when ready.
Tiggywiggler
 Posted Sat 29 Oct 2016
Supreme Being

Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)

Group: Forum Members
Last Active: Mon 6 Dec 2021
Posts: 235, Visits: 750
Hello,

So, progress so far is that we are able to load swatch information into the backend (via updated forms). Development that I just completed today was to create a new custom server control which looks like a list control (much like a radio button list or checkbox list) but works with image URLs. You can see the control below in the Visual Studio 'sample page' that is created with new web projects inside Visual Studio.

Now that we have this control completed it is a matter of integrating this in Kartris, and then we have to do the event bubbling so that the ProductView is updated whenever a swatch is completed.

Will keep you posted...

http://forum.kartris.com/Uploads/Images/23c8c363-f432-4f3e-bff9-5425.jpg


We are always willing to help out the community or pitch in to help you fix a problem. However, if you want a complete solution made such as a code module or new feature added you have two options. Either
1) Reach out to the Kartris internal development team at http://www.kartris.com/Contact.aspx.
2) Contact one of the Kartris approved partners at http://www.kartris.com/t-Worldwide-Developers.aspx.

Have fun and good luck coding.
shulemj
 Posted Sun 30 Oct 2016
Supreme Being

Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)

Group: Forum Members
Last Active: Thu 11 Jul 2019
Posts: 115, Visits: 565
Amazing. Keep it up.
Tiggywiggler
 Posted Mon 31 Oct 2016
Supreme Being

Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)Supreme Being - (116,160 reputation)

Group: Forum Members
Last Active: Mon 6 Dec 2021
Posts: 235, Visits: 750
I have now completed the viewing controls and most of the backend administration pages. There is now a demo site where you can operate the control and see what you think

Navigate to this site:


Sorry everyone, I have disabled this demo site since this link was posted.

The images are not the greatest in the world, but they demonstrate how the system operates, so you can at least review it. I will put up another demo site later on with decent images but this will do for now.

I have found a solution to having 'composite options' (e.g. colour and texture) but I have not implemented that into the demo site as I don't have pictures for that at all. Hopefully this is the sort of thing that people are after from this type of options control.

Have a play, let me know what you think, and if there are any improvements you can think of please let me know.


We are always willing to help out the community or pitch in to help you fix a problem. However, if you want a complete solution made such as a code module or new feature added you have two options. Either
1) Reach out to the Kartris internal development team at http://www.kartris.com/Contact.aspx.
2) Contact one of the Kartris approved partners at http://www.kartris.com/t-Worldwide-Developers.aspx.

Have fun and good luck coding.
Tue 11 Apr 2017 by Tiggywiggler
shulemj
 Posted Tue 1 Nov 2016
Supreme Being

Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)Supreme Being - (56,745 reputation)

Group: Forum Members
Last Active: Thu 11 Jul 2019
Posts: 115, Visits: 565
Works very nicely. Great add-on. Can't wait for the composite options implementation.

Similar Topics

Expand / Collapse

Reading This Topic

Expand / Collapse

Back To Top