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,

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

}

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

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  :(