Add reviewing interests to the registration form

Software Support
1

Hello!

I have a client that’s requesting me to add the “reviewing interests” to the registration from of her journal. I know this change requires to edit the frontent of the form, but does it need to modify anything else? Because add the reviewing interests in here will provide a value that is not handle in this step of the workflow.

Is there’s possible to add that field to the form, can you give me a hint so I can do it?

Thank you in advance.

2

Hi @daniel.anez,

As I remember, reviewer interests are already implemented on the registration form for all official themes. But if you want to do the same for another theme, the front-end part can be seen here: classic/userRegister.tpl at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub
and
classic/main-theme.js at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub
it uses slightly modified tag-it library: classic/tag-it.min.js at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub

3

Hi @Vitaliy

Thanks for the quick response. I’ll see those githubs and post in here when I succed or have doubts.

4

Hello @Vitaliy

One doubt, I use the code that appears in here classic/userRegister.tpl at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub in the frontend and I succeed at showing the label in the register form, but there’s no field to input the data.

Here’s a capture: imagen

As you can see, it’s only showing the label, not the input field. Any hint? Please

5

The input field is hidden with javascript if the checkbox to become a reviewer is not selected, it’s coded here: classic/main-theme.js at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub

6

But when I click the checkbox it’s still no showing the input field.

{if $userCanRegisterReviewer}
			<fieldset class="reviewer">
				<legend>
					{translate key="user.reviewerPrompt"}
				</legend>
				<div class="fields">
					<div id="reviewerOptinGroup" class="form-group optin">
						{foreach from=$reviewerUserGroups[$contextId] item=userGroup}
							{if $userGroup->getPermitSelfRegistration()}
								<label>
									{assign var="userGroupId" value=$userGroup->getId()}
									<input type="checkbox" name="reviewerGroup[{$userGroupId}]" value="1"{if in_array($userGroupId, $userGroupIds)} checked="checked"{/if}>
									{translate key="user.reviewerPrompt.userGroup" userGroup=$userGroup->getLocalizedName()}
								</label>
							{/if}
						{/foreach}
					</div>
				</div>
			</fieldset>
			<fieldset class="reviewer_nocontext_interests">
				<legend>
					{translate key="user.register.noContextReviewerInterests"}
				</legend>
				<div class="fields">
					<div class="reviewer_nocontext_interests">
						{* See comment for .tag-it above *}
						<ul id="tagitInput" class="interests tag-it" data-field-name="interests[]" data-autocomplete-url="{url|escape router=$smarty.const.ROUTE_PAGE page='user' op='getInterests'}">
							{foreach from=$interests item=interest}
								<li>{$interest|escape}</li>
							{/foreach}
						</ul>
					</div>
				</div>
			</fieldset>
		{/if}
	{/if}

That’s how I add the code to our frontend, because adding it below the if $userCanRegisterReviewer wasn´t showing anything

7

Hi @Vitaliy

I was trying some changes, I saw that in the client custom theme there isn´t any folder named JS, so there wasn´t any main.js file. I added it by copying it from the Default theme, since the changes in the custom theme was only in the front end to add style, none of the keys was change.

Also I tried to copy all the file posted in here classic/userRegister.tpl at 8343e4a6c09907f6d47b57b9793360702c81128f · pkp/classic · GitHub but it wasn´t showing the reviewer interests input field either.

There’s something else to do yo achieve this?

8

Hi @daniel.anez,

Are you working with a journal’s or site-wide registration page? The input field for former is here: https://github.com/pkp/classic/blob/master/templates/frontend/pages/userRegister.tpl#L89

Also, how JS was added to the theme?

9

Hello, @Vitaliy

I’m working with the Journal’s registration page, not the default OJS registration page.

I added the JS by copying and pasting the folder inside the custom theme, since none of the vars or keys was change when developing it.

10

It’s not enough. You’d need to use addScript method of the theme’s main class that extends ThemePlugin. e.g.: https://github.com/pkp/immersion/blob/596488180808b434543f29116bf8efd5a033a213/ImmersionThemePlugin.inc.php#L34 where 2nd parameter is relative path to the JS file.

11

Hello, @Vitaliy!

I think that maybe I have a wrong JS folder (I had copy it from the default theme) because I added the addScript method to my ThemePlugin.inc.php and nothing happens.

Any other clue?

12

Putting somewhere in your themes folder and referring with a relative path to it should be enough. Also, if you create a child of the Default theme, all JS and styling will be applied to it.

Can you double check if the reference to a file that you have added appears at the bottom of the page (at the end of the body tag)?

13

Hello @Vitaliy

I added the import at the bottom of the body, but still nothing is happening. I reviewed the code several times, the ids, the tags and the keys are all the same. Our theme is a Boostrap3 Theme child, so I think it’s suppose to apply the JS correctly, but it isn’t.

14

Can you share your code of the child theme, e.g., by creating a repository on the GitHub with your child theme, so I can take a look?