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?
Replies (6)
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>
@endsectionRegister 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>
@endsectionWebpack (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",
}Up !
Any help is welcome
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.
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
