Jump to content

Add Css And Javascript Files - New theme 1.4

Nesse
 Share

Recommended Posts

Nesse Newbie

Nesse

Posted
Posted

Hey there,

I have a little question on creating a new theme in 1.4. I have some additional css and javascript files i want to add dynamically in the header.tpl. I've read some other post concerning this issue, but didn't find a real answer that helps me forward. Could someone help me on my way?

The code used:

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}
{if isset($js_files)}
   {foreach from=$js_files item=js_uri}
   [removed][removed]
   {/foreach}
{/if}

Link to comment
Share on other sites
Cvalya Newbie

Cvalya

Posted
Posted

I have a same problem...

I'm add my own .ccs and .js files manually in header.tpl

Like this:

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
    <link href="/themes/THEME_NAME/css/FILE_NAME.css" rel="stylesheet" type="text/css" />
{/if}

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

prestapruebas

Posted
Posted

Hi,

I have been dealing with the same issue (Prestashop 1.4.0.17. As far as I have discovered, the big thing is in PS_root/classes/FrontController.php and PS_root/classes/Tools.php.

in frontcontroller.php:

    public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', _PS_JS_DIR_.'jquery/jquery.easing.1.3.js'));
       if ($cookie->live_edit)
       {





in tools.php:

       //overriding of modules css files
       $different = 0;
       $override_path = str_replace(__PS_BASE_URI__.'modules/', _PS_ROOT_DIR_.'/themes/'._THEME_NAME_.'/css/modules/', $css_uri, $different);
       if ($different && file_exists($override_path))
           $css_uri = str_replace(__PS_BASE_URI__.'modules/', __PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/modules/', $css_uri, $different);




As you can see you can override css files. The system loads some css files specified in some default directories and finally writes them with the loop given in header.tpl:

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}



I am trying to understand this structure and make the optimal changes to load only the desired css.

If anyone has any idea or more information, please post it.

Regards,

Link to comment
Share on other sites
  • 4 weeks later...
melriks Newbie

melriks

Posted
Posted

I don't think it actually works like expected.

I was editing the currencies module to move it to a side column.

One of the functions was to add a CSS file to the header to make the block work correctly.
That function calls to Tools:addCSS.

I think what's happening is the modules can use the Tools:addCSS to add their CSS file dynamically to the page.

However, as a template designer, there's no php function to enable a special CSS file to be added. Leaving us with hard coding in a css file in the header.tpl of your theme.

Just a theory at this point...

public function hookHeader($params)
   {
       if (Configuration::get('PS_CATALOG_MODE'))
           return ;
       Tools::addCSS(($this->_path).'blockcurrencies.css', 'all');
   }

Link to comment
Share on other sites
  • 3 weeks later...
Isaura1984 Newbie

Isaura1984

Posted
Posted

Had the same problem. If you don't want to apply code for new css file in header.tpl just add module to header of pages section (then you can remove it from there) - the css file will be added to <head> section. But still don't know how does it work with js files.

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
5dots Newbie

5dots

Posted
Posted

how solved about javascript ????????????????

 

Am I correct in thinking you are just wanting to add custom JS files?

 

If so, the way i worked around it is by simply adding a call to the custom file in header.tpl

{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
<script type="text/javascript" src="{$js_dir}custom.js"></script>
{$HOOK_HEADER}

 

this will add the custom js file to the header.

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

melriks

Posted
Posted

Here's how to add either javascript or css to the header in 1.4.1

 

You are looking for a controller. For instance, I wanted to add a javascript file to just the product pages so I used ProductController.php

 

1. Make your javascript.

2. FTP to your theme folder

3. Modify your tpl file to work with the javascript

4. Make a new php file. In my example, Product.php and place it in override/controllers

5. In that javascript, you are going to extend the core controller with your new one. Add code that looks similar to this

 

notice the structure of the first line "class ProductController extends ProductControllerCore". Modify to fit your needs

 

<?php
/*
* Add a javascript file to the header when viewing a product page
*/
class ProductController extends ProductControllerCore {
public function setMedia()
   {
    parent::setMedia();
    Tools::addJS(_THEME_JS_DIR_.'fancydancingsanta.js');
   }
}

 

6. FTP your override to override/controllers

7. Refresh your page and look to see if the magic happened.

 

You want to use an override to avoid erasing your changes during the next upgrade.

 

Good resource: http://www.prestashop.com/blog/article/modules_classes_and_controller_override_by_julien_breux/

 

Working with a module? You are out of luck. There's no way to override a module. Hack the module or add it to the header.tpl.

Link to comment
Share on other sites
  • 7 months later...
luchiniii Newbie

luchiniii

Posted
Posted

Hello

 

I was trying to do that, override the Product controler in order to add some css an javascript to the headers.

if you do what merliks says in prestashop 1.4.8.2, it will show nothing, you should copy the original function an then add the files by using:

 

Tools::addJS(_THEME_JS_DIR_.'fancydancingsanta.js'); //for javascript

 

Tools::addCSS(_THEME_JS_DIR_.'fancydancingsanta.css'); // for CSS

 

I would like to ask, how can you add a function for some purpose, and how can this function be executed automatically, where is the file that execute the product controller,

 

thanks!!

Link to comment
Share on other sites
  • 3 weeks later...
João Cunha Newbie

João Cunha

Posted
Posted (edited)

if you do what merliks says in prestashop 1.4.8.2, it will show nothing, you should copy the original function an then add the files by using:

 

Tools::addJS(_THEME_JS_DIR_.'fancydancingsanta.js'); //for javascript

Tools::addCSS(_THEME_JS_DIR_.'fancydancingsanta.css'); // for CSS

 

Actually Melriks is right, that is the right way to add custom CSS or JavaScript files to your prestashop without modifying its core files. Also, you are using the wrong constant for the CSS directory.

 

Just make sure you call parent::setMedia(); BEFORE adding the files.

Edited by João Cunha (see edit history)
Link to comment
Share on other sites
  • 3 months later...
  • 7 months later...
silberstern Newbie

silberstern

Posted
Posted (edited)

Hi,

 

I have just gone through the process of overriding CategoryController according with melriks guidelines. I wanted to add one js file to product list page. I do not get my js file included in the page. I do not understand why is that. Has anybody any idea? Here is my code:

 

 

class CategoryController extends CategoryControllerCore {

public function setMedia()

{

parent::setMedia();

Tools::addJS(_THEME_JS_DIR_.'product_list.js');

}

}

 

 

I have copied this in override/controllers folder and product_list.js to theme's js folder.

 

I do not have cache enabled. I have read that this was the cause of this behavior for other users.

I am using 1.4.8.2 PS.

 

Thanks.

Edited by silberstern (see edit history)
Link to comment
Share on other sites
  • 10 months later...
vekia Apprentice

vekia

Posted
Posted

hey it's not so hard, but it's necessary due to the .... modern times ;) believe me, today browsers use crappy restrictions, so you have to be sure that you use correct code to include files

 

with default tools features, you can be sure that everythnig will be allright :)

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