New to the community? Start here

[Hustle Pro] Hustle Pro popup activation depending on ACF field value

Hello,
We are trying to activate / deactivate a Hustle popup depending if an ACF field is true or false.
This is what we did so far:
1) In header.php we defined a variable to store the acf field value (1 or 0)

<script>
        var testVar = "<?=get_field('activate_popup','option'); ?>";
</script>

2) Then with jQuery we evaluate that variable value to display or hide the popup:

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
if (testVar==1) {
$('body').addClass('hustle-show').removeClass('hustle-hide');
console.log(testVar);
} 
});

However, it seems no to be the best approach and it doesn’t work. On the other hand, we don’t find Hustle documentation with hooks or other way for us to implement the system.

Can you please assist in this issue? Which Hustle variable can we use to publish / unpublish or show / hide a specific popup, depending on the ACF field value.

Thank you very much
Julia

Thu, 7 May 2020 9:24:38
More Hustle Pro discussions
Hustle Pro
  • Adam
    • Support Gorilla

    Hi Julia

    I hope you’re well today and thank you for your question!

    There’s a bit more “going on” behind showing popup than just changing its class so this way won’t work indeed but a slightly different, yet really simple, solution should do the trick.

    The part that sets the variable value in header would be fine. Then you’d want to add some element (a “div”, “p” or basically anything) to the page where you want your popup to show and give it some CSS ID; also use that ID in CSS to hide that element.

    So, for example, you would add

    <p id="show_popup"></p>

    to the page and

    #show_popup {display:none;}

    to CSS to hide it.

    Next step would be to edit the popup and in “Behavior” settings set “Pop-up Trigger” to “Click” option, enable “Click on existing element” and put your CSS ID there, like in our example

    #show_popup

    Now the second part of your JS code would just need to do this:

    <script type="text/javascript">
jQuery(document).ready(function( $ ) {
if (testVar==1) {
$('#show_popup').click();
} 
});

    Best regards,
    Adam

  • Julia
    • New Recruit

    Hi Adam,
    Thank you for your reply.
    Your approach works but we don’t want the popup to be visible on click trigger.

    Instead we want the popup to be visible on load (maybe with some time delay) and only when the ACF field is set to true in WP backend.
    Can you help adapting the above code?

    Thanks,
    Julia

  • Adam
    • Support Gorilla

    Hi Julia

    The “click trigger” would be invisible for visitors so they wouldn’t be able to click in anyway. The current code solution should be showing/hiding the popup on site load if the “testVar” value is “1” and you’re fetching it, as far as I understand, from some ACF field.

    So, the current “flow”

    – if there’s some defined ACF field set
    – the JS code clicks on “popup trigger” (which is invisible to real visitors)
    – and popup shows

    It wouldn’t need any “human interaction” – it should be showing up automatically. If it’s not then it would mean that the code/solution is not working and it would have to be tracked down why.

    But if it does work on your site like that, then the only “missing” thing here would be some delay, if I correctly understand the goal. The delay could be added with a small modification of a code, like this:

    <script type="text/javascript">
jQuery(document).ready(function( $ ) {

	if (testVar==1) {

	setTimeout(function() {
		$('#show_popup').click();
	}, 3000);

	} 
});
</script>

    The “3000” value stands for “3 seconds”.

    So to sum up:

    1) you’d keep your JS code in a header that sets the “testVar” based on some ACF field
    2) you’d need to setup popup to be triggered by the click as explained previously but also make sure that the click-trigger element (a button or whatever element you would use for it) is hidden with CSS – so it’s not visible
    3) and use the code above to show popup.

    The popup would then show automatically, with about 3 seconds delay and only if a given ACF field is set to true.

    If I’m still missing the point, let me know, please.

    Kind regards,
    Adam