Search code examples
phpwordpressmustachevisual-composerwpbakery

Templating more complex if-statements with Mustache & WordPress


I am using Visual Composer (now WPBakery) to develop own blocks/shortcodes, and render them through a Mustache template.

I am passing parameters to the template, and then render the template based on these parameters (set in Visual Composer).

I have a subscription service and would like to be able to toggle the content on the page based on whether the user is logged in or not, and if the user has an active subscription.

So I have a dropdown where you can select which users to show the block for:

  • Show for all users
  • Logged in + active sub
  • Logged in + inactive sub
  • Logged out / Not registered

This is the text-block-template.php in which I fetch parameters:

//returns true/false
$is_active_sub = call_to_sub_api($sessionID);

//Selected in dropdown of which users to show element for
switch ($show_element): 
   case 'all': 
        $user_group = 'all_users';
   case 'subs':
        $user_group = 'subscribers';
   case 'logged_out'
        $user_group = 'inactive';

//Mustache render function (takes a template + variables & renders the template)
render_mustache_func('text-template.mustache', array(
   'text_content' => $text, 
   'user_group' => $user_group, 
   'subscriber' => $is_active_sub
)) 

So in Visual Composer I would have two different blocks – each set to either subscriber or logged out.

'Welcome back' – would be displayed for logged in users

'Sign up or log in now' – would be displayed for logged out users

However, the if statements don't seem to be able to check the string values, am I doing this wrong?

Also, it feels very redundant to write the same HTML element multiple times. Would you suggest another solution?


{{#user_group=all_users}}
<p class="text">{{text_content}}</p>
{{/user_group=all_users}}

{{#user_group=subscribers}}
  {{#subscriber}}
    <p class="text">{{text_content}}</p>
  {{/subscriber}}
{{/user_group=subscribers}}

{{#user_group=inactive}}
  <p class="text">{{text_content}}</p>
{{/user_group=inactive}}

Any input would be greatly appreciated.


Solution

  • The Mustache engine has no conditional statements like you tried to do.

    I think you could pass an array containing a boolean for each of your user group, then check if they are not null within your template.

    I also think you could replace your switch statement by ternary operators (which will give boolean values, so perfect for that solution).

    //returns true/false
    $is_active_sub = call_to_sub_api($sessionID);
    
    // Usergroups array
    $user_groups = [
        'all_users' => ($show_element === 'all'),
        'subscribers' => ($show_element === 'subs'),
        'inactive' => ($show_element === 'logged_out')
    ];
    
    //Mustache render function (takes a template + variables & renders the template)
    render_mustache_func('text-template.mustache', array(
       'text_content' => $text, 
       'user_groups' => $user_groups,
       'subscriber' => $is_active_sub
    ));
    
    {{#user_groups.all_users}}
    <p class="text">{{text_content}}</p>
    {{/user_groups.all_users}}
    
    {{#user_groups.subscribers}}
      {{#subscriber}}
        <p class="text">{{text_content}}</p>
      {{/subscriber}}
    {{/user_groups.subscribers}}
    
    {{#user_groups.inactive}}
      <p class="text">{{text_content}}</p>
    {{/user_groups.inactive}}