Jump to content

[1.7.*] Child themes multiple questions

Louis7777
 Share

Recommended Posts

Louis7777 Newbie

Louis7777

Posted
Posted

I've created a child theme of "classic" and I've been trying to figure out a lot of things. I would like your thoughts, corrections and your step by step how-to.

 

 

1) Configuring CSS for the child theme in theme.yml

 

parent: classic
name: mychildtheme
display_name: My Child Theme
version: 1.0.0
assets:
  # If you're using this theme as child and you want to load
  # the parent theme assets, uncomment this line.
  use_parent_assets: true
  # The following lines are showing how to load assets in your page
  # Uncomment and change value to start loading css or js files
  css:
    all:
      - id: custom-lib-style
        path: assets/css/custom-lib.css

 

As you can see above, I want the child to use all of the parent's CSS and to additionally load a custom-lib.css file.

 

Am I doing it right?

 

I guess not, because I had no luck loading the custom-lib.css file.

 

So, in the end, I used the standard custom.css file for everything.

 

HOWEVER, I upgraded 1.7.0.6 to 1.7.1 today, and the custom.css of the child won't load either!!! What loads instead is the parent's custom.css. Why is that?

 

How do I override the parent's CSS while still keeping the "use_parent_assets: true"???

 

 

2) Adding language expressions to overridden template files

 

 

Let's say that I want to override the classic site header and so I recreate it in the child theme like this:

themes/mychildtheme/templates/_partials/header.tpl

I am overriding a template so I'll want to add my own multilingual text too, and so I throw in some smarty stuff like this:

{l s='Header Information' d='Shop.Mytheme'}

And so I've just created a new language expression and then I can go @ the backoffice to International > Translations > Themes translations [modify] , then type "Header Information" or just "Header", fill in the appropriate language field and save it.

 

Is this the correct way of doing things?

 

And how can I save the languages in the child theme's directory so that it will be a fully portable theme?

 

I can see a "translations" folder with language sub-directories but they are always empty!

 

 

3) Smarty template variables usage and documentation [v1.7.*]

 

 

3a. Finding out what is available to use?

 

First of all, I was unable to find any up-to-date article on available global template variables and how to use them.

 

I kept stumbling upon old information such as this:

https://www.prestashop.com/forums/topic/57122-global-smarty-variables-used-in-prestashop/

 

None of those work. For example, {$shop_name} won't do anything because {$shop.name} is the correct one. The variable {$base_dir} won't do anything at all, but {$urls.base_url} will.

 

So I had to find them out myself by looking at how things are done in the classic theme templates. I saw there instances of $shop, $urls, $currency, $cart and others. Some are global, some only work in specific module templates.

 

I am aware that there is some inline JavaScript in the theme's <head> that contains relevant information, but it's not that much helpful.

 

I had to @var_dump them to find out what each one has to offer. Like this:

<pre>{$node|@var_dump}</pre>
<pre>{$shop|@var_dump}</pre>
<pre>{$urls|@var_dump}</pre>
<pre>{$page|@var_dump}</pre>
<pre>{$language|@var_dump}</pre>
<pre>{$current_language|@var_dump}</pre>
<pre>{$cart|@var_dump}</pre>
<pre>{$product|@var_dump}</pre>
<pre>{$currency|@var_dump}</pre>

Is there any proper documentation that would save me from all this trouble?

 

Keep in mind that I only want to mess with themes. I want to work only in the "themes" folder i.e. no PHP recipes, controllers etc. In other words, only template files with smarty syntax and HTML, CSS, JavaScript, and YAML.

 

 

3b. How to import local variables in other templates?

 

For example, variables like {$cart.products_count} and {$cart.totals.total.value} can only appear in modules/ps_shoppingcart/ps_shoppingcart.tpl. Is there any way to use them elsewhere?

 

 

3c. Global variables seem to cause malfunctions inside certain modules?

 

I will present a couple of examples below.

 

I'm overriding modules/ps_shoppingcart/ps_shoppingcart.tpl in the child theme.

 

Let's say that I place anywhere in the file the variable {$currency.sign}. Boom. Emptying the cart no longer updates the cart and a page refresh is required!?

 

Now let's get more weird. Let's say that I place anywhere in the file a variable that prints the URL of the order page. Be it a smarty variable, be it a JavaScript document.write()... try whatever you want to print the URL of the order page and... boom... the cart modal doesn't show up whenever you try to buy a product.

 

So what's up? Where can I educate myself about these issues?

Link to comment
Share on other sites
Ahmadoooo Newbie

Ahmadoooo

Posted
Posted

Hi Louis, I am exactly in the same shoe as you are. I would like all of your questions answered.

 

I can only answer you last question as I just solved it an hour ago or so.

 

In the ps_shoppingcart.tpl, I found that it has to start with div that has no refresh. For example, you need to start like this:

 

<div>

<div class="blockcart" data-refresh...etc>

.....your code........

</div>

</div>

 

and then it should work probably.

 

I hope this helps

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...