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
      config
    • 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.
      backend
Code and more details on how to use can be found here: https://github.com/tzyganu/Switcher

72 comments:

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

    Thanks

    ReplyDelete
    Replies
    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.

      Delete
    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

      Delete
    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.

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

    ReplyDelete
  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.

    ReplyDelete
  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!

    ReplyDelete
    Replies
    1. hello Ben,
      I've got the same problem as you did, but I don't get what you mean by "setting both variables to true" : wich variables ?

      Delete
    2. Ben ...please post full detail where you updates. I may need it in current project as I am implementing the same extension

      Delete
  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?

    ReplyDelete
    Replies
    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.

      Delete
    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?

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

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

    ReplyDelete
  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.

    ReplyDelete
    Replies
    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.

      Marius.

      Delete
    2. Want to achieve the same goal and as a complete js newbie searching for the solution for several days. Still no success :(

      Delete
  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..

    ReplyDelete
    Replies
    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.
      Cheers,
      Marius.

      Delete
  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.

    ReplyDelete
    Replies
    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)

      Delete
    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.

      Delete
    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.

      Delete
    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"?

      Thanks.

      Delete
    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.

      Delete
    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').

      Delete
    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.

      Delete
  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!

    ReplyDelete
    Replies
    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.

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

    ReplyDelete
    Replies
    1. note that the media section uses a different DOM selector than main image. Your theme may be using the default main-inage selector but a different selector for the media section. I had such an experience with ultimo.

      Delete
  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)

    ReplyDelete
    Replies
    1. Yep. This looks like a bug. can you post it here https://github.com/tzyganu/Switcher/issues so I won't forget :). I will fix it in the next version.

      Delete
  13. It's conflicting with Image Zoom.Image is changing based on color but then Image zoom does not work

    ReplyDelete
    Replies
    1. As described here this extension cannot be compatible with every custom theme and every other extension that exists. Depending on the zoom library you use you need to add the javascript code that reintializes the zoom functionality in the configuration section of the module. See what the field "Js Callback after main image change:" is for.

      Delete
  14. Thank you very much, it works like a dream on CE 1.8.

    ReplyDelete
  15. Hi Marius!
    Thank you for such as awesome extesnion.

    I want to show out of stock associate product at last in configurable product.

    Can you guide me. how can I do this.

    Thank you

    ReplyDelete
  16. Do you have a demo of this in action?

    ReplyDelete
  17. Great product. Has anyone used this with the Ultimo theme. I'm having trouble finding the Js Callback for the cloudzoom.

    ReplyDelete
  18. I followed comments above and did following:
    in product.js I changed $super variables to true (as stated above). In backend config panel, callback box I added CloudZoom.quickstart();

    The JS Console is throwing error cloudzoom is not defined.

    ReplyDelete
    Replies
    1. The extension is designed to work out of the box with the default theme (for each version starting 1.7). For custom themes you have to write some js code in the system->configuration section for the callbacks fields. The fact that something worked for someone else does not mean it will work for you. Unfortunately I don't know how to fix your issue. All I can do is to recommend you to read the documentation (https://github.com/tzyganu/Switcher/wiki) carefully and reverse engineer your theme to see how the zoomer works.

      Delete
    2. Thanks for the reply tzyganu.

      Is it possible to give me a headsup towards right direction? I understand that cloudzoom() is not getting referenced in js callback field. How can I call a function from other script?

      Thanks again for your answer.

      Delete
    3. Include the cloud zoom js file in your page. here is an example on how to add a s to a page: http://stackoverflow.com/questions/3937837/magento-how-to-include-javascript-file-on-a-page-by-page-basis

      Delete
    4. I was successful with the Ultimo theme using js callback:
      ProductMediaManager.swapImage('#image-main');

      Delete
  19. Hey,
    this is a great extension!
    But i have a little problem with the image chaning.
    When i reaload the page and change the attributes it changes the main image. But when i change the image within the media gallery and then try to change the attribute the image doesnt change anymore. All other features still work like the changing price. Just the image doenst change anymore.

    Can you help me out or give me a hint?

    Thank you very much!

    ReplyDelete
    Replies
    1. Make sure you configured the extension properly. Being highly dependent on the theme, I cannot make it work out of the box for every theme that exists. But there are 2 fields in system->configuration that allow you to execute custom js code after the image is changed or after the media block is changed. read this to get a better view on how things work: https://github.com/tzyganu/Switcher/wiki/configuration

      Delete
  20. Hi,
    How to change image configureable product image when reset all attribute selection (select Choose an Option form drop down after select attribute selection ) ?

    Thanks

    ReplyDelete
  21. Hi!

    Thanks for such a productive extension. I'm facing the similar issue which Julia faced (i.e. I cant seem to set the default simple product in admin, each time I save it disregards it and no default is saved). But this time it's only for a specific category. In that specific category it don't work. But for rest of categories it works like a charm. I would be really thankful if you could help me in sorting out the issue. As it's taking a lot of time on my end.

    Regards,
    Imran

    ReplyDelete
  22. Hey,
    thank you for your extension. I have a little problem with it. I already saw that youn have/had a solution for this but i cant find the right way.

    The Problem is that i have a configured product where are some "In Stock" and some "Out of Stock" Single products in it.
    It works that the "Not in Stock" products are grey.
    But the "Into cart" Button doesnt chance. You can still push the button for these product.
    I would like to chance the button for the "Out of Stock" Products into a grey button, that you cannot click.

    Is this possible somehow?

    Thank you very much!

    Best regards,
    Sören

    ReplyDelete
  23. Hello!
    Great extension. Just a quick question.
    After installing the extension, thumbnails on product detail page were lined up one below the other. How to get them back in horizontal line?
    Thanks in advance!!

    ReplyDelete
  24. Hi Marius,
    A friend wants to use your switcher module. He wants to be able to have the Related Products change with the selections. Is this supported and if yes, how to use it?

    ReplyDelete
  25. Hi, Is there a way to have the Related Products option change when selecting specific options within a configurable product? Something that works kind of like the changing of the image,when making a specific choice within a configurable product, but for the Related Products.

    ReplyDelete
  26. Hi, Is there a way to have the Related Products change, when making a specific selection, within a configurable product? Kind of like the changing of the image, when making a specific selection, but for the Related Products option at the bottom of the page.

    ReplyDelete
  27. Hi tzyganu,thanks for your extension, it really works well, but.. i am using it on a site with angularjs. On normal site it executes bindClickEvent() on every click on label but in my case it doesn't call that function and thus is not working for me. can you guide me how can i explicitly bind that function on click or i will have to call which function on click event? please help.

    ReplyDelete
  28. Hi Tzyganu, First of all thanks for the amazing extension. but I am facing some issues, actually i am using angularjs on my product page and on that page swatches doesn't work for me, it only shows label but doesn't call any function on click event.
    Now can you help me with it on how to execute swatches code explicitly instead of binding onclick event by code?

    ReplyDelete
  29. How to integrate this with in quick view page of product.Now it is not working in quick view page.

    ReplyDelete
    Replies
    1. I don't know what a quick view page is. It is not a standard magento feature. I cannot make this extension compatible with every other extensions out there. You have to do it yourself.

      Delete
  30. Hey Marius Great extension , but I want to integrate this extension in category page to, can you please guide me how to integrate category page.

    ReplyDelete
    Replies
    1. Integrating it in the category page is not in the scope of this extension.

      Delete
  31. Hey there,
    great extension!
    I am using this extension for an online shop where the dropdown options are single products.
    Is it possible to order these products or the labels that are shown?

    I don't find any options for odering the options.

    Thank you in advance!

    ReplyDelete
    Replies
    1. This extensions does not affect the order of the options. It is the order in which they appear even when this is not installed. And ordering is not in the scope of this extension.

      Delete
  32. Hello Tzyganu

    I have used your plugin and I am very happy with the performance. I tried to create a configurable option with all the cofigurations and I am facing an issue with the options available on the detail page. I am getting those options also which doesn't exist in the admin.

    For an example. Product A is having 3 color combinations

    Color 1 - Size 1
    Color 1 - Size 2
    Color 2 - Size 1

    But in the frontend I am getting Color 2 - Size 2 which does not exist. Please advise

    ReplyDelete
  33. i selected this attribute to "no" : Allow out of stock products to be selected' but its selecting out of stock products please help me what i am missing or not Thnaks

    ReplyDelete
  34. Hi,

    I have set to show out of products, but its not showing. Eg: Please open below link, size 'S' is out of stock, it does not show up, but I want it to show with a cross over it.

    dev.essethelabel.com/clothing/a-line-deep-pleat-skirt.html

    ReplyDelete
  35. Hey Marius,

    Your extension is still the best. Please keep it updated as even the default Magento swatches are not that great like you extension is.. Thanks for the Great Work

    ReplyDelete
  36. Hi,

    I have a problem on Easylife Switcher, since yesterday the pop-up that allows customizing the images for an attribute no longer works only for one of my attributes. It loads, but nothing appears. It is very annoying because it is the attribute that I use the most ...
    thanks in advance if anyone can help me.

    ReplyDelete