Jump to content

[1.7.*] Child themes multiple questions

Louis7777

By Louis7777
in General topics

 Share

Recommended Posts

Louis7777 Newbie

Louis7777

Posted
Posted (edited)

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?

Edited by Louis7777 (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
benw Newbie

benw

Posted
Posted

I'm having the same kind of problems due to lack of documentation.

 

Here are some things I've found out so far that might help.

 

1.7 documentation (incomplete)

 

http://doc.prestashop.com/display/PS17/English+documentation

 

It's missing the entire "Design" section. I found an article from June 2016 saying it would be released soon but I guess it never happened yet? http://build.prestashop.com/news/module-development-changes-in-17/

 

The Developers section is also incomplete and just points to: http://developers.prestashop.com/

 

The GitHub page has some links to updated docs: 

https://github.com/PrestaShop/PrestaShop/tree/develop

 

In a Smarty template you can display all current variables with {debug} (opens in a popup window).

 
  • Like 1
Link to comment
Share on other sites
Louis7777 Newbie

Louis7777

Posted
  • Author
Posted

Thank you for the {debug} tip. :)

 

I can't believe that there's no one who can easily answer all that basic stuff!!!

I believe that the answers to all of my questions should be smaller than my post.

 

How time consuming would it be for the devs to update the documentation with at least the basic stuff?

 

PrestaShop is one of the few top choices for making e-shops. It is such a shame that I feel so lost when trying to create with it!

Link to comment
Share on other sites
  • 1 month later...
GRBurst Newbie

GRBurst

Posted
Posted

Hey,

​I just started to use PrestaShop and had similar problems...

​

If one use google this is one of the very first results so I decided to create an account here and ​answer at least your first question... after trying out some stuff I can tell the following:

1.) Your child theme is correct, but you have to specify a higher priority, otherwise this won't override the parent styles (this is not intuitive for the child theme paradigm). So after adding a high priority, it started working:
​

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
    priority: 1100

​

​2.) Overriding parent template files from child theme
I do not fully understand your question but for overriding parent template files from child theme there is some documentation available: ​http://developers.prestashop.com/themes/smarty/parent-child-feature.html

​
So a common use case is to replace the copyright text in the footer of the classic's child template
So create a folder hierarchie in your child theme folders and create a file "footer.tpl" in it, e.g create templates/_partials/footer.tpl.

 

​In the original footer.tpl (themes/classic /templates/_partials/footer.tpl) there is this section (line 47-51):

          {block name='copyright_link'}
            <a class="_blank" href="http://www.prestashop.com" target="_blank">
              {l s='%copyright% %year% - Ecommerce software by %prestashop%' sprintf=['%prestashop%' => 'PrestaShop™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme'}
            </a>
          {/block}

In the footer.tpl of your childs theme, replace it with:

{extends file='parent:_partials/footer.tpl'}
{block name='copyright_link'}
  {l s='%copyright% [Your copyright text]' sprintf=['%copyright%' => '©'] d='Shop.Theme'}
  <a class="_blank" href="[Your site link]" target="_blank">
    {l s='[Your site text]' d='Shop.Theme'}
  </a>
{/block}

This keeps the parent footer and only replaces the 'copyright_link' block.
 

​Hopefully this helps you

Link to comment
Share on other sites
  • 6 months later...
NewMan Newbie

NewMan

Posted
Posted (edited)
En 6/6/2017 a las 0:54 AM, GRBurst dijo:

Hey,

I just started to use PrestaShop and had similar problems...

If one use google this is one of the very first results so I decided to create an account here and answer at least your first question... after trying out some stuff I can tell the following:

1.) Your child theme is correct, but you have to specify a higher priority, otherwise this won't override the parent styles (this is not intuitive for the child theme paradigm). So after adding a high priority, it started working: 


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
    priority: 1100

2.) Overriding parent template files from child theme
I do not fully understand your question but for overriding parent template files from child theme there is some documentation available: http://developers.prestashop.com/themes/smarty/parent-child-feature.html


So a common use case is to replace the copyright text in the footer of the classic's child template
So create a folder hierarchie in your child theme folders and create a file "footer.tpl" in it, e.g create templates/_partials/footer.tpl.

 

In the original footer.tpl (themes/classic /templates/_partials/footer.tpl) there is this section (line 47-51): 


          {block name='copyright_link'}
            <a class="_blank" href="http://www.prestashop.com" target="_blank">
              {l s='%copyright% %year% - Ecommerce software by %prestashop%' sprintf=['%prestashop%' => 'PrestaShop™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme'}
            </a>
          {/block}

In the footer.tpl of your childs theme, replace it with: 


{extends file='parent:_partials/footer.tpl'}
{block name='copyright_link'}
  {l s='%copyright% [Your copyright text]' sprintf=['%copyright%' => '©'] d='Shop.Theme'}
  <a class="_blank" href="[Your site link]" target="_blank">
    {l s='[Your site text]' d='Shop.Theme'}
  </a>
{/block}

This keeps the parent footer and only replaces the 'copyright_link' block.
 

Hopefully this helps you

hello, im new in prestashop and have a similar problem i created a child theme and the classic as parent, the problem is i whant a change in my logo and i read the prestashop developer guide about child themes and how to override, and i tryet but dosent make any change mi code is:


<div class="col-md-6 hidden-sm-down" id="_desktop_logo">
    <a href="{$urls.base_url}">
        <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
    </a>
</div>

y cleaned the cache but dosent change nothing.

in the image you can see the theme.yml file and the file y want to change is the header.tpl 

any sugestion for what is the problem?

Thanks.

okay, i got it, my problem is solved, the thing is that in the documentation dosent say that you have to copy all the block of what you whant to change, i only was coping the div i need to change and there is the error, the second image code is working.

 

 

Screenshot_2.png

Screenshot_3.png

Edited by NewMan
i solved my problem (see edit history)
Link to comment
Share on other sites
  • 1 month later...
joseburgardt Newbie

joseburgardt

Posted
Posted (edited)

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

Applying indents to the assets tree solved my problem

Change 

assets:
use_parent_assets: true
css:
all:
- id: custom-lib-style
path: assets/css/custom-lib.css

For this 

assets:
  use_parent_assets: true
  css:
    all:
      - id: custom-lib-style
      path: assets/css/custom-lib.css
  js:
    all:
      - id: owl-carousel-lib
      path: /assets/js/owl.carousel.js
      priority: 100
      position: bottom

Clean the cache.

(PrestaShop version: 1.7.2.4)

Edited by joseburgardt (see edit history)
  • Thanks 1
Link to comment
Share on other sites

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...