Image Swatch Selection

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.

Author	Message
Tiggywiggler	Posted Thu 20 Oct 2016
Supreme Being Group: Forum Members Last Active: Mon 6 Dec 2021 Posts: 235, Visits: 750 120,318	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.
	REPLY QUOTE LIKE 423
shulemj	Posted Thu 20 Oct 2016
Supreme Being Group: Forum Members Last Active: Thu 11 Jul 2019 Posts: 115, Visits: 565 58,719	I'd love such a feature. Just wondering, how would each option get mapped with the appropriate image? Tags image, option, Option Groups
	REPLY QUOTE LIKE 390
Tiggywiggler	Posted Thu 20 Oct 2016
Supreme Being Group: Forum Members Last Active: Mon 6 Dec 2021 Posts: 235, Visits: 750 120,318	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.
	REPLY QUOTE LIKE 373
shulemj	Posted Fri 21 Oct 2016
Supreme Being Group: Forum Members Last Active: Thu 11 Jul 2019 Posts: 115, Visits: 565 58,719	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.
	REPLY QUOTE LIKE 400
Tiggywiggler	Posted Fri 21 Oct 2016
Supreme Being Group: Forum Members Last Active: Mon 6 Dec 2021 Posts: 235, Visits: 750 120,318	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 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.
	REPLY QUOTE LIKE 365
shulemj	Posted Fri 21 Oct 2016
Supreme Being Group: Forum Members Last Active: Thu 11 Jul 2019 Posts: 115, Visits: 565 58,719	Good point. Good luck and post demo when ready.
	REPLY QUOTE LIKE 385
Tiggywiggler	Posted Sat 29 Oct 2016
Supreme Being Group: Forum Members Last Active: Mon 6 Dec 2021 Posts: 235, Visits: 750 120,318	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... 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.
	REPLY QUOTE LIKE 366
shulemj	Posted Sun 30 Oct 2016
Supreme Being Group: Forum Members Last Active: Thu 11 Jul 2019 Posts: 115, Visits: 565 58,719	Amazing. Keep it up.
	REPLY QUOTE LIKE 376
Tiggywiggler	Posted Mon 31 Oct 2016
Supreme Being Group: Forum Members Last Active: Mon 6 Dec 2021 Posts: 235, Visits: 750 120,318	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. Edited Tue 11 Apr 2017 by Tiggywiggler
	REPLY QUOTE LIKE 371
shulemj	Posted Tue 1 Nov 2016
Supreme Being Group: Forum Members Last Active: Thu 11 Jul 2019 Posts: 115, Visits: 565 58,719	Works very nicely. Great add-on. Can't wait for the composite options implementation.
	REPLY QUOTE LIKE 360

Image Swatch Selection

Image Swatch Selection

Similar Topics

Reading This Topic