0

I need your help with some javascript piece. I add this to my footer

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    $.noConflict();
    var ot = Array();
    ot['mon'] = '9:00 AM-8:00 PM';
    ot['tue'] = '9:00 AM-8:00 PM';
    ot['wed'] = '9:00 AM-8:00 PM';
    ot['thu'] = '9:00 AM-8:00 PM';
    ot['fri'] = '9:00 AM-8:00 PM';
    ot['sat'] = '9:00 AM-5:00 PM';
    ot['sun'] = '9:00 AM-5:00 PM';
    var tz = '00:00,1';
    var widget_position = 'bottom_right';
    var fb = 'shop';
    var fb_email = 'info@shop.co.uk';
    var emailLink = true;
    var mon = true;
    var tue = true;
    var wed = true;
    var thu = true;
    var fri = true;
    var sat = false;
    var sun = false;

    function calculate_time_zone(ch) {
        if (typeof ch == "undefined") ch = false;
        var rightNow = new Date();
        var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
        var june1 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
        var temp = jan1.toGMTString();
        var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
        temp = june1.toGMTString();
        var june2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
        var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
        var daylight_time_offset = (june1 - june2) / (1000 * 60 * 60);
        var dst;
        if (std_time_offset == daylight_time_offset) {
            dst = "0";
        } else {
            var hemisphere = std_time_offset - daylight_time_offset;
            if (hemisphere >= 0)
                std_time_offset = daylight_time_offset;
            dst = "1";
        }
        var i;
        var con = convert(std_time_offset) + "," + dst;
        if (ch && document.getElementById('timezone')) {
            for (i = 0; i < document.getElementById('timezone').options.length; i++) {
                if (document.getElementById('timezone').options[i].value == con) {
                    document.getElementById('timezone').selectedIndex = i;
                    break;
                }
            }
        }
        return con;
    }

    function linkHandler(e) {
        var is_online = validate();
        if (is_online) {
            e.preventDefault();
            var screenwidth = screen.width - 500;
            window.open(jQuery(this).attr('href'), '_blank', "width=500,height=800,left=" + screenwidth);
        } else {
            if (jQuery("#chk_showemaillink").is(':checked') && jQuery("#fb_email").length > 0) {
                var fb_email = jQuery("#fb_email").val();
                if (fb_email != "" && isEmail(fb_email) && jQuery("#fb_link").hasClass("email_us")) {
                    jQuery(this).attr('href', "mailto:" + fb_email);
                    jQuery(this).attr('target', '_self');
                } else {
                    e.preventDefault();
                    var screenwidth = screen.width - 500;
                    window.open(jQuery(this).attr('href'), '_blank', "width=500,height=800,left=" + screenwidth);
                }
            } else if (emailLink) {
                console.log(this);
            } else if (jQuery(this).hasClass("disabled")) {
                e.preventDefault();
            }
        }
    }

    function convert(value) {
        var hours = parseInt(value);
        value -= parseInt(value);
        value *= 60;
        var mins = parseInt(value);
        value -= parseInt(value);
        value *= 60;
        var secs = parseInt(value);
        var display_hours = hours;
        if (hours == 0) {
            display_hours = "00";
        } else if (hours > 0) {
            display_hours = (hours < 10) ? "+0" + hours : "+" + hours;
        } else {
            display_hours = (hours > -10) ? "-0" + Math.abs(hours) : hours;
        }
        mins = (mins < 10) ? "0" + mins : mins;
        return display_hours + ":" + mins;
    }

    function validate() {
        if (jQuery("#fb_url").length > 0) {
            fb = jQuery("#fb_url").val();
        }
        if (fb == "") {
            sweetAlert("Oops...", "Something went wrong!", "error");
            return false;
        }
        if (jQuery("#chk_mon").length > 0) {
            mon = jQuery("#chk_mon").is(":checked");
            tue = jQuery("#chk_tue").is(":checked");
            wed = jQuery("#chk_wed").is(":checked");
            thu = jQuery("#chk_thu").is(":checked");
            fri = jQuery("#chk_fri").is(":checked");
            sat = jQuery("#chk_sat").is(":checked");
            sun = jQuery("#chk_sun").is(":checked");
        }
        var cDate = new Date();
        var days = Array();
        days['mon'] = mon;
        days['tue'] = tue;
        days['wed'] = wed;
        days['thu'] = thu;
        days['fri'] = fri;
        days['sat'] = sat;
        days['sun'] = sun;
        var daysName = [];
        daysName[1] = "mon";
        daysName[2] = "tue";
        daysName[3] = "wed";
        daysName[4] = "thu";
        daysName[5] = "fri";
        daysName[6] = "sat";
        daysName[7] = "sun";
        if (jQuery("#timezone").length > 0) {
            tz = jQuery("#timezone").val();
        }
        if (jQuery("#widget_position").length > 0) {
            widget_position = jQuery("#widget_position").val();
        }
        jQuery(".fbmessenger").removeClass().addClass("fbmessenger wpos" + widget_position);
        jQuery(".tooltiptext").removeClass().addClass("tooltiptext wpos" + widget_position);
        jQuery("#fb_link").attr("href", "http://m.me/" + fb);
        var cDayofWeek = daysName[cDate.getDay()];
        jQuery("#fb_link").removeClass("disabled");
        var calculated_time_zone = calculate_time_zone();
        var baseTzSy = tz.substr(0, 1);
        var baseTzHr = tz.slice(0, tz.indexOf(":"));
        var baseTzMn = tz.substr(tz.indexOf(":") + 1, 2);
        var baseTzDs = tz.slice(-1);
        var clientTzDs = calculated_time_zone.slice(-1);
        if (baseTzSy == "0") baseTzSy = "";
        if (baseTzSy == "+") baseTzHr = baseTzHr.substr(1);
        var conTz = parseInt(baseTzHr) + parseFloat(baseTzMn / 60);
        var baseTime = calcTime(conTz, conTz);
        var baseDayofWeek = baseTime.getDay();
        if (baseDayofWeek == 0) baseDayofWeek = 7;
        if (days[daysName[baseDayofWeek]]) {
            if (jQuery('.slider-time:visible').length > 0) {
                s = jQuery("#ts_container-" + daysName[baseDayofWeek] + " .slider-time").html();
                e = jQuery("#ts_container-" + daysName[baseDayofWeek] + " .slider-time2").html();
                var start_time = convertTimeFormat(s);
                var end_time = convertTimeFormat(e);
            } else if (jQuery('#mob_container_time').length > 0) {
                s = jQuery("#start_time-" + daysName[baseDayofWeek]).val();
                e = jQuery("#end_time-" + daysName[baseDayofWeek]).val();
                var start_time = convertTimeFormat(s);
                var end_time = convertTimeFormat(e);
            } else {
                var t = ot[daysName[baseDayofWeek]].split("-");
                var start_time = convertTimeFormat(t[0]);
                var end_time = convertTimeFormat(t[1]);
            }
            cHrs = cDate.getHours();
            cMin = cDate.getMinutes();
            var osTimeHrs = start_time.slice(0, start_time.indexOf(":"));
            var osTimeMins = start_time.substr(start_time.indexOf(":") + 1, 2);
            var oeTimeHrs = end_time.slice(0, end_time.indexOf(":"));
            var oeTimeMins = end_time.substr(end_time.indexOf(":") + 1, 2);
            console.log("Online time in base timezone(" + daysName[baseDayofWeek] + "): " + osTimeHrs + ":" + osTimeMins + " - " + oeTimeHrs + ":" + oeTimeMins);
            lHrs = baseTime.getHours();
            lMin = baseTime.getMinutes();
            var startTimeTs = new Date(baseTime.getFullYear(), baseTime.getMonth(), baseTime.getDate(), osTimeHrs, osTimeMins, 0, 0);
            startTimeTs = parseInt((startTimeTs.getTime()) / 1000);
            var endTimeTs = new Date(baseTime.getFullYear(), baseTime.getMonth(), baseTime.getDate(), oeTimeHrs, oeTimeMins, 0, 0);
            endTimeTs = parseInt((endTimeTs.getTime()) / 1000);
            sT = new Date(startTimeTs * 1000);
            eT = new Date(endTimeTs * 1000);
            var cTs = parseInt(baseTime.getTime() / 1000);
            if ((cTs >= startTimeTs) && (cTs < endTimeTs)) {
                jQuery("#fb_link").removeClass("disabled").removeClass("email_us");
                jQuery("#img_email").hide();
                jQuery("#img_msg").show();
                return true;
            } else {
                if (jQuery("#chk_showemaillink").length > 0) {
                    emailLink = jQuery("#chk_showemaillink").is(':checked');
                    fb_email = jQuery("#fb_email").val();
                } else {
                    emailLink = emailLink;
                }
                if (emailLink) {
                    jQuery('#fb_link').attr('href', "mailto:" + fb_email);
                    jQuery('#fb_link').attr('target', '_self');
                    if (fb_email != "" && isEmail(fb_email)) {
                        jQuery("#fb_link").removeClass("disabled").addClass("email_us");
                        jQuery("#img_email").show();
                        jQuery("#img_msg").hide();
                    } else {
                        jQuery("#img_email").hide();
                        jQuery("#img_msg").show();
                    }
                } else {
                    jQuery("#fb_link").addClass("disabled");
                }
            }
        } else {
            if (jQuery("#chk_showemaillink").length > 0) {
                emailLink = jQuery("#chk_showemaillink").is(':checked');
                fb_email = jQuery("#fb_email").val();
            } else {
                emailLink = emailLink;
            }
            if (emailLink) {
                jQuery('#fb_link').attr('href', "mailto:" + fb_email);
                jQuery('#fb_link').attr('target', '_self');
                if (fb_email != "" && isEmail(fb_email)) {
                    jQuery("#fb_link").removeClass("disabled").addClass("email_us");
                    jQuery("#img_email").show();
                    jQuery("#img_msg").hide();
                } else {
                    jQuery("#img_email").hide();
                    jQuery("#img_msg").show();
                }
            } else {
                jQuery("#fb_link").addClass("disabled");
            }
        }
        return false;
    }

    function convertTimeFormat(time) {
        var hours = Number(time.match(/^(\d+)/)[1]);
        var minutes = Number(time.match(/:(\d+)/)[1]);
        var AMPM = time.match(/\s(.*)$/)[1];
        if (AMPM == "PM" && hours < 12) hours = hours + 12;
        if (AMPM == "AM" && hours == 12) hours = hours - 12;
        var sHours = hours.toString();
        var sMinutes = minutes.toString();
        if (hours < 10) sHours = "0" + sHours;
        if (minutes < 10) sMinutes = "0" + sMinutes;
        return sHours + ":" + sMinutes;
    }

    function calcTime(city, offset) {
        d = new Date();
        utc = d.getTime() + (d.getTimezoneOffset() * 60000);
        nd = new Date(utc + (3600000 * offset));
        return nd;
    }

    function isEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    jQuery(document).ready(function($) {
        calculate_time_zone(true);
        validate();
        setInterval(validate, 30000);
        $('#fb_link').click(linkHandler);
    });
</script>
<div class='code'>
    <a id="fb_link" href="http://m.me/shop" target="_blank" class="" style="display: inline;">
        <div class="fbmessenger wposbottom_right"><img id="img_msg" src="https://cdn.supple.com.au/wp-content/themes/supple/img/msg.png"><img id="img_email" src="https://cdn.supple.com.au/wp-content/themes/supple/img/emailc.png" style="display: none;">
            <!--<span class="tooltiptext wposbottom_right">Message Us</span>--></div>
    </a>
</div>

and i get this error in my console:

Uncaught TypeError: Cannot read property 'timepicker' of undefined
    at jquery-ui-timepicker-addon.js:18
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.enable (require.js:1143)
    at Module.init (require.js:774)
    at callGetModule (require.js:1170)
    at Object.completeLoad (require.js:1544)
    at HTMLScriptElement.onScriptLoad (require.js:1671)
(anonymous) @ jquery-ui-timepicker-addon.js:18
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
load @ mixins.js:105
(anonymous) @ require.js:1072
(anonymous) @ require.js:132
on @ require.js:505
callPlugin @ require.js:934
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
(anonymous) @ require.js:806
(anonymous) @ require.js:132
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
fetch @ require.js:805
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
callPlugin @ require.js:1075
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
fetch @ require.js:805
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090

so the error is on the timer, but I don't really know how to fix this, any ideas?

0

The error is coming from require js not knowing when to load your scripts. You are best served by loading jQuery through require js and letting it sort out the dependencies. I put this in a theme and on the homepage, but this same concept can work anywhere on the site.

In your layout xml:

app/design/frontend/{vendor_name}/{theme}/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="homepage-timer"
                   template="Magento_Cms::timer.phtml"/>
        </referenceContainer>
    </body>
</page>

Your template file:

app/design/frontend/{vendor_name}/{theme}/Magento_Cms/templates/timer.phtml

<script type="text/javascript">
    require([
        'jquery224',
        'domReady!'
    ], function($) {
        var ot = Array();
        ot['mon'] = '9:00 AM-8:00 PM';
        ot['tue'] = '9:00 AM-8:00 PM';
        ot['wed'] = '9:00 AM-8:00 PM';
        ot['thu'] = '9:00 AM-8:00 PM';
        ot['fri'] = '9:00 AM-8:00 PM';
        ot['sat'] = '9:00 AM-5:00 PM';
        ot['sun'] = '9:00 AM-5:00 PM';
        var tz = '00:00,1';
        var widget_position = 'bottom_right';
        var fb = 'shop';
        var fb_email = 'info@shop.co.uk';
        var emailLink = true;
        var mon = true;
        var tue = true;
        var wed = true;
        var thu = true;
        var fri = true;
        var sat = false;
        var sun = false;

        function calculate_time_zone(ch) {
            if (typeof ch == "undefined") ch = false;
            var rightNow = new Date();
            var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
            var june1 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
            var temp = jan1.toGMTString();
            var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
            temp = june1.toGMTString();
            var june2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
            var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
            var daylight_time_offset = (june1 - june2) / (1000 * 60 * 60);
            var dst;
            if (std_time_offset == daylight_time_offset) {
                dst = "0";
            } else {
                var hemisphere = std_time_offset - daylight_time_offset;
                if (hemisphere >= 0)
                    std_time_offset = daylight_time_offset;
                dst = "1";
            }
            var i;
            var con = convert(std_time_offset) + "," + dst;
            if (ch && document.getElementById('timezone')) {
                for (i = 0; i < document.getElementById('timezone').options.length; i++) {
                    if (document.getElementById('timezone').options[i].value == con) {
                        document.getElementById('timezone').selectedIndex = i;
                        break;
                    }
                }
            }
            return con;
        }

        function linkHandler(e) {
            var is_online = validate();
            if (is_online) {
                e.preventDefault();
                var screenwidth = screen.width - 500;
                window.open(jQuery(this).attr('href'), '_blank', "width=500,height=800,left=" + screenwidth);
            } else {
                if (jQuery("#chk_showemaillink").is(':checked') && jQuery("#fb_email").length > 0) {
                    var fb_email = jQuery("#fb_email").val();
                    if (fb_email != "" && isEmail(fb_email) && jQuery("#fb_link").hasClass("email_us")) {
                        jQuery(this).attr('href', "mailto:" + fb_email);
                        jQuery(this).attr('target', '_self');
                    } else {
                        e.preventDefault();
                        var screenwidth = screen.width - 500;
                        window.open(jQuery(this).attr('href'), '_blank', "width=500,height=800,left=" + screenwidth);
                    }
                } else if (emailLink) {
                    console.log(this);
                } else if (jQuery(this).hasClass("disabled")) {
                    e.preventDefault();
                }
            }
        }

        function convert(value) {
            var hours = parseInt(value);
            value -= parseInt(value);
            value *= 60;
            var mins = parseInt(value);
            value -= parseInt(value);
            value *= 60;
            var secs = parseInt(value);
            var display_hours = hours;
            if (hours == 0) {
                display_hours = "00";
            } else if (hours > 0) {
                display_hours = (hours < 10) ? "+0" + hours : "+" + hours;
            } else {
                display_hours = (hours > -10) ? "-0" + Math.abs(hours) : hours;
            }
            mins = (mins < 10) ? "0" + mins : mins;
            return display_hours + ":" + mins;
        }

        function validate() {
            if (jQuery("#fb_url").length > 0) {
                fb = jQuery("#fb_url").val();
            }
            if (fb == "") {
                sweetAlert("Oops...", "Something went wrong!", "error");
                return false;
            }
            if (jQuery("#chk_mon").length > 0) {
                mon = jQuery("#chk_mon").is(":checked");
                tue = jQuery("#chk_tue").is(":checked");
                wed = jQuery("#chk_wed").is(":checked");
                thu = jQuery("#chk_thu").is(":checked");
                fri = jQuery("#chk_fri").is(":checked");
                sat = jQuery("#chk_sat").is(":checked");
                sun = jQuery("#chk_sun").is(":checked");
            }
            var cDate = new Date();
            var days = Array();
            days['mon'] = mon;
            days['tue'] = tue;
            days['wed'] = wed;
            days['thu'] = thu;
            days['fri'] = fri;
            days['sat'] = sat;
            days['sun'] = sun;
            var daysName = [];
            daysName[1] = "mon";
            daysName[2] = "tue";
            daysName[3] = "wed";
            daysName[4] = "thu";
            daysName[5] = "fri";
            daysName[6] = "sat";
            daysName[7] = "sun";
            if (jQuery("#timezone").length > 0) {
                tz = jQuery("#timezone").val();
            }
            if (jQuery("#widget_position").length > 0) {
                widget_position = jQuery("#widget_position").val();
            }
            jQuery(".fbmessenger").removeClass().addClass("fbmessenger wpos" + widget_position);
            jQuery(".tooltiptext").removeClass().addClass("tooltiptext wpos" + widget_position);
            jQuery("#fb_link").attr("href", "http://m.me/" + fb);
            var cDayofWeek = daysName[cDate.getDay()];
            jQuery("#fb_link").removeClass("disabled");
            var calculated_time_zone = calculate_time_zone();
            var baseTzSy = tz.substr(0, 1);
            var baseTzHr = tz.slice(0, tz.indexOf(":"));
            var baseTzMn = tz.substr(tz.indexOf(":") + 1, 2);
            var baseTzDs = tz.slice(-1);
            var clientTzDs = calculated_time_zone.slice(-1);
            if (baseTzSy == "0") baseTzSy = "";
            if (baseTzSy == "+") baseTzHr = baseTzHr.substr(1);
            var conTz = parseInt(baseTzHr) + parseFloat(baseTzMn / 60);
            var baseTime = calcTime(conTz, conTz);
            var baseDayofWeek = baseTime.getDay();
            if (baseDayofWeek == 0) baseDayofWeek = 7;
            if (days[daysName[baseDayofWeek]]) {
                if (jQuery('.slider-time:visible').length > 0) {
                    s = jQuery("#ts_container-" + daysName[baseDayofWeek] + " .slider-time").html();
                    e = jQuery("#ts_container-" + daysName[baseDayofWeek] + " .slider-time2").html();
                    var start_time = convertTimeFormat(s);
                    var end_time = convertTimeFormat(e);
                } else if (jQuery('#mob_container_time').length > 0) {
                    s = jQuery("#start_time-" + daysName[baseDayofWeek]).val();
                    e = jQuery("#end_time-" + daysName[baseDayofWeek]).val();
                    var start_time = convertTimeFormat(s);
                    var end_time = convertTimeFormat(e);
                } else {
                    var t = ot[daysName[baseDayofWeek]].split("-");
                    var start_time = convertTimeFormat(t[0]);
                    var end_time = convertTimeFormat(t[1]);
                }
                cHrs = cDate.getHours();
                cMin = cDate.getMinutes();
                var osTimeHrs = start_time.slice(0, start_time.indexOf(":"));
                var osTimeMins = start_time.substr(start_time.indexOf(":") + 1, 2);
                var oeTimeHrs = end_time.slice(0, end_time.indexOf(":"));
                var oeTimeMins = end_time.substr(end_time.indexOf(":") + 1, 2);
                console.log("Online time in base timezone(" + daysName[baseDayofWeek] + "): " + osTimeHrs + ":" + osTimeMins + " - " + oeTimeHrs + ":" + oeTimeMins);
                lHrs = baseTime.getHours();
                lMin = baseTime.getMinutes();
                var startTimeTs = new Date(baseTime.getFullYear(), baseTime.getMonth(), baseTime.getDate(), osTimeHrs, osTimeMins, 0, 0);
                startTimeTs = parseInt((startTimeTs.getTime()) / 1000);
                var endTimeTs = new Date(baseTime.getFullYear(), baseTime.getMonth(), baseTime.getDate(), oeTimeHrs, oeTimeMins, 0, 0);
                endTimeTs = parseInt((endTimeTs.getTime()) / 1000);
                sT = new Date(startTimeTs * 1000);
                eT = new Date(endTimeTs * 1000);
                var cTs = parseInt(baseTime.getTime() / 1000);
                if ((cTs >= startTimeTs) && (cTs < endTimeTs)) {
                    jQuery("#fb_link").removeClass("disabled").removeClass("email_us");
                    jQuery("#img_email").hide();
                    jQuery("#img_msg").show();
                    return true;
                } else {
                    if (jQuery("#chk_showemaillink").length > 0) {
                        emailLink = jQuery("#chk_showemaillink").is(':checked');
                        fb_email = jQuery("#fb_email").val();
                    } else {
                        emailLink = emailLink;
                    }
                    if (emailLink) {
                        jQuery('#fb_link').attr('href', "mailto:" + fb_email);
                        jQuery('#fb_link').attr('target', '_self');
                        if (fb_email != "" && isEmail(fb_email)) {
                            jQuery("#fb_link").removeClass("disabled").addClass("email_us");
                            jQuery("#img_email").show();
                            jQuery("#img_msg").hide();
                        } else {
                            jQuery("#img_email").hide();
                            jQuery("#img_msg").show();
                        }
                    } else {
                        jQuery("#fb_link").addClass("disabled");
                    }
                }
            } else {
                if (jQuery("#chk_showemaillink").length > 0) {
                    emailLink = jQuery("#chk_showemaillink").is(':checked');
                    fb_email = jQuery("#fb_email").val();
                } else {
                    emailLink = emailLink;
                }
                if (emailLink) {
                    jQuery('#fb_link').attr('href', "mailto:" + fb_email);
                    jQuery('#fb_link').attr('target', '_self');
                    if (fb_email != "" && isEmail(fb_email)) {
                        jQuery("#fb_link").removeClass("disabled").addClass("email_us");
                        jQuery("#img_email").show();
                        jQuery("#img_msg").hide();
                    } else {
                        jQuery("#img_email").hide();
                        jQuery("#img_msg").show();
                    }
                } else {
                    jQuery("#fb_link").addClass("disabled");
                }
            }
            return false;
        }

        function convertTimeFormat(time) {
            var hours = Number(time.match(/^(\d+)/)[1]);
            var minutes = Number(time.match(/:(\d+)/)[1]);
            var AMPM = time.match(/\s(.*)$/)[1];
            if (AMPM == "PM" && hours < 12) hours = hours + 12;
            if (AMPM == "AM" && hours == 12) hours = hours - 12;
            var sHours = hours.toString();
            var sMinutes = minutes.toString();
            if (hours < 10) sHours = "0" + sHours;
            if (minutes < 10) sMinutes = "0" + sMinutes;
            return sHours + ":" + sMinutes;
        }

        function calcTime(city, offset) {
            d = new Date();
            utc = d.getTime() + (d.getTimezoneOffset() * 60000);
            nd = new Date(utc + (3600000 * offset));
            return nd;
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }

        jQuery(document).ready(function ($) {
            calculate_time_zone(true);
            validate();
            setInterval(validate, 30000);
            $('#fb_link').click(linkHandler);
        });
    });
</script>
<div class='code'>
    <a id="fb_link" href="http://m.me/shop" target="_blank" class="" style="display: inline;">
        <div class="fbmessenger wposbottom_right"><img id="img_msg" src="https://cdn.supple.com.au/wp-content/themes/supple/img/msg.png"><img id="img_email" src="https://cdn.supple.com.au/wp-content/themes/supple/img/emailc.png" style="display: none;">
            <!--<span class="tooltiptext wposbottom_right">Message Us</span>--></div>
    </a>
</div>

Notice that i have removed the cdn call and now have a require statement that wraps the code. This is what will allow require js to do it's thing.

Create a require js file:

app/design/frontend/{vendor_name}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            jquery224: 'Magento_Cms/js/jquery-2.2.4'
        }
    }
};

And then create a file with the jQuery library:

app/design/frontend/{vendor_name}/{theme}/Magento_Cms/web/js/jquery-2.2.4.js

When i tried this out, i didn't get anything working. But the js errors are gone. Not sure what the end goal is, but you should be able to get it working with this set up. And of course there are a lot of other ways to do this where you don't have the js code in a template file (which magento inc frowns upon) but this should work for you.

  • this is a facebook live chat that floats above all other elements. I am not sure I want that on a cms phtml on it's own – Nick Theodoridis Mar 21 '18 at 12:56
  • you don't have to. you can use this code just about anywhere, the concept is the same. the important part is to use require js to load the version of jquery that you want to stop the load order errors you are getting. if you want this in the footer, you can change the xml call to <referenceContainer name="footer-container"> or put it in a cms block and call it into the footer using the admin widget system. – circlesix Mar 21 '18 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.