Skip Navigation

[Resolved] Render Content Template Modal on php condition

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 replies, has 2 voices.

Last updated by Waqar 5 years, 5 months ago.

Assisted by: Waqar.

Author
Posts
#1288375

I've created a custom modal as below.

<pre>

<div id="free-rounds-used-modal" class="modal-normalise modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="far fa-times-circle"></i></button>
        <img src="/wp-content/themes/future-golf/assets/images/futuregolf_header_logo_black@2x.png" class="img-responsive img-center">
      </div>
      <div class="modal-body">
        <p class="login-title text-center">Claim Free Round</p>
        [wpv-conditional if="('[wpv-current-user info='id']' eq '')"]
        <h2>Sign In</h2>
        <p>You'll need to sign in to see this information</p>
        <a id="login-button-in-modal" class="btn btn-fg" href="#" class="nav-login-text" data-toggle="modal" data-target="#login-modal">Log In</a>
        <a href="/?page_id=40" title="Join" class="btn btn-fg">Join</a>
          
		[/wpv-conditional]
        [wpv-conditional evaluate="false" if="('[wpv-current-user info='id']' eq '')"]
        <p class="member-info-block">Free Rounds: <strong>[wpv-user field='wpcf-member-free-rounds']</strong> Used Rounds: <strong>[wpv-user field='wpcf-member-used-rounds']</strong></p>
        [wpv-conditional if="( '[fg-availround-calc]' gt '0' )"]
       
        <p class="member-info-block"><strong>You have [fg-availround-calc] free rounds remaining! TESTTEST</strong></p>

        [cred_form form="fg-member-book-free-round"]
          
		[/wpv-conditional]
        [wpv-conditional if="( '[fg-availround-calc]' lt '1' )"]
		 <p class="member-info-block"><strong>You have no free rounds remaining...</strong></p>
        	<a href="/?page_id=40" title="Upgrade Membership" class="btn btn-fg">Upgrade Membership</a>

		[/wpv-conditional]
		[/wpv-conditional]
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</pre>

I want to display the above modal when a php function is valuated to true once members login.
For example...

<pre>

					// if starter then only send if free rounds !=0 and they've used >= free rounds. ie. they've used 1 of 1
					if ((get_user_subscr_level() == "The Starter") && ($membership_used_rounds >= $membership_free_rounds) && ($membership_free_rounds != 0)) {

						// send email to rohan@futuregolf.com.au with info re: free founds full
						send_free_rounds_full_info(10,2);
						echo '<script type="text/javascript"> $("#free-rounds-used-modal").modal("show")</script>';

					} elseif ((get_user_subscr_level() != "The Starter") && ($membership_used_rounds >= ($membership_free_rounds - $send_email_on))) {
						// send email to rohan@futuregolf.com.au with info re: free founds full
						send_free_rounds_full_info(10,2);
						echo '<script type="text/javascript"> $("#free-rounds-used-modal").modal("show")</script>';

					};

</pre>

I understand that this can't be executed this way due to client/server side rendering and my only option is to display a link so that this response can be sent back to the server.
Does toolset have another way to potentially execute this? I've currently got the members home page as a view which is where I'd like to render this modal if the above certain condition is true...

#1288895

Hi,

Thank you for waiting, while I performed some testing and research.

1. Loading the Bootstrap's Modal element, on page load:

The way the Bootstrap's Modal element works ( ref: hidden link ), it can be loaded when a page is loaded, without any additional script.

All you'll need is to introduce a "show" class, into the existing wrapping div with class "modal":

Existing code:


<div id="free-rounds-used-modal" class="modal-normalise modal fade" tabindex="-1" role="dialog">
......
</div>

Updated code:


<div id="free-rounds-used-modal" class="modal-normalise modal show" tabindex="-1" role="dialog">
......
</div>

2. Loading the Bootstrap's Modal element, on page load, only when a certain PHP condition is true:

For this, you can first create a custom shortcode, that evaluates the required condition and only returns the wrapped content, if it is true.
( ref: https://codex.wordpress.org/Shortcode_API )

Example:


// A shortcode to evaluate a PHP condition and output content only if it is true
add_shortcode( 'evaluate_condition_shortcode', 'evaluate_condition_shortcode_func');
function evaluate_condition_shortcode_func( $atts, $content = null ) {
	// the condition that needs to be evaluated
	if (is_page()) {
		// return or show the content if the condtion is true
		return $content;
	}
}

Note: Feel free to replace the "is_page()" with the condition(s) that you need to evaluate.

In your content, you can use this shortcode like this:


[evaluate_condition_shortcode]
<div id="free-rounds-used-modal" class="modal-normalise modal show" tabindex="-1" role="dialog">
......
</div>
[/evaluate_condition_shortcode]

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

#1289225

My issue is resolved now. Thank you!

#1289233

Thanks
My "show" class in bootstrap.css had css of

display: block !important;

As a result, the modal wasn't being hidden. I created my own "show_notforced" class with the following css and it's now working

.show_notforced {
    display: block;
}
#1289261

Hi,

Thanks for the update and glad that the modal is working now.

You're welcome to start a new ticket or chat for a different question or concern, and this ticket can be marked as resolved.

regards,
Waqar