0

My end goal is to put several Count Up numbers on my custom front page. But I'm having trouble getting it implemented.

First, I installed the Count Up library (https://github.com/inorganik/CountUp.js) and put it in the libraries directory.

Then in mytheme.libraries.yml, I put

countup:
  version: 1.0
  js:
    /libraries/countup.js/dist/countUp.umd.js: {}
  dependencies:
    - core/jquery

And then in page--front.html.twig, I put

{{ attach_library('mytheme/countup') }}
            <div class="countup">
              <div id="transit_count">0</div>
              <script>
                $(function() {
                  let transits = new CountUp('transit_count', 6699);
                  if (!transits.error) {
                    transits.start();
                  } else {
                    console.error(transits.error);
                  }
                });
              </script>
            </div>

When I flushed the cache, I got this error: "Uncaught ReferenceError: CountUp is not defined".

What am I missing here? I'm pretty weak at JS so it could be something obvious.

Thanks!

2
  • Check your site, is there countUp.umd.js attached? Simple solution: drupal.org/project/countup
    – Nikit
    Apr 8, 2021 at 21:21
  • @Nikit, yes, the script call shows up in the HTML. The Count Up Drupal module is for making the feature available to CKEditor which is not what I want to do. I did install it just in case it helped, but it didn't.
    – Chanel
    Apr 8, 2021 at 22:13

2 Answers 2

0

Working sample:

     <!DOCTYPE HTML>
     <html>
     <head>
       <meta charset="UTF-8">
       <title>CountUp.js</title>

       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
       <script src="dist/countUp.umd.js"></script>
     </head>

     <body>

        <div class="countup">
          <div id="transit_count">0</div>
          <script>
            (function ($) {
              let transits = new countUp.CountUp('transit_count', 6699);
              if (!transits.error) {
                transits.start();
              } else {
                console.error(transits.error);
              }
            })(jQuery);

          </script>
        </div>

    </body>
    </html>
2
  • 1
    That works, thank you! I was hoping to do it the "Drupal way" but as long as it works I'm not going to complain.
    – Chanel
    Apr 9, 2021 at 17:08
  • @Chanel not sure for down vote, I am just show JS mistake, there's no Drupal way. At least, I recommend put code into js file, not in HTML code.
    – Nikit
    Apr 9, 2021 at 21:52
1

You basically had it right, just a typo in your JS as the Nikit pointed out. The correct answer should include the JS in the template file.

In mytheme.libraries.yml:

countup:
  js:
    /libraries/countup.js/dist/countUp.umd.js: {}

Because that's there, there's no need to put it in the HEAD again.

And then in the template file, page--front.html.twig, put:

<script>
    (function () {
        let transits = new countUp.CountUp('transit_count', 6699);
        if (!transits.error) {
            transits.start();
        } else {
            console.error(transits.error);
        }
    });
</script>

However, you shouldn't need to put this in a template file, rather you should put it in a custom theme JS file(s) that deals with theme JS.

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.