2

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.

3 Answers 3

2

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>
0

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

1
  • Hi @rahil-shaikh, it's didn't work also after change !
    – Dun7ill
    Jan 21, 2023 at 7:39
0

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"}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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