Conditionally Render Markup in Template

  • Resolved mikeathanson

    (@mikeathanson)


    1 year, 2 months ago

    We’re using the MPG plugin to generate location pages from a provided .csv. The challenge we’re running into is like most data-sets, not every column in the spreadsheet will be populated for each location. For instance, you may have locations that don’t have an address_line_2 field in a common locations use-case. Or, you may have a spreadsheet with a column that has a boolean value where you want to conditionally render an icon or other markup depending on whether the value is true or false for any given location.

    We’ve been unsuccessful locating any documentation around conditionally rendering parts of the template based on a variable being null or having a specific value. Is this supported by the plugin?

    One thought we had was hooking into the caching system to try to access that data but in looking at the plugin source code we couldn’t find any hooks to achieve this.

    I would think this is a pretty common use-case and must be overlooking something. Any help would be greatly appreciated!

    • This topic was modified 1 year, 2 months ago by mikeathanson.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • It’s not pretty when one looks at the source code, but I use the token in the CSS classes of the element and then look for when the class is not rendered right and hide it. This CSS trick can allow you to conditionally show or hide anything, depending on if the field is null or not (or a specific value):

    CSS:
    /* Hide empty bullets */
    [class^=”-Location”], [class^=”-Food-Location”]
    { display:none; }

    HTML:

    <h3>locations include:</h3>
<ul>
<li class="{{mpg_check-in_location}}-Location"><a href="{{mpg_check-in_loc_link}}" target="_blank" rel="noopener">{{mpg_check-in_location}} (Check-In Here)</a></li>
<li class="{{mpg_location_2}}-Location"><a href="{{mpg_loc_2_link}}" target="_blank" rel="noopener">{{mpg_location_2}}</a></li>
<li class="{{mpg_location_3}}-Location"><a href="{{mpg_loc_3_link}}" target="_blank" rel="noopener">{{mpg_location_3}}</a></li>
<li class="{{mpg_location_4}}-Location"><a href="{{mpg_loc_4_link}}" target="_blank" rel="noopener">{{mpg_location_4}}</a></li>
<li class="{{mpg_location_5}}-Location"><a href="{{mpg_loc_5_link}}" target="_blank" rel="noopener">{{mpg_location_5}}</a></li>
<li class="{{mpg_location_6}}-Location"><a href="{{mpg_loc_6_link}}" target="_blank" rel="noopener">{{mpg_location_6}}</a></li>
<li class="{{mpg_location_7}}-Location"><a href="{{mpg_loc_7_link}}" target="_blank" rel="noopener">{{mpg_location_7}}</a></li>
<li class="{{mpg_location_8}}-Location"><a href="{{mpg_loc_8_link}}" target="_blank" rel="noopener">{{mpg_location_8}}</a></li>
</ul>
<h3 class="{{mpg_food_location_1}}-Food-Location">And food locations include:</h3>
<ul>
<li class="{{mpg_food_location_1}}-Food-Location"><a href="{{mpg_food_loc_1_link}}" target="_blank" rel="noopener">{{mpg_food_location_1}}</a></li>
<li class="{{mpg_food_location_2}}-Food-Location"><a href="{{mpg_food_loc_2_link}}" target="_blank" rel="noopener">{{mpg_food_location_2}}</a></li>
<li class="{{mpg_food_location_3}}-Food-Location"><a href="{{mpg_food_loc_3_link}}" target="_blank" rel="noopener">{{mpg_food_location_3}}</a></li>
</ul>
    Plugin Support Stefan Cotitosu

    (@stefancotitosu)

    Hi @mikeathanson,

    Thank you for using MPG.

    I understand your request, and, at the moment, there isn’t a built-in feature within the plugin that allows for a custom fallback when an MPG shortcode like {mpg_location} doesn’t have a value to replace it with. Currently, the plugin will simply insert the raw shortcode text into the generated page.

    However, I appreciate your suggestion, and I’ll make sure to log it as an enhancement request to be analyzed for future updates.

    Thank you, @edgepro for sharing a potential solution to this particular use case.

    Wish you a great day ahead!

    dreadedhamish

    (@dreadedhamish)

    @stefancotitosu this should be considered core functionality – I am really surprised mpg launched without it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conditionally Render Markup in Template’ is closed to new replies.