How to load custom CSS/JS in frontend ?



  • Hello guys,

    I tried to load some custom css and js in frontend but I managed to do that just in content section. I need the files to be loaded in the head section. I did something like this:

    The files are in : public/modules/gps/css/ and public/modules/gps/js/

    asgard.core.core.php

    'frontend-assets' => [
        'css' => [
            'leaflet-routing-machine.css' => ['module' => 'gps:css/leaflet-routing-machine.css'],
            ],
        'js'=> [
            'leaflet-routing-machine.js' => ['module' => 'gps:js/leaflet-routing-machine.js'],
        ]
                   
    ]
    

    class PublicController extends BasePublicController
    #constructor

        $this->assetManager = app('Modules\Core\Foundation\Asset\Manager\AssetManager');
        $this->assetPipeline = app('Modules\Core\Foundation\Asset\Pipeline\AssetPipeline');
    

    #index

      foreach (config('asgard.core.core.frontend-assets.css') as $assetName => $path) {
                     $this->assetManager->addAsset($assetName, Module::asset($path['module']));
        }
    
      foreach (config('asgard.core.core.frontend-assets.js') as $assetName => $path) {
                          $this->assetManager->addAsset($assetName, Module::asset($path['module']));
        }
    

    $this->assetPipeline->requireCss('leaflet-routing-machine.css');
    $this->assetPipeline->requireCss('leaflet-routing-machine.js');

    I think I'm missing something because the files are not loaded .

    Also I want to load bootstrap.css and jquery in frontend .

    Thank you!


  • Global Moderator

    @texx
    Do you use your own theme or you use Flatty?
    Flatty does not have asset view composer for example you have to make one or include assets manually in master layout.

    Implementation is okay, it's just about including them.



  • I solved it. Thank you for support.
    Added in controller:

    $d['cssFiles'] = $this->assetPipeline->allCss();
    $d['jsFiles'] = $this->assetPipeline->allJs();

    And in master.template

    @foreach($cssFiles as $css)
        <link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset($css) }}">
    @endforeach
    

    @foreach($jsFiles as $js)
    <script src="{{ URL::asset($js) }}" type="text/javascript"></script>
    @endforeach


Log in to reply