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;
});

• Herve Tribouilloy: I can only see 2 return statement; I'd expect 3? but more to the point your query is about having 3 config different and I can't see the 3 different config to be merged?
• Deepak Rai: @HerveTribouilloy now its two.
• Deepak Rai: @HerveTribouilloy Please see my answer

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;
});