Orchard Core - failed to load resources #11333

moco32 · 2022-03-08T17:22:42Z

moco32
Mar 8, 2022

I am trying to create my own theme for Orchard Core based on bootstrap but it fails to load all of the resources, whether it's javascript or styles. This is my layout.liquid view

<!doctype html>
<html class="no-js" lang="zxx">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Fiction Multipage Bootstrap Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="wwwroot/plugins/bootstrap/bootstrap.min.css">
    <!-- ThemeFisher Icon -->
    <link rel="stylesheet" href="wwwroot/plugins/themefisher-fonts/themefisher-fonts.css">
    <!-- Light Box -->
    <link rel="stylesheet" href="wwwroot/plugins/magnific-popup/magnific-popup.css">
    <!-- animation css -->
    <link rel="stylesheet" href="wwwroot/plugins/animate/animate.css">
    <!-- slick slider -->
    <link rel="stylesheet" href="wwwroot/plugins/slick/slick.css">

    <!-- Revolution Slider -->
    <link rel="stylesheet" href="wwwroot/css/style.css">

    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map_canvas {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
    </style>
    <script src="wwwroot/plugins/modernizr.min.js"></script>
  </head>



    <script src="wwwroot/plugins/bootstrap/bootstrap.min.js"></script>
    <!-- slick slider -->
    <script src="wwwroot/plugins/slick/slick.min.js"></script>
    <!-- filter -->
    <script src="wwwroot/plugins/filterizr/jquery.filterizr.min.js"></script>
    <!-- Lightbox -->
    <script src="wwwroot/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
    <!-- Parallax -->
    <script src="wwwroot/plugins/parallax.min.js"></script>
    <!-- Video -->
    <script src="wwwroot/plugins/jquery.vide.js"></script>
    <!-- google map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>
    <script src="wwwroot/plugins/google-map/gmap.js"></script>

    <script src="wwwroot/js/script.js"></script>`

My ResourceManifest is like so

        static ResourceManagementOptionsConfiguration()
        {
            _manifest = new ResourceManifest();

            _manifest
                .DefineScript("PakomakTheme-bootstrap-bundle")
                .SetCdn("https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js", "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js")
                .SetCdnIntegrity("sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p", "sha384-8fq7CZc5BnER+jVlJI2Jafpbn4A9320TKhNJfYP33nneHep7sUg/OD30x7fK09pS")
                .SetVersion("5.1.3");

            _manifest
                .DefineScript("PakomakTheme")
                .SetUrl("~/wwwroot/js/scripts.min.js", "~/wwwroot/js/scripts.js")
                .SetVersion("7.0.10");

            _manifest
                .DefineStyle("PakomakTheme")
                .SetUrl("~/wwwroot/css/style.min.css", "~/wwwroot/css/style.css")
                // i also tried like so
                //.SetUrl("~/PakomakTheme/wwwroot/css/style.min.css", "~/PakomakTheme/wwwroot/css/style.css")
                .SetVersion("7.0.10");

            _manifest
                .DefineStyle("PakomakTheme-bootstrap-oc")
                .SetDependencies("PakomakTheme")
                .SetUrl("~/Assets/src/scss/bootstrap-oc.min.css", "~/Assets/src/scss/bootstrap-oc.css")
                .SetVersion("1.0.0");
        }

        public void Configure(ResourceManagementOptions options)
        {
            options.ResourceManifests.Add(_manifest);
        }
    }
}

and this is my project hierarchy

Any pointers as to why the styles and scripts are failing to load?

devlife · 2022-03-09T21:46:49Z

devlife
Mar 9, 2022

The first issue is that you need to remove wwwroot from the file paths. Second, if you add the files to your resource manifest then you need to add the name of your theme to the file paths.
This is an example from TheBlogTheme

_manifest
    .DefineScript("TheBlogTheme")
    .SetDependencies("TheBlogTheme-bootstrap-bundle")
    .SetUrl("~/TheBlogTheme/js/scripts.min.js", "~/TheBlogTheme/js/scripts.js")
    .SetVersion("6.0.7");

Note that the url contains the name of the theme TheBlogTheme and does not contain wwwroot.

Then this is how it's referenced in Layout.liquid
{% script name:"theblogtheme", at:"Foot" %}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Orchard Core - failed to load resources #11333

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Orchard Core - failed to load resources #11333

Uh oh!

Uh oh!

moco32 Mar 8, 2022

Replies: 1 comment

Uh oh!

Uh oh!

devlife Mar 9, 2022

moco32
Mar 8, 2022

devlife
Mar 9, 2022