Reducing JavaScript Size

This specifically relates to the VariantsInGrid template, but I'm sure there will be several pages that I'll be working on down the road.

For this case, I'm going to assume that you don't have a specific maximum for the quantity ordered on any given product.  I personally do not in my shop, so I'm removing the ASP.NET client side validations and replacing them with a much smaller javascript validator.  Bandwidth savings on pages with about a dozen variants should be around 44K which is pretty decent.

Changes:

NumericTextBox.ascx.cs

Add the following around line 32 or wherever else you want to put the properties:

        public bool ClientSideRangeValidation
        {
            get
            {
                return rvValue.EnableClientScript;
            }
            set
            {
                rvValue.EnableClientScript = value;
            }
        }

        public bool ClientSideRequiredValueValidation
        {
            get
            {
                return rfvValue.EnableClientScript;
            }
            set
            {
                rfvValue.EnableClientScript = value;
            }
        }

Modules/ProductVariantsInGrid.ascx.cs

Add the following to or around Line 203 - 'protected void rptVariants_OnItemDataBound' after the declarations:

txtQuantity.CssClass = (txtQuantity.CssClass + " txtQuantity").Trim();

Modules/ProductVariantsInGrid.ascx

Add these two properties to Line 73 (properties for NumericTextBox for txtQuantity)

ClientSideRangeValidation="false" ClientSideRequiredValueValidation="false"

Paste this script at the bottom:

<script type="text/javascript">
    $(".txtQuantity").keyup(function () {
        var value = $(this).val();

        // Test if the quantity is less than 1 or if it contains non numeric characters
        if (!value.match(/^\d+$/) || parseInt(value) < 1) {
            $(this).parent().parent().find(".error").text("Your quantity must be at least 1");
            $(this).parent().parent().find(".error").show();
            $(this).parent().find(".productvariantaddtocartbutton").attr('disabled', 'true');
        }
        else {
            $(this).parent().parent().find(".error").hide();
            $(this).parent().find(".productvariantaddtocartbutton").removeAttr('disabled');
        }
    });
</script>

Server size validation still exists, so you're not losing any validations here.

My next optimization here will be to store the stock quantity in a hidden input variable for each product variant.  Then, I'll add some more code to the validation to make it do something like

if (value < 1 || value > parseInt($('selectortoquantity').val()))
{
  do my error stuff here
}

It's late, so maybe later!