How to customize OJS3 frontend and how to suggest dev?

Hi @hcl,

It sounds like you’ve found the theming API and know what you’re doing with it. If you haven’t yet seen the theming guide, you may find it useful:

https://www.gitbook.com/book/pkp/pkp-theming-guide/details

In particular, if you want to pass data to a template file that doesn’t already exist, here’s a quick example of how you can hook in before a template is loaded from a theme plugin:

https://pkp.gitbooks.io/pkp-theming-guide/content/en/advanced-custom-data.html

As you go about implementing your changes, I’d encourage you to especially look at the Child Theming API, which will allow you to isolate specific changes and hopefully help you maintain your customizations over time:

https://pkp.gitbooks.io/pkp-theming-guide/content/en/child-themes.html

And of course, feel free to reach out if you have any questions as you go along.

Hi,

Thanks for your both advices on the back-end and front-end aspects. And thanks for the link to the “PKP Theming Guide GitBook” which is very useful.

You’re right @NateWr, we’ve found the theming API and now we want to use it. And we want to pass data to a template file that doesn’t already exist.
I tested it by trying to get the acceptance date of the article.
I create a public function “loadTemplateData” in the CustomThemePlugin.inc.php file.
As @ctgraham has suggested, to get the acceptance date, I used the “EditDecisionDAO” as this:
$editDecisionDao = DAORegistry::getDAO(‘EditDecisionDAO’);
And then I need to use the getEditorDecisions function which takes at least the article Id as argument.
But how I get the article Id data in the loadTemplateData function ?

I have an other question related to customization. Has the Custom Locale Plugin been adapted for OJS3 ?

Thanks again for your answers.
Best regards.
Helene

Hi @hcl,

The article view page has an additional hook which contains the issue and article objects:

If you use that hook, you should be able to receive those as arguments in your custom theme function.

I’m not familiar with the Custom Locale Plugin. I’ve only worked with OJS 3 since joining PKP, but maybe someone else knows.

I @NateWr,
I don’t manage to receive arguments of article objects in my custom theme function.
Maybe I don’t do it the right way. I was also wondering if it was possible because the theme is called before the article page ?
Thanks, Helene

Hi @hcl,

Can you post the code you’re having trouble with?

I again @NateWr,
I tried several things in the CustomThemePlugin.inc.php file:

  • Add in the “init” function or in the new “loadTemplateData” function this line code:
    HookRegistry::call(‘ArticleHandler::view’, array(&$request, &$issue, &$article));
  • Add in the “init” function this line code:
    HookRegistry::register(‘ArticleHandler::view’,array(&$this, ‘articleView’));
    and then create an “articleView” function.
    Otherwise, I manage to do it in the article_details.tpl file where I can get the article Id ($article->getId()) but I would prefer to handle the code outside a template file.
    Thanks, Helene

Hi @hcl,

The HookRegistry::register approach sounds right. If you can share the code you’re using, I can work through it and see what’s not working.

I @NateWr,

I was out of the office for a few days. And it was apparently very helpful because I finally managed to do what I wanted to do.
And your advice also directed me to the right solution.
Here’s what I did.

I Added in the “init” function this line code:
HookRegistry::register(‘ArticleHandler::view’,array($this, ‘articleView’));

And I create the articleView function as follows:
public function articleView($hookName, $args) {
$templateMgr = TemplateManager::getManager($request);
$article =$args[2];
$editDecisionDao = DAORegistry::getDAO(‘EditDecisionDAO’);
$templateMgr->assign(‘editDecisionDao’, $editDecisionDao);
$editorDecisions = $editDecisionDao->getEditorDecisions($article->getId());
$lastDecision = count($editorDecisions) >= 1 ? $editorDecisions[count($editorDecisions) - 1] : null;
$dateAccepted = $lastDecision[‘decision’] == 1 ? $lastDecision[‘dateDecided’] : null;
$templateMgr->assign(‘dateAccepted’, $dateAccepted);
}

I had no need to use the following function in the init:
HookRegistry::register (‘TemplateManager::display’, array($this, ‘loadTemplateData’));

And I manage to get the article Id ($article->getId()) by initializing $article variable with the good argument (number 2). I think, at first I didn’t initialized the $article variable with the good argument number.

This allowed me to understand how to pass data to a template file in the theming API.

Thanks a lot for all your advices and your help.
Best regards.
Helene

Hi @hcl,

Glad you were able to get it working! It’s great to see people pushing what the theme api can do.

The ArticleHandler::view hook is a special hook specifically for the article view page. But not every template has it’s own special hook. So in those cases, you may need to use the TemplateManager::display hook to get into the template before it’s rendered.

Hi, I am using OJS 3.1. Could you please tell me the steps used to create this function (Accepted Date). What codes should I add and in which files. I tried doing these steps:

Copied this code in my theme’s javascript.js file

public function articleView($hookName, $args) {
$templateMgr = TemplateManager::getManager($request);
$article =$args[2];
$editDecisionDao = DAORegistry::getDAO(‘EditDecisionDAO’);
$templateMgr->assign(‘editDecisionDao’, $editDecisionDao);
$editorDecisions = $editDecisionDao->getEditorDecisions($article->getId());
$lastDecision = count($editorDecisions) >= 1 ? $editorDecisions[count($editorDecisions) - 1] : null;
$dateAccepted = $lastDecision[‘decision’] == 1 ? $lastDecision[‘dateDecided’] : null;
$templateMgr->assign(‘dateAccepted’, $dateAccepted);
}

and then copied in my theme’s inc.php file

HookRegistry::register(‘ArticleHandler::view’,array($this, ‘articleView’));

Finally added

{$article->getDateAccepted()|date_format}

in my theme’s template file, but it didnt show

Hi @varshilmehta,

The “public function articleView” must also be present in your theme’s inc.php file and not in your javascript.js file. This function is in PHP code and not in Javascript code.
And getDateAccepted is a variable and not a function that must be called like that and not with $article object.

Here is what you need to do:

  • Copy “HookRegistry::register” code in your theme’s inc.php file at the beginning of init function
  • Copy “public function articleView” in your theme’s inc.php file outside init function (for example after getDescription function)
  • Add for example the following code in your theme’s template file:
    {$dateAccepted|date_format:"%e %B %Y"}

I hope it will be helpful.
Best regards.
Helene

1 Like

It is still not showing up. I did exactly like you mentioned

In which template file do you display $dateAccepted variable ?

To verify if data of public function articleView is well called in your template file, can you add this code at the beginning of function articleView:
echo "function articleView</br>";

In my case, I added $dateAccepted variable in:
mytheme/templates/frontend/objects/article_details.tpl
and the value is displayed via this URL for example:
http://journals.sfu.ca/present3/index.php/demojournal/article/view/6

I have also added dateaccepted in my article_details.tpl
I have also added “function articleView
”; as per your suggestion and it is displaying on the top

It’s a good news.
In this kind of situation you have to progress step by step to see where it doesn’t work.
Modify the code of public function articleView as follows:

    public function articleView($hookName, $args) {
    echo "function articleView</br>";
    $templateMgr = TemplateManager::getManager($request);
    $article =$args[2];
    $articleId=$article->getId();
    echo "articleId: $articleId</br>";
    $editDecisionDao = DAORegistry::getDAO(‘EditDecisionDAO’);
    $templateMgr->assign(‘editDecisionDao’, $editDecisionDao);
    $editorDecisions = $editDecisionDao->getEditorDecisions($article->getId());
    $cEditorDecisions = count($editorDecisions);
    echo "cEditorDecisions: $cEditorDecisions</br>";
    echo "Start editorDecisions</br>";
    print_r($editorDecisions);
    echo "</br>End editorDecisions</br>";
    $lastDecision = count($editorDecisions) >= 1 ? $editorDecisions[count($editorDecisions) - 1] : null;
    $dateAccepted = $lastDecision[‘decision’] == 1 ? $lastDecision[‘dateDecided’] : null;
    echo "dateAccepted: $dateAccepted</br>";
    $templateMgr->assign(‘dateAccepted’, $dateAccepted);
    }

And have a look on what is displaying on the top.
You should have something like this:

    function articleView
    articleId: 1570
    cEditorDecisions: 4
    Start editorDecisions
    Array ( [0] => Array ( [editDecisionId] => 1397 ... [dateDecided] => 2017-01-14 17:57:01 ) )
    End editorDecisions
    dateAccepted: 2017-01-14 17:57:01

In editorDecisions Array, you should have a value for “dateDecided”

I just got
function articleView
articleId: 84

I think it is different for OJS 3.1

Hi @varshilmehta, finally did you get this?
I have tried everything I found in this forum (#3061, the plugin from Github and several ways to get the acceptance date to show up in article_details template) but I can not make it to work.

We are using a custom bootstrap 3 theme on a OJS 3.1 and so far I worked on BootstrapThreeThemePlugin.inc.php to load the articleView function, and the HookRegistry in the init fuction. Also I have tried several ways to call the variable $dateAccepted from the smarty template, but always get blank result.

As @hcl proposed, I modified the code of public function as follows:
18
And I get this at the top:
35

It looks like the variable $dateAccepted is not saving any value…

This is how I am trying to get the date in the smarty template “article-details.tpl”.
06

@asmecher, @bozana, could you help me please? Thanks :slight_smile:

Daniel
ICONO14

I used some plugin to show. But it didnt work otherwise.

Dear,

great work with the integration of OJS2,

in our journal we deployed a complete theme without it affecting the other parts of OJS. We base our development using this plugin: https://github.com/daxslab/daxs-ojs-base-theme

You can see the result here: https://naerjournal.ua.es/

We use Bootstrap and have completely changed the frontend of the publishing process. Attached are some screenshots.

At the same time we have implemented many other options such as generating PDF certificates of reviews automatically from the reviewer panel or sending propossals to Ithenticate “on demand” (not automatically) retrieving the report from OJS.

For us OJS 2.X is alive!

Ithenticate integration:

2018-08-22%2018_05_24-%23329%20Review

2018-08-22%2018_06_29-%23323%20Review

Other screens:

2018-08-22%2017_58_07-User%20Home

2018-08-22%2017_59_11-%23296%20Summary

3 Likes