Add own script.js file to avia-footer-scripts.js - Support | Kriesi.at

Tagged: custom, enfold, js, merge, script

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

December 22, 2018 at 2:14 am #1048476

fecgz

Participant

Hi,
I really love the merge feature of enfold.
Now I added an custom script (childtheme) to my website:

function custom_scripts(){
    ?>
    <script type='text/javascript' src="./wp-content/themes/enfold-child/js/custom.min.js"></script>
    <?php
    }
    add_action('wp_footer', 'custom_scripts');

Unfortunately the custom.js is not merged with all other .js files from the theme (avia-footer-scripts.js).
Is it possible to add my code, so that it will get merged?

December 22, 2018 at 6:20 am #1048488

Guenni007

Participant

i would load my custom script via the enqueue a script file:

the custom.min.js file has to be in the child-themes/js Folder

Each goes to child-theme functions.php

function custom_js_script() {
    wp_enqueue_script( 'Custom-JS', get_stylesheet_directory_uri().'/js/custom.min.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_js_script' );

after that you can try to force to include it by the filter : avf_force_include_asset
this filter isn’t listet in the hooks and filter list here: https://kriesi.at/documentation/enfold/hooks-and-filters/
but it is present in : asset-manager.class.php

add_filter('avf_force_include_asset', 'avia_force_include_files', 10, 1);
function avia_force_include_files($force_included) {
	$force_include_js = array('Custom-JS');
	$force_included['js'] = array_merge($force_included['js'], $force_include_js);
  return $force_included;
}

December 22, 2018 at 10:13 pm #1048691

Victoria

Inactive Moderator

Hi fecgz,

Did you try the solution posted above?

Best regards,
Victoria

December 22, 2018 at 10:58 pm #1048707

fecgz

Participant

Thanks a lot Guenni007,

your hint was really helpful. Here is the solution:

To achieve merging your custom .js files with all other .js files you need to do three things:
Go to you parent enfold themes folder:
wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/asset-manager.class.php

On line 242 you will see the following code:

				 if( ('all' == $this->which_files[$file_type] ) || 
				 	('avia-module' == $this->which_files[$file_type] && strpos($file, 'avia-module') !== false ) ||
				 	('avia' == $this->which_files[$file_type] && strpos($file, 'avia') !== false ) ||
				 	( $force_print ))

This code has a bug, go and change it to:

				// -------------------------------------------------------
				//                   Bugfix - old code
				// -------------------------------------------------------
				// if( ('all' == $this->which_files[$file_type] ) || 
				// 	('avia-module' == $this->which_files[$file_type] && strpos($file, 'avia-module') !== false ) ||
				// 	('avia' == $this->which_files[$file_type] && strpos($file, 'avia') !== false ) ||
				// 	( $force_print )) 
				// -------------------------------------------------------
				//                        new Code
				// -------------------------------------------------------

				if( ('all' == $this->which_files[$file_type] ) || 
					('avia-module' == $this->which_files[$file_type] && strpos($file, 'avia-module') !== false ) ||
					('avia' == $this->which_files[$file_type] && strpos($file, 'avia') !== false ) ||
					( $force_print ) ||
					( in_array( $file, $this->force_include[ $file_type ] ) ))				

				// -------------------------------------------------------
				//                     end of new Code
				// -------------------------------------------------------

After it, go and include your custom.js file in your child-theme functions.php like this:

/** load and merge custom.js with other theme .js files */
function custom_scripts() {
    wp_enqueue_script( 'Child-JS', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

add_filter('avf_force_include_asset', 'avia_force_include_files', 10, 1);
function avia_force_include_files($force_included) {
    $force_include_js = array('Child-JS');
    $force_included['js'] = array_merge($force_included['js'], $force_include_js);
return $force_included;
}

The last step is to acitvate file-merging of corse:
Enfold Child Theme Options -> Leistung (should be something like performance in EN) -> there:
Enable Javascript file merging and compression

That should do the trick. Again a big thank to Guenni007.