How to create auto call javascript multiple function in magento 2 in single file

Question

I create two js file for a task. I want to merge two file task in one file in three function. Both two have different config parameter. I am using magento x init.

<script type="text/x-magento-init">
    {
        "body" : {
             "dealsdow":
                    {
                    "dowDealspids": <?php echo json_encode($arrDowDealsPids); ?>
                 }
        }
    }
</script>

Javscript file.

define([
    "jquery",
     "mage/url",
     "jquery/ui",
    "countdowntimer"

], function($,urlBuilder) {
    "use strict";

     var greatDeal = function {


        $(document).ready(function () {
            var today = new Date();
            var dealEndDate = '';

            var date = today.getFullYear()+'/'+(today.getMonth()+1)+'/'+today.getDate();
            var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

            var currentTime =  date+' '+time;
            var dealEndDate = currentTime;

            var i = '';
            var dealUrl = urlBuilder.build("catalog/timer/getdata");
            for(i=0;i<config.dowDealspids.length; i++){
            $.ajax({
                type: "POST",
                url: dealUrl,
                data :{pid:config.dowDealspids[i]},
                cache: false,
                async:false,
                success: function (result) {
                    if (result) {
                       dealEndDate = result;
                    }
                },
                failure: function (response) {
                }
            });

            var now = currentTime;
            var arrDealEndDate = dealEndDate.split('-');
            var newDate = arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2];
            var end = new Date(arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2]);

            var id = config.dowDealspids[i];
                id = "dow"+id;
                $("#future_date_" + id).countdowntimer({
                startDate: now,
                dateAndTime: end,
                size: "lg",
                regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
                regexpReplaceWith: "$1 days, $2: $3: $4"
            });
           }
        });

    }

var weekDeal =  function (config) {
        //console.log(config); // will output {a: "Hello from template"}

        $(document).ready(function () {
            var today = new Date();
            var dealEndDate = '';

            var date = today.getFullYear()+'/'+(today.getMonth()+1)+'/'+today.getDate();
            var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

            var currentTime =  date+' '+time;
            var dealEndDate = currentTime;

            var i = '';
            var greatDealUrl = urlBuilder.build("catalog/timer/getdata");
            for(i=0;i<config.greatDealspids.length; i++){
            $.ajax({
                type: "POST",
                url: greatDealUrl,
                data :{pid:config.greatDealspids[i]},
                cache: false,
                async:false,
                success: function (result) {
                    if (result) {
                      dealEndDate = result;
                    }
                },
                failure: function (response) {
                }
            });
            var now = currentTime;
            var arrDealEndDate = dealEndDate.split('-');
            var newDate = arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2];
            var end = new Date(arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2]);
            var id = config.greatDealspids[i];
                id = "gd"+id;
            $("#future_date_" + id).countdowntimer({
                startDate: now,
                dateAndTime: end,
                size: "lg",
                regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
                regexpReplaceWith: "$1 days, $2: $3: $4"
            });
           }
        });

    }

return weekDeal;
return greatDeal;

});

Answer 1

We can merge multiple javascript file in one and can share configuration to all function.

Step 1 Your javascript magento init file.

File Path : / app/desigin/frontend/Yuourpackage/Yourtheme/YourModule/template/

---

<script type="text/x-magento-init">
    {
        "body" : {
             "dealtimer":
                    {
                    "dowDealspids": <?php echo json_encode($arrDowDealsPids); ?>
                 }
        }
    }
</script>

REQUIRE JS. File Path : / app/desigin/frontend/Yuourpackage/Yourtheme/YourModule/requirejs-config.js

---

var config = {
    map: {
        '*': {
           'dealtimer': 'Magento_Catalog/js/dealtimer'
        }
    }
};

Your merged js file with auto initialise function

File Path : / app/desigin/frontend/Yuourpackage/Yourtheme/YourModule/web/js

---

    define([
        "jquery",
        "mage/url",
        "jquery/ui",
        "countdowntimer"
    ], fun

ction($, urlBuilder) {
    "use strict";

    var initialize = function(config) {

        var today = new Date();
        var date = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        var currentTime = date + ' ' + time;
        greatDeal(config);
        weekDeal(config);
        monthDeal(config);


    };

    var greatDeal = function(config) {
        $(document).ready(function() {

            var dealEndDate = '';
            var greatDealspids = new Array();
            greatDealspids = config.greatDealspids;
            var dealEndDate = initialize.currentTime;

            var i = '';
            var greatDealUrl = urlBuilder.build("catalog/timer/getdata");
            for (i = 0; i < config.greatDealspids.length; i++) {
                $.ajax({
                    type: "POST",
                    url: greatDealUrl,
                    data: {pid: greatDealspids[i]},
                    cache: false,
                    async: false,
                    success: function(result) {
                        if (result) {
                            dealEndDate = result;
                        }
                    },
                    failure: function(response) {
                    }
                });
                var now = initialize.currentTime;
                var arrDealEndDate = dealEndDate.split('-');
                var newDate = arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2];
                var end = new Date(arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2]);
                var id = greatDealspids[i];
                id = "great" + id;
                $("#future_date_" + id).countdowntimer({
                    startDate: now,
                    dateAndTime: end,
                    size: "lg",
                    regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
                    regexpReplaceWith: "$1 days, $2: $3: $4"
                });
            }
        });
    };

    var weekDeal = function(config) {
        $(document).ready(function() {
            var dealEndDate = '';
            var dowDealspids = new Array();
            dowDealspids = config.dowDealspids;
            var dealEndDate = initialize.currentTime;

            var i = '';
            var dealUrl = urlBuilder.build("catalog/timer/getdata");
            for (i = 0; i < dowDealspids.length; i++) {
                $.ajax({
                    type: "POST",
                    url: dealUrl,
                    data: {pid: dowDealspids[i]},
                    cache: false,
                    async: false,
                    success: function(result) {
                        if (result) {
                            dealEndDate = result;
                        }
                    },
                    failure: function(response) {
                    }
                });

                var now = initialize.currentTime;
                var arrDealEndDate = dealEndDate.split('-');
                var newDate = arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2];
                var end = new Date(arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2]);

                var id = dowDealspids[i];
                id = "week" + id;
                $("#future_date_" + id).countdowntimer({
                    startDate: now,
                    dateAndTime: end,
                    size: "lg",
                    regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
                    regexpReplaceWith: "$1 days, $2: $3: $4"
                });
            }
        });
    };

    var monthDeal = function(config) {
        $(document).ready(function() {
            var dealEndDate = '';
            var monthsPids = new Array();
            monthsPids = config.monthsPids;

            var dealEndDate = initialize.currentTime;

            var i = '';
            var dealUrl = urlBuilder.build("catalog/timer/getdata");
            for (i = 0; i < monthsPids.length; i++) {
                $.ajax({
                    type: "POST",
                    url: dealUrl,
                    data: {pid: monthsPids[i]},
                    cache: false,
                    async: false,
                    success: function(result) {
                        if (result) {
                            dealEndDate = result;
                        }
                    },
                    failure: function(response) {
                    }
                });

                var now = initialize.currentTime;
                var arrDealEndDate = dealEndDate.split('-');
                var newDate = arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2];
                var end = new Date(arrDealEndDate[1] + '/' + arrDealEndDate[0] + '/' + arrDealEndDate[2]);

                var id = monthsPids[i];
                id = "month" + id;
                $("#future_date_" + id).countdowntimer({
                    startDate: now,
                    dateAndTime: end,
                    size: "lg",
                    regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
                    regexpReplaceWith: "$1 days, $2: $3: $4"
                });
            }
        });
    };

    return initialize;

});