CSS and JS don't load on theme on ps 1.7.3

[Eljaouhari]

Hello everyone,

I'm new to prestashop theme development and I'm trying to load css and js libraries that I've chosen to work with but none of what's mentioned in the documentation seems to work.

I'm working with the StarterTheme and I've tried these two solutions but none of them work.

https://coderwall.com/p/wn0czq/add-your-js-and-css-files-to-a-prestashop-theme as follows in the override/classes/controller/FrontController.php

<?php

class FrontController extends FrontControllerCore
{
    public function setMedia()
    {
        parent::setMedia(); // CSS files
        

        Tools::addJS(_THEME_JS_DIR_.'materialize.js');
        $this->registerStylesheet('materialize-css', '/themes/custom-materialize/assets/css/materialize.css', ['media' => 'all', 'priority' => 50]);
        
        $this->registerJavascript('materialize-js', '/themes/custom-materialize/assets/js/materialize.js', ['position' => 'bottom', 'priority' => 0]);
    }

And Also I've tried registering the assets using theme.yml

assets: 
  css:
    all:
      - id: stylesheet-materialize
        path: assets/css/materialize.css
        media: all
        priority: 1
  js:
    all:
      - id: script-materialize
        path: assets/js/materialize.js
        priority: 1
        position: bottom

name: custom-materialize
display_name: Custom Materialize
version: 3.0.0
author:
  name: "ELJAOHARI Hamza"
  email: "[email protected]"
  url: "http://www.undefined.com"

meta:
  compatibility:
      from: 1.7.2.0
      to: ~

  available_layouts:
    layout-full-width:
      name: Full Width
      description: No side columns, ideal for distraction-free pages such as product pages.
    layout-both-columns:
      name: Three Columns
      description: One large central column and 2 side columns.
    layout-left-side-column:
      name: Two Columns, small left column
      description: Two columns with a small left column
    layout-right-side-column:
      name: Two Columns, small right column
      description: Two columns with a small right column

global_settings:
  configuration:
    PS_QUICK_VIEW: false

  hooks:
    custom_hooks:
      - name: displayFooterBefore
        title: displayFooterBefore
        description: Add a widget area above the footer
    modules_to_hook:
      displayNav:
        - ps_shoppingcart
        - ps_languageselector
        - ps_currencyselector
        - ps_customersignin
      displayTop:
        - ps_mainmenu
      displayHome:
        - ps_imageslider
        - ps_featuredproducts
        - ps_banner
      displayFooter:
        - ps_contactinfo

  image_types:
    cart_default:
      width: 80
      height: 80
      scope: [products]
    small_default:
      width: 125
      height: 125
      scope: [products, categories, manufacturers, suppliers]
    medium_default:
      width: 300
      height: 300
      scope: [products, categories, manufacturers, suppliers]
    large_default:
      width: 500
      height: 500
      scope: [products]
    home_default:
      width: 250
      height: 250
      scope: [products]
    category_default:
      width: 960
      height: 350
      scope: [categories]
    stores_default:
      width: 170
      height: 115
      scope: [stores]

theme_settings:
  default_layout: layout-full-width

  layouts:
    category: layout-left-side-column
    best-sales: layout-left-side-column

Any solutions? Thanks in advance!

Edited April 7, 2018 by Eljaouhari (see edit history)

[Rhobur]

Check the registerJavascript method of the parent controller and use it in the hookActionFrontControllerSetMedia of your class