A/B Test in AspxCommerce

Installing A/B Test module from Back End:

Login with superuser /admin in AspxCommerce

1.       Install ABTest Module zip named AspxABTesting by clicking on Dashboard > Module > Install Module. Module will be Installed as AspxABTesting.

2.       Create New Portal Page as AB Test by clicking on Dashboard > Pages > New Page.

3.       Add Module AspxABTesting in AB Test Page by clicking on Dashboard > Page Modules. Select Page Named AB Test from drop down list and drag AspxABTesting Module  inside Toppane Container.

Adding  A/B Test  From Back End

I’m going to add a test for My Cart Page for different variations.

Login with superuser /admin in AspxCommerce 2.0

Go to Dashboard > AspxCommerce> ABTesting, A window will be opened as bellow.

• To Add New A/B Test Click on New A/B Test Link as in red Circle.
• To Edit A/B Test Click on Action > Edit Button as in red Circle.
• To Search A/B Test Names write the name in the search Textbox and click on Search Button.

New A/B Test or Edit Button:

After Clicking on New A/B Test or  Action > Edit a window will be shown as under.

• A/B Test: Here we can On/Off, A/B Testing.
• Name of A/B Test: Put a Name of the test as you desired.
• Email Notification:  Turn it On/Off to send notification for the certain changes in the system to Admin/superuser .
• Ends on Date: Set the Date to end Testing.
• Users in Role: Select the roles for user who can involve for this testing.
• Original Page: Put the URL for the Original Page to test with Slash (/).
• Variation1: Put the URL for the Variation1 to test with Slash (/).
• Add Variation: Click on this button if you want to add more variations for the same test.
• Note: Maximum four variations can be added.

View Button:  

After Clicking on Action > View a window will be shown as under

• Date wise Conversion: In above chart date wise conversions are showing. It means that in which date what was the conversion rate.
• Day: Click on this button if you want to see the status of A/B Test for the current date.
• Month: Click on this button if you want to see the status of A/B Test for the current Month.
• Year: Click on this button if you want to see the status of A/B Test for the current Year.

Comparing Two Dates formatted (mm/dd/yyyy) using jQuery

Just convert to a Date object and compare your date value to Date.now - for example:

var endDate = Date.parse('4/25/2015'); 

var currentDate = Date.now();

if (endDate >= currentDate) {

                return true;

            }        

Find today’s date formatted (mm/dd/yyyy) using jQuery

var getDateToday = new Date();

var dateFormat = getDateToday.toISOString().split("T")[0].split("-");

var dateFormatted = dateFormat[1] + "/" + dateFormat[2] + "/" + dateFormat[0];

alert('Date Today mm/dd/yyy Format : ' + dateFormatted);

Calling a function inside a function asynchronously using JQuery

var Test;

$(function () {

    var ServicePath = rootPath + "Services/TestService.asmx/";

    var ajxcalls = function (methodname, param, success, error) {

        $.ajax({

            type: "POST",

            contentType: "application/json; charset=utf-8",

            cache: false,

            async: false,

            url: ServicePath + methodname,

            data: param,

            dataType: 'json',

            success: success,

            error: error

        });

    };

    Test = {

        Init: function () {

            Test.TestCheck();

        },

        TestCheck: function () {

            var isActive = false;

            var par = JSON2.stringify({ ParameterValue: value });

            ajxcall("TestIsActive", par, function (data) { isActive = data.d; }, function () { Alert('Error'); });

            Alert(isActive);

        }

    };

    Test.Init();

});

Using J-Query as a Code Behind in AspxCommerce (Open Source E-Commerce)

If you want to make your own module in AspxCommerce this technique will be helpful to you.

1. add control to your module
2. add Test.js in your module
3. in Test.js copy and paste the code as under.
4. Do all operations here as a code behind in your Asp.Net page.


 var TestPage = '';
    $(function () {    
        var ModuleServicePath = modulePath + "Services/WebService.asmx/";
        var aspxCommonObj = {
            StoreID: 1,
            PortalID: 1,
            UserName: "username",
            CultureName: "en_US",
            CustomerID: 25
        };
        TestPage = {
            config: {
                isPostBack: false,
                async: false,
                cache: false,
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                data: '{}',
                dataType: 'json',
                baseURL: AspxCommerce.utils.GetAspxServicePath(),
                method: "",
                url: "",
                ajaxCallMode: "",
                error: "",
                sessionValue: ""
            },
            ajaxCall: function (config) {
                $.ajax({
                    type: TestPage.config.type,
                    contentType: TestPage.config.contentType,
                    cache: TestPage.config.cache,
                    async: TestPage.config.async,
                    url: TestPage.config.url,
                    data: TestPage.config.data,
                    dataType: TestPage.config.dataType,
                    success: TestPage.config.ajaxCallMode,
                    error: TestPage.config.error
                });
            },
            Init: function () {              
                $("#btnSaveTest").click(function () {
                    if (frm.form()) {                    
                        TestPage.SaveUpdate();                      
                    }
                });
            },
            SaveUpdate: function () {              
                this.config.method = "SaveUpdate";
                this.config.url = ModuleServicePath + this.config.method;
                this.config.data = JSON2.stringify({ aspxCommonObj: aspxCommonObj });
                this.config.ajaxCallMode = TestPage.SaveUpdateSuccess;
                this.config.error = TestPage.SaveUpdateError;
                this.ajaxCall(this.config);
            },
            SaveUpdateSuccess: function (msg) {
                csscody.info("<h2>Successful Message</h2><p>Saved successfully!</p>");            
            },
            SaveUpdateError: function () {
                csscody.error("<h2>Error Message</h2><p>Failed to save!</p>");
            }
        };
        TestPage.Init();
    });