OdeChan Posted September 16, 2020 Share Posted September 16, 2020 (edited) I've seen this being asked several times, but no one gave a solution, and I haven't seen a relevant issue for this in the GitHub either, so I'm trying to figure out if it's some sort of user error. I want to make changes to my theme without modifying the original theme (in case I mess something up). What I did so far: Downloaded the child theme through the back-office, but uploading it back through the back-office yielded "File Invalid" error. Unzipped the child theme into my "themes" folder, so it now contains the default files and folders: preview.png, assets -> custom.css, config -> theme.yml and an index.php in each directory. In theme.yml, set use_parent_assets: true Deleted shop1.json from <root_folder>/config/themes/<child theme>/ The problem: The css's and javascripts (and perhaps others I don't know about) from the parent aren't loading in the child. Specifically the product page assets (but I'm not sure if other assets on other pages aren't being loaded either). You'd think that until here the child theme would look exactly the same as the parent theme, as it should be using all of its assets and no changes have been made to the child that would override. I tried inspecting an element that should be colored red, and does in the parent theme but has the default text colors when turning on the child theme.When parent theme is on: the product.css file gets loaded. There is call to the file in the <head> as such: <link rel="stylesheet" href="https://<domain>/<uri>/themes/<parent theme>/assets/css/product.css" type="text/css" media="all"> (of course <domain>, <uri> and <parent theme> are replaced) When child theme is on: product.css doesn't get loaded and does not appear in the <head>, though theme.css of the parent does. <link rel="stylesheet" href="https://<domain>/<uri>/themes/<parent theme>/assets/css/theme.css" type="text/css" media="all"> I don't mind copying the css and js of the parent to my child and configuring them in the theme.yml for the products page, but I fear that other parts of the sites that aren't touched by the child theme will break due to missing assets. What am I doing wrong? How can I make all the parent's assets get loaded for the child? Any ideas to what I can try? Addition: I noticed a thing - when changing prestashop to the parent theme, deleting shop1.json and then changing back to the child theme, presta creates a larger shop1.json file than when you just delete shop1.json and refresh a page. The bigger shop1.json has a lot of information from the parent theme (modules to hook, available layouts, theme setting, etc.). It doesn't however have the assets, except for "use_parent_assets: true", but it does have additional information to the parent such as "parent directory" WHICH IS WRONG: "parent_directory": "/home/<hosting username>/public_html/<uri>/themes/<child theme>/", I feel like changing the parent directory to the correct one should have helped, but it did nothing. Tried doing this with "use_parent_assets" both true and false. Edited September 16, 2020 by OdeChan (see edit history) Link to comment Share on other sites More sharing options...
OdeChan Posted September 16, 2020 Author Share Posted September 16, 2020 (edited) Solution: I don't know if this is the CORRECT way to fix this, or if this is the way it should work (probably not), but it does work! Copy the assets over from the parent's config -> theme.yml to the child's config -> theme.yml. Keep "use_parent_assets: true" in the "assets", just add the parent's "css" and "js" (and everything under them) below that line. Under the asset you want to add (ex. "css"), add whatever css file you want to use in you child theme as such (make sure they are indented correctly): - id: product-child path: assets/css/product1.css media: all priority: 51 Note: id has to be unique and different from the parent's CSS. priority should be a higher number than the parent's css file. The path should be kept relative, even if they are the parent's. If they are the child's Note 2: path's filename needs to be a different than the parent's filename. If it's the same, it overrides the parent's file completely, rather than add to it. You can use this to you advantage if you want to start the CSS fresh or copy the parent's CSS into the child's CSS. Fix the "parent_directory" value in the shop1.json: Go to "<Prestashop directory>/src/Core/Addon/Theme/Theme.php" Change (line 43) from: $parentAttributes['parent_directory'] = rtrim($attributes['directory'], '/') . '/'; to: $parentAttributes['parent_directory'] = _PS_ALL_THEMES_DIR_ . $attributes['parent'] . '/'; If you're child theme is turned on, switch to the parent's theme in the back-office -> Design -> Theme & Logo. Switch back to the child theme (in the back-office -> Design -> Theme & Logo). This will regenerate the shop1.json file. Rejoice Note that if you want to add a new CSS/JS to the child theme, you need to add it to the theme.yml file (of the child), change to the parent theme and then change back to the child theme (or edit the shop1.json to match). It's not ideal, but it can help to change in your parent's config modules that you want to (not) turn on automatically or be hooked, as switching between them will override the hooks and module status. I hope this helps anyone who had and will have this problem Edited September 16, 2020 by OdeChan (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now