Create a color switcher in magento • inchoo
Upcoming SlideShare
Loading in...5

Create a color switcher in magento • inchoo






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Create a color switcher in magento • inchoo Create a color switcher in magento • inchoo Document Transcript

  • Create a Color Switcher in Magento • Inchoo Home Blog Magento WordPress Online Marketing Mobile development Tools & Frameworks Fun & Events Portfolio Magento Services Inchoo Contact Get the most out of Magento Over 140,000 people searching for Magento related solutions end up on this site every month. See what we offer and discover why. HomeBlogE-CommerceMagentoExtensionsCreate a Color Switcher in Magento Create a Color Switcher in Magento 27th NOV 2012 | Posted by Zvonimir Buric in Extensions, Frontend, Magento, Products Magento comes packed with a lot of options. But, no matter how many options you put into some product, you can never cover all of them. One of such options (for now) is a color switcher in Magento. To be more precise, an image switcher based on color selection. The idea is to have a dropdown box from which you choose a color, and, based on the color you selected, product image changes. This should be based on some simple JavaScript (in my case, jQuery). Firstly, you need to upload some images to your product and give them some meaningful names like Red, Blue, Green depending on your product color. When I say give them name, I mean label values. Same1 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo goes for creating custom attribute. Simply create a dropdown selection box and create the same amount of dropdown options as you have images, giving them the same name Red, Green, Blue, etc. Here are some images for you to see what I’m talking about: After this is done, we go to the code part. You need to modify your /template/page/html/head.phtml file to include the jQuery script (or any other if you can code the same logic into it) and write down few lines of JavaScript to do the switching (you can download my version of file here head.phtml). The final step is to modify the /template/catalog/product/view/media.phtml file to grab all of the product images and dump them into some div. Here is my sample (media.phtml) so just copy and paste the code. And some additional screenshots for you to see final result:2 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo After some additional styling you can get some impressive results for this. Hope you find it useful. You can see how it works in a video bellow:3 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo Note! This article was revised on Nov 27, 2012. You will notice that some of the comments are older. This is because the original article was posted in 2008 by Branko Ajzele. 34 Top Enjoyed this post? Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends! 23 Tweet 6 Like 2 Author4 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo Zvonimir Buric Backend Developer Zvonimir works in the Havana team. He is back-end Magento developer. Other posts from this author Related Posts Kapitol Reef :: Magento store with 1 product Adding product image lightbox effect using jQuery plugin (a better way) Building a “Facebook Like” button extension for Magento in 15 minutes Listing out Previous/Next products in Magento (Inchoo_Prevnext extension) Getting selected simple product id in configurable product on client side. Discussion 34 Comments Add Comment 1. Sensi 13-10-2008 at 1:26 | # Thank you very much. Following your tutorial -and learning jQuery- I have made a case-insensitive script that works great while keeping the zoom and the “more views” default functions (but when you click on them with javascript enabled their image fade in within the zoom, rather than in a popup window, and a relevant label -e.g.: Color : Blue- is displayed underneath). The script search for the Color term [$this__(Color)] in an array made of the terms found in the select label/title in order to get ride of the hard coded/dynamically created select id, instead it add a class to the select if the color term is found. I have now just to add some reset/dynamic selection for the form/select, turn the script into a module, and I may be able to get ride of the configurable products for my current project. Thank you again. =) 2. Andrea 21-10-2008 at 16:53 | # I wonder if the color switcher change the core of Magento. I am not programmer, so I don’t want to have problems on any upgrade if I put the code and alter the functions. Thank you very much 3. Andrea 27-10-2008 at 15:49 | #5 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo Do you know how to build color squares to change the image instead of dropdown menu? 4. cooee 28-10-2008 at 11:04 | # Hi there, I like your approach to the problem, however, hardcoding the name of the into the bit of Javascript into head.phtml does not seem to be a good solution. Whenever one adds another product and applies custom options, the name will change. 5. Emilie 03-11-2008 at 16:53 | # nice tutorial. it’s seems to work perfectly. but what’s about number of #select ? how can i use this function with different products ? 6. cooee 07-11-2008 at 12:00 | # Hi there, I think I figured it out: 7. Justin 12-11-2008 at 12:24 | # Hi – great post/tutorial. I’ve got this all working, but here’s what I would really love to do with this:- 1. User selects “Style” drop-down option and the image is updated to show the chosen style 2. User then selects “Color” (just like in this tutorial) and the previous “Style” image is then updated with the chosen color (overlayed, possibly). Really what I’m asking is for a way to get multiple drop-down selectors to interact in terms of updating the image. Can you see this as being possible? If so, I would love to learn how to do it! 8. Pingback: Magento Themes Tutorial » Blog Archive » Magento Color Swatch Tutorial6 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo 9. oakRunk 13-12-2008 at 9:56 | # I second what Justin says =) I’m currently trying to adapt a solution that will work on configurable products…even if it is only the color attribute as opposed to style. Thanks for posting this – it gives me some hope that I may soon come up with (or simply find) a solution. 10. saturn185 14-02-2009 at 14:42 | # Color Swatches are implemented and available for buying here /color-swatches-magento-extension.html 11. MathieuF 16-03-2009 at 3:56 | # Hi, I’m currently setting up magento and this feature is a must for us. I got it to work with your great tutorial. One downside, we’re setting up a French/English site and labels are not a good option as Black is Noir in French. You have a solution to this by any chance ? Thanks again! 12. MathieuF 16-03-2009 at 4:00 | # stupid me… add the image twice with 2 labels! haha… getting late 13. Twinkle 15-04-2009 at 8:39 | # Hi,7 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo You script has helped me a lot. Good one. Thanks a lot. 14. GoshaDole 17-04-2009 at 0:35 | # Hi, I was wondering if there was any way to bring back the default product image (.show) when you select choose option from a dropdown. 15. Gui 22-05-2009 at 1:33 | # Excellent tutorial, thanks! 16. Matt 04-06-2009 at 18:07 | # GoshaDole: Here is how to bring the defaul image back: // Show the image based on selected value // Whatch out, case sensitive… if(optionValueText == “Choose option…”) { jQuery(“#productImgDefault”).show(); } else { jQuery(“#productImg” + optionValueText).show(); } 17. Jon 30-09-2009 at 15:47 | # Very helpful Magento Tip. Thanks 18. billy 16-10-2009 at 10:17 | #8 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo there is a little problem here. in the media.phtml file, the default img tag id is defined as fixed. it’s called ‘productImgDefault’. so, if my default img label is not named with ‘default’, the img can not be shown. 19. Patrice 24-10-2009 at 18:31 | # I try this mod but where is the other image for (alternative view) it seem to be desapeared…. 20. charismeki 09-12-2009 at 18:35 | # Hi at all, thanks for the description! it works well so far. but how to take over a different colour than the default simple product image one into the shopping cart? I have jquery installed and i do not have any idea how to do this. any tips are welcome. even how to get the colour id or information for the respective t shirt model. i have not found any hint in all the boards. thanks and best regards, c– 21. Stefan 04-02-2010 at 14:56 | # Thanks for the information, I’ll need this soon and then I’m going to find out if it still works. If it doesn’t work, thanks anyway, maybe you’ve set me on the right track. 22. Ardin Furniture 14-05-2010 at 17:47 | # thanks Magento (ver. 23. Tom 01-07-2010 at 12:10 | #9 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo Hi Branko, Could you please fix the problem with the screencast stopping? Thanks, Tom 24. JUAN 03-07-2010 at 1:26 | # Hello all, I finally got this to work following the instructions… but the problem I’m running into is when I set a different price for the different colors, the photo doesn’t show anymore. It seems like since the photo swap is related to the name, when you increase the price through the custom options it adds the price to the end of the tag name and the code can’t find a photo related to it. Have any of you ran into this issue, any solutions? Thanks, Juan. 25. chonkton 28-09-2010 at 20:10 | # Hello. Yes, I need this for 1.4. Every solution I’ve tried doesn’t work. Has anybody got any ideas? 26. Ankit Jadav 19-11-2010 at 12:36 | # Thanks for the solution. But I am getting a different id for the color option drop-down for different products. 27. saurabh 31-03-2011 at 7:19 | # Really Thanks a lot..!! 28. LEx10 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo 18-07-2011 at 15:43 | # This lets you change the image depending on your selection in drop-down. Ideally, it also needs to do the opposite, i.e. change the selection in the drop-down when you select a thumbnail image. 29. sonatasky 19-07-2011 at 11:51 | # This is all fine, but since I’m not a programmer,I found one for myself here 30. LEx 19-07-2011 at 12:54 | # For sure, if you can’t program then you have few options. Temgra’s extension looks great but the main issue I have with it is that it loads each image via Ajax, which mean’s that when you click on a thumbnail there is a delay until the image has loaded (for me it was around 5 seconds). People just don’t wait that long. 31. Partytentlover 07-12-2011 at 9:50 | # Hi all, We are rebuilding our website to Magento and i have strucked on a problem. I want to create a group bundle for simple products but they need to choose a color within the groupbundle. Is this possible within Magento? 32. Kaushal 22-10-2012 at 10:33 | # Hello Branko Ajzele, I have done it quite perfectly. Working here very nicely. Thank you for putting this post. I really appreciate your stuff, your thinking.11 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo 33. Toni Anicic 28-11-2012 at 8:43 | # Hey everyone, the post is now updated and works with latest version, cheers! 34. oracle 30-11-2012 at 6:03 | # Is that anyone tell me below method of magento stored in which file ? setCheckoutState() Add Your Comment Name (required) Email (required) Website Your Comment Notify me of followup comments via e-mail Please wrap all source codes with [code][/code] tags. Top Search and you shall find... Refine Posts by News29 Starting up35 Marketing21 Products35 Search9 Frontend72 Checkout13 Administration39 Configuration20 Email13 Upgrading812 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo Orders21 Payment8 Shipping7 Extensions66 MVC9 Events & Observers8 Programming104 Database20 Debugging34 Integration25 Design11 Magento GO2 We can make your store more efficient Have a chat with our Magento Consultants. You would be surprised how small changes can make your business even more successful. Learn more Get a quote Hire Magento Developers Teams of certified Magento developers are available to work on your next big thing! Hire Magento Developers Get a quote Our Latest Project Australian Gifts Magento Consulting, Magento Development, Magento Custom Design See our work13 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo The Inchooers Meet The Inchooers, the funny bunch of magento developers. Archive New Comments oracle on Create a Color Switcher in Magento: Is that anyone tell me below method of magento stored in whi... Qaisar Ashfaq on Related products, Up-sells, Cross-sells in Magento: Hi, any one know how could i display recipes(in food website... swapnil kene on Merging JavaScript in Magento: what if the js file size goes approximately 700KB(after merg... Mamta on How to set multiple websites with multiple store views in Magento: is it same for magento 1.7 ? not working inmy case as m usin... Sarvagya on How to generate your own reports in Magento: Hi , i am trying to generate reports of transactions page an... Josh Frank on Changing default category sort order in Magento: Is there any way to change the name of "best value" to somet... Brett Adams on Delete test orders in Magento: Thanks for the script, it worked perfectly in ver. ... 4826 Followers Follow us N/A Readers Subscribe 2199 Likes Find Us14 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo 394 Followers Follow Us 378 Subscribers Subscribe Last Tweet @designtodevelop fun times :D Blog Categories Magento WordPress Online Marketing Mobile development Tools & Frameworks Zend Fun & Events Services Magento Consulting Magento Design Magento Development E-commerce Consulting E-commerce SEO E-commerce AdWords Get a Quote Its fast and easy, just tell us a little bit about your project Name (required) Email (required) © Inchoo webappsolutions - Sitemap Our Commitment Since we’ve been with Magento from its very beginning, we built a very distinctive knowledge of it. Besides being an Accredited Silver Partner, we now have ten of our Developers officially Certified by Magento. In short, it means cost-efficiency and a high-quality project outcome.15 of 16 01-12-12 01.18
  • Create a Color Switcher in Magento • Inchoo 11x16 of 16 01-12-12 01.18