Thursday, October 31, 2013

Easylife Switcher extension

I've just released a new Magento extension called 'Easylife_Switcher'.
This is what it does:
  • Frontend:
    • it can change the configurable products dropdowns to text or image labels
    • it allows you do display the out od stock combinations of configurable products with a "not available" overlay (see image above - medium size). The out of stock products may be selectable or not. Your choice.
    • it can change the main image in the product page when a combination is selected, if an image is available for the simple product. You can set the attributes that change the image.
    • it can change the full media block in the product page when a combination is selected, if at least the main image is available for the simple product. You can set the attributes that change the media section.
  • Backend:
    • it allows you to set a default configuration to be selected while accessing the configurable product page.
Code and more details on how to use can be found here:


  1. Hello Marius,
    this extension looks cool but how to install it?
    Just uploading files?


    1. You can download an archive with the code from github and copy the files of the extension over your magento instance. Make sure that the app folder goes over the app folder of magento. js over js and skin over skin. Nothing should be overwritten.

    2. wow, works wonderfully.

      any chance to have switchers unselected when entering a product page?
      or why not keeping the first select element ( "choose ... ") as a switcher-label and position it absolutely outside of the page so we can basically workaround the auto selection and have nothing visible selected?

      have a nice day

    3. I don't have a reason for that. It seamed more appropriate to do it like that. Feel free to change the extension as you want and even publish your changes. If you want you can even make a pull request on github with your modifications and I will merge them in the extension after testing.

  2. easylife switcher colour switcher using image and more image change not change

  3. Hi Marius, great work. I have one question: Is it possible to make your module work with cloud zoom? Currently cloud zoom is not triggered/working on dom ready but only after selecting a "image changing" attribute, e.g. color, in other words it only works after reloading the media block. I tried reinitializing cloudzoom in your module's callback function with CloudZoom.quickStart(); in the backend config but it did not work.

  4. In addition to my previous comment, I resolved the issue modifiying the configureForValues function in product.js, setting both variables to true. Hope this helps someone!

  5. Hi Marius, thanks for the awesome extension. Just a quick question, I cant seem to set the default simple product in admin, each time I save it disregards it and no default is saved.. I saw that I did have default_configuration_id so I uninstalled and ran the sql queries, then re-installed and renamed the value in data.php but the problem persists.. any ideas?

    1. Hello Julia. I can confirm that this is a bug. It seams that you cannot save the default configuration when CREATING a configurable product. But you can save it when UPDATING one. I will fix this a soon as possible. Until then you can just save the product then edit it again and set the default configuration.

    2. Hello Marius, I'm having the same problem, only that I'm not able to get the option saved even when updating a configurable product... any ideas?

    3. This issue should be fixed in the new versions. Make sure you upgrade to the latest version.

  6. Hi Marius,
    That was really nicely explained short and straight-forward... looking forward to get more hints from your blog

  7. Hi Marius, I have installed this extension but am wondering if it is possible add the function to the page such as when people select the color Red, on the selection title where it would say "Color * " would now say "Color: Red" . This is like what Amazon does on their configurable products. Same to other such as "size" and "style", etc.

    Also on the side note, not sure if it is this extension or others, I keep getting the warning "Blocks HTML output" is invalidated, refreshing it only last minutes until another warning come up. Just a note.

    1. Your request is kind of specific. I don't think it will add a big value to the extension itself. Sorry but I will not implement it. But you can try to do it yourself. Check the `js/easylife_switcher/product.js` file. Inside it there should be a method called `selectValue`. That one is called when selecting an option from the configurable attributes. You need to inject you js that would add something to the label.

      As for the blocks output, I don't think the extension is responsible for this. But there is one way to find out. Disable the extension and see if the problem reproduces.


  8. Aha! This is what I've been looking for ... but for one thing. It would be perfect if when an out of stock item was selected, the "In Stock" label changed to "Out of Stock" and the "Notify me when back in stock" link appeared for the out of stock product. Thanks for your great work, all the same..

    1. Hey Chris. I'm glad you enjoy the extension and it is useful for you. About the stock notification....I had this discussion with someone before and the conclusion was that I will not implement it. :) . Here are the reasons why. Main reason is that usually when dealing with configurable products, the simple products are not visible. And if you subscribe to a stock alert, when the product comes back in stock you get an e-mail with a link to the product page. But if that product is not visible you get a 404 page. I don't want to rewrite the stock alerts behavior. And even if I did, and checked if the simple product that comes back in stock is a part of a configurable product I still wouldn't know where to point because in theory a simple product can be a child of more than one configurable product. Too much work for a small added value. Sorry for disappointing you but I won't add this feature to the extension. but feel free to fork the extension, add this feature and redistribute it as your own.

  9. Hi tzyganu, thank you so much for this extension, it is appreciated.

    Please if you can help me with something.

    I have installed it and all works great apart from one thing for me, the main image does not change when I select a color thumbnail, do you know why that is?

    This is what am having trouble with working:
    "it can change the main image in the product page when a combination is selected, if an image is available for the simple product. You can set the attributes that change the image."

    Please help!

    Thanking you in advance.

    1. In order for the image to change, you need an image attached on the simple product. Let's say you have a configurable product by color with 2 options. Red and Blue. For them you should have 2 simple products. One for red and one for blue. Each of them should have images attached corresponding to the color. And in the config section of the module you have to select the image attribute that will be used for switching images (image, thumbnail, small_image)

    2. Hi tzyganu,

      Thank you ever so much for the prompt response.

      Still having trouble am afraid, please see what I have done and let me know if I followed the procedure right.

      1. I created a configurable product with the color attribute with style options, Style 1, Style 2 etc (I added images to to the main configurable product).

      2. I created "quick simple products" and attached the images (renamed them to Style 1 and Style 2) to each one selecting all store views for each image that the front end user will have the option to click and therefore change the main image.

      3. The images appear at the front end but when I click them, the main image does not change (I do have cloudzoom).

      "Each of them should have images attached corresponding to the color." Do you mean the images should be renamed to Red and Blue and then each uploaded to each simple product?

      Also - "in the config section of the module you have to select the image attribute that will be used for switching images (image, thumbnail, small_image)" You mean in the Easylife switcher (I do not see an option here for it) or the configurable product image settings?

      In the back end of the Easylife switcher, I have the following options set:

      1. Use this image attribute: Base Image
      2. Switch product images: Switch Main Image
      3. Dom selector for main image: $('image-main')
      4. Main image size: BLANK (Nothing entered)
      5. Js Callback after main image change: code to kill and reload zoom

      Apologies for the hassle and "noob" questions, however, I really like this extension and want to get the switcher part to work.

      Kindly advise whether I have done everything right and could be something else interfering with the extension.

    3. What you did so far looks ok. You don't need to rename images. You should revert to the default theme and see if the problem reproduces. If not then there is an issue with your theme. Here is what I would do. First thing, check if the main image has the id 'image-main' as entered in the config field 'Dom selector for main image', If not, then adjust this setting to match with the dom selector for your main image. Then I would disable cloud zoom to see if that conflicts with the extension.

    4. Zoom seems not to conflict with the extension as I disabled it and tried and still no switching.

      tzyganu, where would I check if the main image has the id 'image-main' as entered in the config field 'Dom selector for main image'? Is this information located within "product/view/media.phtml"?


    5. Hi tzyganu,

      I have looked all day and all over google and I can't seem to get my head around the below so would appreciate your input:

      Can you please help me how to find or where to check "if the main image has the id 'image-main' as entered in the config field 'Dom selector for main image'"?

      Please reply when you have a moment as I think this is what causes the image not to change.

      Thank you for all your help thus far.

    6. Check the html id attribute of the main img tag. If it's not 'image-main' then you have to modify the value from system configuration from $('image-main') to $('your img id here').

    7. Hi tzyganu,

      I found the image id and it is "image" and it still did not switch, however when I reverted to the default theme as you advised the switch worked!

      Am now wondering what file I would need to look at in order to make it work with easylife switcher, am speculating it should be one file in the theme that requires the attention.

      If you are able to point me at the right direction of where i need to look then that would be awesome.

      If not then I would understand.

      Please let me know if there is somewhere to donate for your extension and would be happy to do so.

      Thank you for responding to all my previous questions, it is appreciated.

  10. Hi, nice job. It was very helpfull. Just images dont change when i change attribute value, i had installed image switcher before maybe it makes conflict?
    olso i would like to know how can i display colors instead of names of colors ?

    thanks for the great extesnion!

    1. Try disabling the other image switcher extension. Maybe it conflicts. Also , see the post above for how to make the image switch work. As for colors, instead of names, just edit the attribute color in the backend. You will see new tab in there, where you can add for each option an image or a color code. Add a color code for each option and save.

  11. Maybe it conflicts with zoom because when i changed settings to switch all media section the zoom doesnt work.

  12. Hi
    thanks for good extension.
    but only one problem, the add to cart button show for all out of stock products in configurable product page (main product , related products , up sell products)

    1. Yep. This looks like a bug. can you post it here so I won't forget :). I will fix it in the next version.