Skip to content

Adding js script to specific CMS page

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="MagentoFrameworkViewElementTemplate" 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.