How to use popper in octobercms

Question

I'm new here and kind of a beginner, so I hope my questions are not too stupid! I'm currently developing a website using October CMS, and the theme I'm using doesn't have popper.js integrated.

I'd like to give my navbar (using Bootstrap) some nice dropdown menus, but I can't make it work. After looking around the web, it seems I need popper.js to make it work.

My question is this one:

Do you guys know a way to integrate popper.js to October?

Do I need to create a partial?

So far I've tried to copy/paste the link to the library at the bottom of the <body> but it doesn't seem to work.

Thanks in advance! Cheers

m3ssy

Edit:

Sorry guys, I've been away for the week-end..but thanks so much for your answers. I've tried them all but nothing works!

Here is the navbar:

<nav id="nav" class="navbar navbar-nav">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="{{ 'home'|page }}">Home</a></li>
        <li class="nav-item dropdown"><a href="{{ 'dirigent'|page }}"     id="navbarDropdown" class="{% if this.page.id == 'dirigent' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Dirigent</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Something</a>
          </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'chor'|page }}" class="{% if this.page.id == 'chor' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Chor</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item dropdown"><a href="{{ 'media'|page }}" class="{% if this.page.id == 'media' %}active{% endif %}" class="nav-link dropdown-toggle" role="button">Media</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Something</a>
      </div>
    </li>
    <li class="nav-item"><a href="{{ 'termine'|page }}" class="{% if this.page.id == 'termine' %}active{% endif %}">Termine</a></li>
</ul>

And here is the code for the links script in october:

<script src="{{ ['assets/js/jquery.min.js','assets/js/jquery.scrollex.min.js', 'assets/js/jquery.scrolly.min.js', 'assets/js/skel.min.js', 'assets/js/util.js', 'assets/js/main.js', 'assets/js/popper.min.js', 'assets/js/bootstrap.bundle.min.js'] |theme}}"></script>

I have to also precise that I'm developping on my localhost!

Thanks guys! Cheers

It's helpful to provide the code for what you have, along with any error messages and/or description of the current behavior. — zanerock, Jul 12 '18 at 16:28
popper.js is "built in" to Bootstrap. My first suggestion is to use a Bootstrap build that includes it. Are you using BS v3 or v4? — fnostro, Jul 12 '18 at 17:24
@zanerock: the code would be quite long and I would have to edit a lot. I don't know how to create a jsfiddle for october. — m3ssy69, Jul 12 '18 at 17:32
@fnostro: I'm using bootstrap v4, but the documentation still says I have to integrate the script at the end of the body for popper. — m3ssy69, Jul 12 '18 at 17:32
Don't include all the code, just the relevant bits. E.g., show where you are including the popper library and how you are calling popper methods. That, with the context of the framework as you've described can help. Refer to the guide on [asking good questions](https://stackoverflow.com/help/how-to-ask). — zanerock, Jul 12 '18 at 17:34
@m3ssy69: and? popper is available as a cdn link so it should be easy to integrate. Just be sure to place it *before* the Bootstrap.js link — fnostro, Jul 12 '18 at 17:42
there is nothing to do extra in OctoberCMS when you built custom themes in it. Its very flexible. You need to follow the theme structure just like you create HTML themes. Once your HTML theme is ready, you can copy and paste the same flow in your OctoberCMS theme. You just need to make sure the things are dynamic. — Mittul At TechnoBrave, Jul 17 '18 at 06:14
So here in our scenario, you can put your required popper.js or etc in your head or wherever its appropriate for you and it should work well if its working in your html theme. — Mittul At TechnoBrave, Jul 17 '18 at 06:15

fnostro · Answer 1 · 2018-07-12T17:58:52.433

This is the "include list" for BS4:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Also, per BS4 Documentation:

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

So you can alternatively use:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

Refer to the BS4 Starter Template for an example of how these files should be incorporated.

How to use popper in octobercms

1 Answers1