Liferay Theme: Login popup when clicking button

RE: Liferay Theme: Login popup when clicking button

2019-04-08T13:42:17Z

Good question. Without digging too deep into the source, I was able to find this block of code

AUI().ready(
   'liferay-hudcrumbs', 'liferay-navigation-interaction', 'liferay-sign-in-modal',
   function(A) {
      var navigation = A.one('#navigation');

      if (navigation) {
         navigation.plug(Liferay.NavigationInteraction);
      }

      var siteBreadcrumbs = A.one('#breadcrumbs');

      if (siteBreadcrumbs) {
         siteBreadcrumbs.plug(A.Hudcrumbs);
      }

      var signIn = A.one('li.sign-in a');

      if (signIn &amp;&amp; signIn.getData('redirect') !== 'true') {
         signIn.plug(Liferay.SignInModal);
      }
   }
);

which you will find in the main.js in the classic theme. So I think if you have an li, with a class "sign-in" and the link of course in an <a> it should trigger the modal. Careful though, there is also a property that you can set to disable the modals --

#
# Set this to true to disable the login popup dialog. This should only be
# set to true if there is a custom login portlet that needs the "Sign In"
# link to redirect to another page.
#
login.dialog.disabled=false

let me know if that helps.

RE: Liferay Theme: Login popup when clicking button

2019-04-06T17:54:15Z

Amar GrabusHi Andrew,

thanks.

I have one more question. How can i let the popup come instantly without first going to the login page and then by klicking on 'Sign in' the login popup appears. Currently when I click on the button, he directs me to the login page of the login portlet.

Hi Armar,

Did you ever get an answer on how to force the login popup without directing to the login page first? I am facing the same issue.

Philip

RE: Liferay Theme: Login popup when clicking button

2018-05-30T16:11:08Z

Hi Andrew,

thanks.

I have one more question. How can i let the popup come instantly without first going to the login page and then by klicking on 'Sign in' the login popup appears. Currently when I click on the button, he directs me to the login page of the login portlet.

RE: Liferay Theme: Login popup when clicking button

2018-05-30T15:01:00Z

Hi Amar,

In the markup for the page you should be able to find the portlet. I would assume that the div is being hidden? or perhaps you need to call the render() method on the sign-in module?

RE: Liferay Theme: Login popup when clicking button

2018-05-30T14:55:06Z

Hi Andrew,

yes, that's what I did. But I am not sure how to trigger the popup of the login when a user clicks on the button. With onClick and then specify what?

RE: Liferay Theme: Login popup when clicking button

2018-05-30T14:46:40Z

Hi Amar,

I'm not sure I understand your question. In your theme you can detect whether or not the user is signed in, and then based on that, you can add the button and js (as you have above) to trigger the behavior. Provided the login portlet is on the page then it should work. What I am not sure of off hand is whether or not the login portlet would be there (but I am assuming no). If it is not, then you can add a runtime portlet embedding inside the block as well.

Or is there something I am missing?

Liferay Theme: Login popup when clicking button

2018-05-30T14:39:13Z

Hey,

I know how to popup the login portlat by klicking on 'Sign in':

main.js:

AUI().ready(
	'liferay-sign-in-modal',
	function(A) {	
		var signIn = A.one('.sign_in &gt; .menuText &gt; a');
		if (signIn &amp;&amp; signIn.getData('redirect') !== 'true') {
			     signIn.plug(Liferay.SignInModal);
		}
	}
);

in ftl file:

&lt;#if !is_signed_in&gt;
			<div class="sign_in">
			<div class="menuText"><a href="${sign_in_url}" rel="nofollow" data-redirect="false" id="sign_in" class="sign_in_custom" ">${sign_in_text}
			</a></div>
			</div>
		<!--#if-->

But how can I do the same with button somewhere in my theme (just popping up the login without going to the login page)? I'm working with Liferay 6.2.