Adding js script to specific CMS page

Question

I'm trying to add custom js in one cms page through requirejs-config. I want to add the following code : https://www.w3schools.com/howto/howto_js_countdown.asp

And I've used the following steps : Magento 2: How to include custom js file in phtml file

Then I've called phtml in my cms page like below : {{block class="Magento\Framework\View\Element\Template" name="sale" template="Magento_Theme::sale.phtml"}}

But it's didn't work.

To clarify more I'll attached my files content below : requirejs-config.js :

/*
 * @Author: nguyen
 * @Date:   2019-06-03 14:48:52
 * @Last Modified by:   nguyen
 * @Last Modified time: 2019-06-03 14:53:10
 */
var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/minicart': {
                'js/mixins/cart-updated': true
            }
        }
    },
    map: {
        '*': {
            'custom': 'js/custom',
            'sale': 'js/sale'
        },
    },



    shim: {
        'custom': {
            deps: ['jquery']
        }
    }
};

sale.js :

define(['jquery'], function($){
   "use strict";
       return function sale()
       {
           // Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
       }
});

sale.phtml :

<script>
        require(['jquery', 'sale'], function($, sale) {
            sale();
        });
    </script>

Looking forward for your kind assistance.

Answer 1

I solved this issue by using the following code directly into .phtml file :

<p id="demo"></p>
<script type="text/javascript">
require(['jquery'], function(jquery) {
    jquery(document).ready(function(){
         var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
    });
});
</script>

Answer 2

Hello Dun7ill you have a missing tag in sale.phtml file <p id="demo">

<p id="demo"></p>
<script>
    require(['jquery', 'sale'], function($, sale) {
        sale();
    });
</script>

Please change the above code on your sale.phtml file

Answer 3

Create di.xml file Example/Modulename/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Example_Modulename">
    </module>
</config>

Create sale.xml file Example/Modulename/view/frontend/templates/sale.phtml

<p id="demo"></p>
<script>
    require(['jquery', 'sale'], function($, sale) {
        sale();
    });
</script>

Create sale.js file Example/Modulename/view/frontend/web/js/sale.js

define(['jquery'], function($){
    "use strict";
    return function sale()
    {
        // Set the date we're counting down to
        var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);
    }
});

Create requirejs-config.js file Example/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {
            'sale': 'MageINIC_Simple/js/sale'

    },
    shim: {
        'sale': {
            deps: ['jquery']
        }
    }
};

Create registration.php file Example/Modulename/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Example_Modulename',
    __DIR__
);

and Last step you can add block in your CMS page on which page you want to display the time {{block class="Magento\Framework\View\Element\Template" name="sale" template="Example_Modulename::sale.phtml"}}