Magento compatibility - selectBoxIt doesn't fire all native select box events even when triggering native select box.

[beneklisefski]

This problem has arisen when trying to use selectBoxIt in templates for Magento ecommerce sites. It seems selectoBoxIt, even when triggering the native select elements instead of replacing with custom option list, doesn't trigger all the necessary changes to the select element to make it compatible with Magento's Prototype form validation. In contrast, a script like uniform.js does not have this problem as it does not alter the behaviour of the native select box.

I'd much prefer to use SelectBoxIt over other solution like uniform.js as in so many other ways it's far superior, but with Magento sites it's very very difficult to get it to work.

Is it possible to update selectBoxIt's code for the next version to make it compatible with Magento? Even better if it can be compatible even when not triggering the native select box.

Here's a note from my developer to help clarify some of these issues:

With configurable products (where there may be one or more configurable option), the select tags are populated via a JSON array which stores the matrix of which product options are available when you make your selections. So if you are selling t-shirts, then the first select tag will have the colours for example, then depending on which one you choose, the size select tag will be re-populated with only the sizes that are in stock for that colour. The problem with using selectBoxIt is that we have to hook into the function that Prototype (not jQuery) is calling when it re-populates those options, so that selectBoxIt can redo it's HTML. Also, the subsequent selects are disabled on page load, so again that's something else we would need to handle with selectBoxIt. With uniform we don't need to do anything, as it's not replacing the actual select tag. So basically, selectBoxIt causes too many headaches for those types of products.

[gfranko]

Could you provide any more details? If you are using the native option, SelectBoxIt does not stop native select box events from happening, it just listens to events itself.

Even if the native option isn't used, SelectBoxIt makes sure to manually trigger native select box events to be compatible. Example:

var selectBox = $("select").selectBoxIt();

selectBox.on('change', function() {
  console.log('changed!');
});

Also, every use case that the developer mentioned (HTML updating, disabled state) are all supported by SelectBoxIt.

[beneklisefski]

Thanks for the reply Greg. I'm going to talk with my developer again and get you more details if I can.

[gfranko]

Np. If necessary, I'll include a fix for you guys.

[beneklisefski]

OK Greg here is an example for you: http://magento.vo2.co.nz/category-1/configurable.html

This is a default Magento install with default selectBoxit theme. Native select box is being triggered as it doesn't work at all when using the custom option list.

One obvious problem is that the second product option "color" never loses its disabled state even when it should be active (once first option is selected, second select box should become un-disabled). The second select box also doesn't update to show its selected value, even though you can click to access the select menu and choose a value.

There may be some other issues as well, but these are the most obvious ones to start. Do you mind taking a look to let me know if there are simple fixes to these problems?

[gfranko]

This doesn't look like a SelectBoxIt issue. Keep in mind that your example page overrides the global $ property, so you will have to type jQuery instead. There is no reason that you couldn't listen for the change event, and then enable the second select box. Like this:

jQuery('#attribute81').on('change', function() {
  jQuery('#attribute92').selectBoxIt('enable');
});

[beneklisefski]

That solution requires you to know exactly which options are on the page, but different products could have a different number of options.

Is there not an easier way to have selectBoxIt automatically update when the native select becomes un-disabled? I simply want it to mirror the functionality of the native select without having to add extra listeners to recreate what's already happening in the HTML.

[beneklisefski]

Found a solution. Thanks.

[gfranko]

The solution I posted doesn't require you to know the number of options of each select box, it just requires you to know the id's of each select box. How would you do this with a native select?

[gfranko]

@beneklisefski What was the solution?

[beneklisefski]

Yeah we wouldn't know the ID's of the selectboxes as they could be different on different pages, and there could be more on some and less on others. So a more general solution was required. In our case:

<script>
jQuery.noConflict();
jQuery(function($) {
    $("select").selectBoxIt({
       'native': true
    });

    $('select.super-attribute-select').on('change', function() {
        $('select.super-attribute-select').selectBoxIt('refresh');
    });

});
</script>