Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

How to integrate theme on AdonisJs project


Hi,

I bought the Metronic Seven Pro theme: https://keenthemes.com/products/seven-html-pro
I want to integrate it to create the dashboard of my application, but I can't integrate it correctly.

I have tried to put the compiled files in my resources but I have errors appearing, functions indicated as undefined etc.

I see in the docs an explanation for installing it on the server side on a Laravel or Blazor application. I've been trying to install AdonisJs on Laravel and my whole system is bug.

Can anyone tell me the right way to integrate with the AdonisJs framework?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi,

Sorry for the delay, and we miss looked into this issue.

Please check the file of resources/assets/core/plugins/plugins.js. You can try to import all these plugins file directly into your AdonisJs assets, instead of importing the generated plugins.bundle.js file from the HTML version. It contains the jquery plugin.

Thanks



Hi,

In your JS file
resources/assets/app/plugins/global/plugins.bundle.js
Is there any jquery imported?

Based on the error message "$ is not defined", it seems the jquery is not imported.

Thanks



All basic files are included by default in

As soon as I integrate the theme into the adonis webpack it doesn't work anymore.



Up !

Any help is welcome



Hi,

We do not have special integration docs for AdonisJs.

You can refer to this video tutorial to learn how to integrate compiled assets in server-side. The instructions can be applicable for Seven HTML pro as well since the structure is similar to Metronic one.

Regards.



I tried, but I have the same bug.

It's at the console level that it happens, the functions are not defined:


Uncaught ReferenceError: $ is not defined
at Object../resources/assets/app/plugins/global/plugins.bundle.js (plugins.bundle.js:19749:1)
at __webpack_require__ (bootstrap:24:1)
at startup:6:1
at startup:6:1
bootstrap:27

Uncaught ReferenceError: KTUtil is not defined
at Object../resources/assets/app/js/custom/authentication/sign-in/general.js (general.js:118:1)
at __webpack_require__ (bootstrap:24:1)
at startup:6:1
at startup:6:1
scripts.bundle.js:6854

Uncaught ReferenceError: SmoothScroll is not defined
at initSmoothScroll (scripts.bundle.js:6854:9)
at Object.initSmoothScroll (scripts.bundle.js:7049:13)
at Object.init (scripts.bundle.js:6967:18)
at HTMLDocument.<anonymous> (scripts.bundle.js:7064:11)


Layout Auth (call script):

@section("script")
<script src="{{ asset("assets/plugins_bundle_js.js") }}"></script>
<script src="{{ asset("assets/scripts_bundle_js.js") }}"></script>
@endsection


Register page :

@layout("layout_auth")
@set("title", "Inscription")

@section("body")

<!--begin::Wrapper-->
<div class="w-lg-600px bg-body rounded shadow-sm p-10 p-lg-15 mx-auto>...</div>
<!--end::Wrapper-->

@endsection

@section("script")
@super
<script src="{{ asset("assets/signup_js.js") }}"></script>
@endsection


Webpack (Encore):

Encore.addEntry("plugins_bundle_js", "./resources/assets/app/plugins/global/plugins.bundle.js")
Encore.addEntry("scripts_bundle_js", "./resources/assets/app/js/scripts.bundle.js")
Encore.addEntry("widget_bundle_js", "./resources/assets/app/js/widgets.bundle.js")

Encore.addEntry("signup_js", "./resources/assets/app/js/custom/authentication/sign-up/general.js")
Encore.addEntry("signin_js", "./resources/assets/app/js/custom/authentication/sign-in/general.js")
Encore.addEntry("forgetpwd_js", "./resources/assets/app/js/custom/authentication/password-reset/password-reset.js")


Manifest.json :

{
"assets/plugins_bundle_js.js": "http://localhost:8080/assets/plugins_bundle_js.js",
"assets/scripts_bundle_js.js": "http://localhost:8080/assets/scripts_bundle_js.js",
"assets/widget_bundle_js.js": "http://localhost:8080/assets/widget_bundle_js.js",
"assets/signup_js.js": "http://localhost:8080/assets/signup_js.js",
"assets/signin_js.js": "http://localhost:8080/assets/signin_js.js",
"assets/forgetpwd_js.js": "http://localhost:8080/assets/forgetpwd_js.js",

}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(