Logic on head.html

[Ices-Eyes]

Hi,
I would like to ask a question. I wondering if there is any way to put some logic in the head.html file. What I would like to do is to read the persistent storage to check fore some setting and i.e. load some css files or some other based on the setting value. But trying it it says, probably correctly, that the PersistentStorage object is not available! Any way? Or the only way is to put the logic on the function.js and hence loading the file via js?

Thanks :)

[mleroi]

Hi Luca :)
What you need is to use the "template-args" filter (see example here) to pass the PersistentStorage module to the head.html template.

BUT this can't be done from theme's function.js because head.html template (and layout.html) are loaded early in the process and can't be handled from theme (for now). Only WP-AppKit addons can hook early enough to modify things in head or layout templates.

So what you want to do could be done from an addon. A WP-AppKit addon is just a WordPress plugin that hooks into specific WP-AppKit hooks.
If you feel like it I can give you some indications on how to create an addon that would allow to use the PersistentStorage module inside head.html.

[Ices-Eyes]

Hi, I've seen the documentation for the addon, but it does not say too much to me... I've tried to make one for other purposes, but going nowhere :D
Programming is not a problem, so if there is some hints or docs to see, they are really welcome... :)

[mleroi]

Ok great :D

Here's an addon bootstrap that you can use: https://github.com/mleroi/wpak-addon-test.
Used as is, it will just include the wpak-addon-test.js JS file at the beginning of the app initialization process.

To make the PersistentStorage module available in head.html you can modify this wpak-addon-test.js file like so:

define( [ 'core/theme-app', 'core/modules/persistent-storage' ], function ( App, PersistentStorage ) {
	 
	App.filter( 'template-args', function ( template_args, view_type ) {
		if ( view_type === 'head' ) {
			template_args.PersistentStorage = PersistentStorage;
		}
		return template_args;
	} );
	
} );

To install the addon: install it like a regular WordPress plugin, then you'll see it appear in your app edition panel under Addons > WP-AppKit Addon Test > check the checkbox to activate the addon for your app.

Hope that helps,
Don't hesitate for any question.

[Ices-Eyes]

Hi Mathieu, sorry for the late reply but have found time to try this just now. I made the plugn in wordpress and it appears in the app panel. The method seems to work in the app preview, but it seems not to work in the real app on the phone. Need to do some investigation on why this happening and if really it does not work or there is something else in the process that's not woring. All I do in the head file is, if a certain prop saved in the permanent storage exists and is true, then I write a link to reference a certain css file, otherwise not. Thanks, Luca 2017-11-16 22:28 GMT+01:00 Mathieu Le Roi <notifications@github.com>:

…

Ok great :D Here's an addon bootstrap that you can use: https://github.com/mleroi/ wpak-addon-test. Used as is, it will just include the wpak-addon-test.js <https://github.com/mleroi/wpak-addon-test/blob/master/js/wpak-addon-test.js> JS file at the beginning of the app initialization process. To make the *PersistentStorage* module available in *head.html* you can modify this *wpak-addon-test.js* file like so: define( [ 'core/theme-app', 'core/modules/persistent-storage' ], function ( App, PersistentStorage ) { App.filter( 'template-args', function ( template_args, view_type ) { if ( view_type === 'head' ) { template_args.PersistentStorage = PersistentStorage; } return template_args; } ); } ); To install the addon: install it like a regular WordPress plugin, then you'll see it appear in your app edition panel under *Addons* > *WP-AppKit Addon Test* > check the checkbox to activate the addon for your app. Hope that helps, Don't hesitate for any question. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#345 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMjXvNBjIK3InMJD2roM43WNi0BFJoAMks5s3KkZgaJpZM4QffH6> .

[Ices-Eyes]

Hi Matieu,
made some investingation, and it seems that all is working in the preview but not on the real app on the phone.
The error I obtain in the logcat is this one:
D/SystemWebChromeClient: : Line 39 : ReferenceError: PersistentStorage is not defined

These are the php plugin and js file I had (the js file is on the folder js of the php wordpress plugin folder, but tried to put it also on the js folder of the app:
PHP file:

<?php
if ( !class_exists( 'WpAppKitBootstrapAddon' ) ) {
    class WpAppKitBootstrapAddon {
        const name = 'WP-AppKit Bootstrap Addon';
        const slug = 'wpak-bootstrap-addon';
        public static function hooks() {
            add_filter( 'wpak_addons', array( __CLASS__, 'wpak_register_addon' ) );
        }
        public static function wpak_register_addon( $available_addons ) {
            $addon = new WpakAddon( self::name, self::slug );
            $addon->set_location( __FILE__ );
            $addon->add_js( 'js/wpak-bootstrap-addon.js', 'init' );

            $available_addons[] = $addon;
            return $available_addons;
        }
    }
    WpAppKitBootstrapAddon::hooks();
}
?>

JS File:

define( [ 'core/theme-app', 'core/modules/persistent-storage' ], function ( App, PersistentStorage ) {
	 
	App.filter( 'template-args', function ( template_args, view_type ) {
		if ( view_type === 'head' ) {
			template_args.PersistentStorage = PersistentStorage;
		}
		return template_args;
	} );
} );

Code in the heasd.html:

<% try {
    if( PersistentStorage.get( "settings", "useDarkTheme", false ) === true) { %>
    <link rel="stylesheet" href='<%= TemplateTags.getThemeAssetUrl("css/dark-theme.css") %>'>
<% } } catch ( e ) {} %>

Am I missing something?

Thanks!

[mleroi]

Hi Luca,
I've re-tested the same logic on my side (adding PersistentStorage module to head.html via addon) and it worked for me on a real built / real device (Android).
The first thing you can check is if your addon files are in the zip package exported by WP-AppKit, to be sure that your addon sources are really embedded in the app.
Then it will be better if you can write directly to support[at]uncategorized-creations.com with more details (iOS/android, other plugins etc) and maybe your addon and your theme files so that we can find what's going wrong in your case.
Regards

[Ices-Eyes]

Damn!!! I've found the problem!!!
I have a folder with the files I use to create the zip for phonegap, where I have made various configurations for the apk, like screenshots, modifications to the config file, and so on.
When I download the zip from WPappkit plugin, i just copied the theme folder to the one I have local and then create the zip. But this time I completely forgot to copy also the wpappkit addon folder!
Sorry to disturb you. My fault this time :S
Thanks,
Luca

[mleroi]

Hi Luca, no problem, we know the export/build/config process can be tricky ;)
Good to know you've solved your problem!