Doesn’t work in header or footer

Dear @sarahsas ,

Thanks for reporting an issue.
We have checked both pages and noticed, that on the first page the class of the popup is not set in the right way:
https://prnt.sc/yp9vkj
While it is set right on the test page:
https://prnt.sc/yp9z1y
May we ask you to make sure to use the right class and set the popup exactly how you have set that for the test page so it will work, please?
Looking ahead to hearing from you soon.

Thanks for your reply, yes I can see that additional bit of code is being added to the button on the test page, which is making it work properly, however I am not manually adding it. I am simply adding the class to the button in the block editor, and presumably your plugin is generating that extra bit of code because the class has been added??

So the issue seems to be that your plugin is NOT automatically generating the extra bit of code when the pop up class is added to an object in the header or footer. Here are some screenshots to illustrate my point in step by step fashion:

1. On the test page with the test button on it, here’s what the code looks like prior to me adding the class for your plugin: https://imgur.com/3gZYCUQ

2. Then I go into the block editor and I add this class (sg-popup-id-2139) to the block button, see screenshot: https://imgur.com/L1Ai7Lt

3. as a result, the code looks like this, with both the class I added, AND the addition of the data pop-up id, as you pointed out: https://imgur.com/MzkC4dw

4. now with the test button in the footer, the code looks like this, JUST with the class added, exactly same as I did for the button: https://imgur.com/MAqWael

5. Here’s what that button looks like on EVERY page of the site EXCEPT the one that has the working test button in the main page content: https://imgur.com/0L9nBTM

6. and without changing ANYTHING, if I load the page that has the working test button in the main content, the test button in the footer AUTOMATICALLY generates the data pop up id, https://imgur.com/DNDzXML

I understand that I can just manually add the data pop up id to the code in the footer button because it’s simply html, but doesn’t that defeat the purpose of how your plugin is supposed to work? If it’s supposed to work simply by adding the class?

Also, the REAL issue is that I want this code to work in the header menu button, which is a custom url wordpress menu item, so I CAN’T manually add the data pop up id, I can only add the class to the menu item, see screenshot: https://imgur.com/ciXH29S

And the same exact thing occurs here. This is the login menu item on ALL pages of the site except the one that has the test button in the main page content: https://imgur.com/GNwpm1Y

And here is EXACTLY the same menu item (having made NO changes whatsoever) on the page that has the test button in the main page content: https://imgur.com/iLc2zKL

So the issue I’m seeking your help with is finding out WHY the data pop up id is being automatically generated ONLY when the class appears somewhere in the main page content, but it does NOT automatically generate when that class appears in JUST the header or footer.

I hope I have clarified the issue? Please let me know, thanks.

Dear @sarahsas ,

Thanks a lot for the detailed explanations.
May we ask you to try the following suggestion?
Please, set the Display Rule for the popup to appear on All Pages, with the on click event:
1. Open On click /On hover/On load Popup via CSS class or else,
2. How to open On click /On hover Popup via the shortcodes

Please, let us know about the results.

• This reply was modified 3 years, 9 months ago by Sygnoos Support.

@sygnoossupport The settings for the pop up are already set to display EVERYWHERE, see screenshot: https://imgur.com/neXFy5Y

…which is what I need – the “login” button in the top menu will appear on All Pages as well as All Posts and All custom post types, so I don’t want to change it to only work on pages and not posts…

Nevertheless, I tested this option and there was no change anyway.

Also, I cannot use the shortcode method in this instance, because I’m attaching the pop-up action to a MENU ITEM, as explained before with this screenshot: https://imgur.com/ciXH29S, so there is nowhere to put the shortcode, I can only assign a class to the menu item.

Any other ideas? It seems like a triggering issue to me? As in – your plugin is only triggering the action associated with the class when it appears within the #content or .site-content section of the page. The class does NOT work properly when executed in either the #masthead or .site-header, nor in the #colophon or .site-footer – can you test this theory locally on your end and confirm or disprove it?

@sygnoossupport any update on this please?

@sygnoossupport hello, anyone home?? This is a big issue, as it is TOTALLY blocking the whole functionality of your plugin, can you please provide any update?

Dear @sarahsas ,

Sorry for the delayed answer.
I can see from your screenshot that you have set up the Everywhere Display Rule, but the strange thing is that we don’t see popup data on any of your pages besides this one: https://ausdance.saranyadesigns.com/login-test/

And in this case, we don’t understand if the popup is loading on the login-test page why it’s not loading for example on this page: https://ausdance.saranyadesigns.com/contact/?
So may we ask you to give us some hints to investigate the issue?
Saying all that, once the popup data will be loaded on the page everything will work as expected.

Is this a joke? I am asking YOU why it’s not loading – IT’s YOUR PLUGIN!!! I have already troubleshooted the issue FOR YOU by adding the test button on that page and SHOWING YOU that the only time the data loads properly is when it’s in the main body content, and it will NOT load properly when it’s ONLY in the HEADER or FOOTER! It’s YOUR JOB to fix it, NOT MINE!!!

I am astounded that I have to say this again…this is the worst support I have ever encountered… I feel like I’m beating my head against a wall…

My “hack” solution is going to be to add a hidden div in the main content on every page and assign the div class to it, so that it forces the data to load in the header and footer, but this is NOT a proper solution, and since it’s YOUR plugin, I assumed you would want to investigate and fix it properly?

Have you even bothered to test your plugin as I suggested in any other wordpress installation you have to see if it loads properly when ONLY in the header and footer in any other site??? That would be my starting point if I were you. But I guess you’re not interested in actually fixing the issue…

Ok LOOK, I have manually added the popup data code to the footer button, and as you can see, it STILL doesn’t work on any page except the login test page I created…

https://ausdance.saranyadesigns.com/login-test/ – notice the footer test button works here.

https://ausdance.saranyadesigns.com/contact/ – notice the footer button here HAS the popup-data code, which you say will definitely make it work, but STILL does not work, because the data popup code is NOT appearing in the body of the page, ONLY in the footer…

NOW can you please investigate this properly???

Notice the pop ups also work fine on this page, but only because they are appearing in the MAIN CONTENT of the page, NOT the header or footer:

https://ausdance.saranyadesigns.com/about/our-team/

I don’t know how I can be any clearer…

Hello @sarahsas,

Can you please try to insert the following code inside the footer.php?
<?php do_shortcode('[sg_popup id="75" event="click"][/sg_popup]')?>

Like this shttps://prnt.sc/zz98e8

Please note that 75 should be replaced with your popup id.

We totally understand your query but please keep in mind that there could be many factors/reasons that can affect our plugins’ work for example malfunctioning theme or plugin. And hence for that purpose, we are kindly asking you to help to understand what’s the difference between login-test and contact page, maybe you are using different theme templates for these pages, etc.

Thanks, hope you can understand our point.

There is absolutely no difference between the pages, theme, or templates. You can test the button on EVERY page of the whole site with the same result. As I have explained 5 times already…it only works if I place the class on ANY object of ANY page within the MAIN PAGE BODY, rather than the header or footer. As another example test for you, I have now added a paragraph to the top of the CONTACT page here, which you just saw was NOT working, correct???

https://ausdance.saranyadesigns.com/contact/

Notice how if you click the new line of text that I have added at the top that says “login popup demo for plugin makers”, how the pop up works fine, and NOW scroll down to the footer on the contact page and notice if you click the same button in the footer (to which I have NOT made ANY changes to) that this button NOW works on this page as well?

I am demonstrating this to you before I add your suggested code so you can see the point I’m making. Please confirm when you have seen it so I can test your new code. Thanks.

Look, we have a code that automatically detects if the page/post contains any of our CSS classes like sg-popup-id-2139 and we load the popup data on that page. And when any button (in your case inside the footer and header) contains sg-popup-id-2139 CSS class the JavaScript code will try to find popups’ <div> and if found any popup container with that ID it will trigger the popup.

Now, when you setup CSS class on the header and footer we are unable to detect that, and as a result, we didn’t load popup content on the page and that’s why the JavaScript fails to trigger/open the popup because the popups’ <div> (content) didn’t load.

When you setup Page Rule -> Everywhere we will not check the page content if it contains any of our CSS classes we will load popup sitewide but in your case it doesn’t work as well ?? I can see you have that setting https://imgur.com/neXFy5Y

Just to sum up, if the sg-popup-id-2139 CSS class is responsible to trigger the popup only in case the popup data is loaded on the page/post. We built a function which should automatically detect for this CSS class and load the popup data automatically but somehow it fails and as a result you have triggering class on your button but no popup data.

Sorry for long response, hope I did my best to explain the case.

Please try the solution via shortcode hope it will do the trick.

I understand how the plugin works, thank you. I appreciate the details.

What I am telling you is that your plugin does not work for header or footer elements. AT ALL. This is not a once-off situation or an interference with other plugins or themes issue.

I will demonstrate for you:

Here is a completely fresh installation of wordpress, using the default twentytwentyone theme. This installation has NO plugins installed EXCEPT your popup plugin.

Here is the homepage: https://3.25.170.142/

Notice there are three items in the menu: HOME – SAMPLE PAGE – POPUP TEST.

Notice how if you click on POPUP TEST menu item while on the homepage, it does nothing.

Now visit the SAMPLE PAGE, you will notice I have added a button at the top of the main content of this page that says TESTING POPUP. Notice how when you click this button, the popup works. YAY!

Now notice how when you click the same menu item in the navigation that you clicked from the homepage (POPUP TEST) – it now works properly in the header as well, but only because the css class has also been added to the main page content. Which obviously has then activated your function, so it works in both places.

Exact same scenario as my other site. Only this time with NO plugins and NO themes installed. So no possible interference.

So IT DOES NOT WORK. I understand that it SHOULD detect the CSS and then load the pop up data. But it obviously doesn’t do this when the css style is in the header or the footer. Only when it is in the main page content.

I suggest you investigate this issue further so you can fix it properly rather than adding hack code to the footer for your future users…

I would also just like to point out that in every response you have given me in this entire support thread, all you have done is repeat back to me the very problem I came here looking for your support to help resolve.

“We built a function which should automatically detect for this CSS class and load the popup data automatically but somehow it fails and as a result you have triggering class on your button but no popup data.”

YES, my point exactly. You built a function that SHOULD detect the css class and load the data. But it doesn’t work. Hence the whole reason I came here to bring this issue to your attention, hoping that you might be interested in actually fixing the problem rather than telling me there IS a problem. Do you understand my frustration???

I’m obviously aware there is a problem otherwise I wouldn’t have come here asking for your help in the first place… not only do I understand what the problem is, but I have done half your work FOR YOU in testing all the possible scenarios where it does and doesn’t work, and I came here with that information ready for you from the start.