Ideally...
You would do merge everything but the CSS/JS of the "old" html_header.php.
You can do which ever you choose.
I'll give a a quick overview of building an auto_loader, many others have difficulty with this.
So it may be a good idea.
Create a file for every different scenario you would need different CSS / JS files loaded.
put this file in the catalog/includes/templates/YOUR_TEMPLATE/auto_loaders/
start the file with "loader_", the end is best for something to make your life easier like lets call our loader_featured.php
you will need to know 3 things:
1.) Pages you want to load these files on
2.) JS files you want to load (and their location)
2.) CSS files you want to load (and their location)
Example
1.)
Lets say you wanted a loader for the new products and featured and the pages.
Those constants go in the pages array below, you can also just use one (then you don't need the comma)
2.)
we want to load the following javascript files (relative to the includes/templates/YOUR_TEMPLATE/jscript) in this order
//code.jquery.com/jquery-1.11.3.min.js (note the double slashes is used to use http/https depending on the current.)
jquery/jquery-migrate-1.2.1.min.js
jquery/jquery-ui-1.10.2.custom.min.js
jquery/index.js
add the files in the jscript_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1
3.)
we want to load the following CSS files(relative to the includes/templates/YOUR_TEMPLATE/css) in this order
stylesheet_master.css
featured_products.css
add the files in the css_files array, with the key being the file, and the value being the order to load them in. Avoid duplicate numbers in a single auto-loader, and always start with 1
We would get the following result.
PHP Code:
<?php
$loaders[] = array('conditions' => array('pages' => array(FILENAME_PRODUCTS_NEW, FILENAME_FEATURED_PRODUCTS)),
'jscript_files' => array(
'//code.jquery.com/jquery-1.11.3.min.js' => 1,
'jquery/jquery-migrate-1.2.1.min.js' => 2,
'jquery/jquery-ui-1.10.2.custom.min.js' => 3,
'jquery/index.js' => 5
),
'css_files' => array(
'stylesheet_master.css' => 1,
'featured_products.css' => 2
)
);
if you want to load on all pages, the pages array would look like:
array('pages' => array('*')).
This avoids duplicate loading of jQuery
TIP: Many modules may put additional js files in: includes/modules/pages/PAGE_NAME/
and those will need to be moved to the includes/templates/YOUR_TEMPLATE/jscript and then added to the respective auto_loader
NOTE: You can have multiple auto-loaders for a single page, basically they CAN overlap.
Bookmarks