Right now, eSeller Cloud is build around post backs. This means that whenever a control (eg. A drop down) is changed, the page is updated.
In some instances, this additional roundtrip to the server is not the optimum solution. One of the instances where it is relevant to change this behavior is when using product variants. When a shop is using products that vary in size and color, the default behavior of the shop is to do a postback when the user changes one of the two. This default gives a lot of extra roundtrips and is not optimal from a UX perspective.

Fortunately it is possible to override the default behavior of the shop by employing some simple jquery in the product detail definition.
The below javascript snippet alters the default behavior of the shop so that it only does a postback when both variant selectors have been set. The snippet below assume that the variant selectors contain the text “Vælg Farve” (Pick color) and “Vælg Størrelse” (Pick size).
Furthermore, the example does not take i18n into account so the snippet is meant as a starting point for your development.


$( document ).ready(function() {

                             //Identify relevant elements
                             var colorpicker = $("body").find("option:contains('Vælg Farve')").parent();
                             var sizepicker = $("body").find("option:contains('Vælg Størrelse')").parent();
                            
                             //Remove existing onchange handlers
                             colorpicker.removeAttr("onchange");
                             sizepicker.removeAttr("onchange");
                            
                             colorpicker.change(function(event){
                             if(colorpicker.val()!=0 && sizepicker.val()!=0){
                                                          console.log("Fire postback event");
                                                          __doPostBack(colorpicker.attr("name"),"");
                             }
                             event.stopImmediatePropagation();
                             event.stopPropagation();
                             });
                            
                             sizepicker.change(function(event){
                             if(colorpicker.val()!=0 && sizepicker.val()!=0){
                                                          console.log("Fire postback event");
                                                          __doPostBack(sizepicker.attr("name"),"");
                             }
                             event.stopImmediatePropagation();
                             event.stopPropagation();
                             });
});