Carto: Can I use some “if/then/else” structure in popup custom HTML?

Question

I believe I am asking a question similar to this question that was asked a few years ago about popup functionality in the old CartoDB. I just tried my best to replicate the solution to that question in the newer Carto Builder, but I'm failing. (I tried using the # and ^ symbols in what I thought were similar places to where they were used in the solution to the question above; doing so didn't break the HTML, but it didn't work either).

My algorithm is:

If <field_A> is not null, show fields A, B, and C in the popup
If <field_D> is not null, show fields D, E, and F in the popup

Or, an alternate algorithm could be:

If <field_A> is not null, show fields A, B, and C in the popup
If <field_A> is null, show fields D, E, and F in the popup instead

This is the default HTML that Carto created for me to simply show fields A, B, and C in the popup. I'd like to edit this HTML to match my algorithm above. My arrows show where I think I need to edit the HTML, but I'm at a loss for how to actually edit it:

<div class="CDB-infowindow CDB-infowindow--dark js-infowindow" style="background:#2E3C43">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-bg">
      <div class="CDB-infowindow-inner js-inner">
        <ul class="CDB-infowindow-list js-content">

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_A</h5>    <-- I think this is where I need to specify "if field_A is not null..."
            <h4 class="CDB-infowindow-title">{{field_A}}</h4>     <-- And this is where I need to specify "...then show field_A"
                                                                  <-- And then here is where I'd need to specify "...else show field_D" 
          </li>

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_B</h5>    <-- Repeat the above for the next set of fields
            <h4 class="CDB-infowindow-title">{{field_B}}</h4>

          </li>

          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_C</h5>    <-- Repeat the above for the last set of fields
            <h4 class="CDB-infowindow-title">{{field_C}}</h4>

          </li>

        </ul>
      </div>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>

Answer 1

Carto uses the Mustache templating system for popups. They are "logic-less" however you can implement a bit of logic by bracketing the content you want given some condition using tags with # for "is true", ^ for "is false", and / as the closing tag.

Given the following data

{ 
  "field_a": null, 
  "field_b": "some",
  "field_c": "thing",
  "field_d": "and",
  "field_e": "another",
  "field_f": "thing"
}

A workable template for your logic would look something like this

<div class="CDB-infowindow CDB-infowindow--light js-infowindow">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-bg">
      <div class="CDB-infowindow-inner js-inner">
        <ul class="CDB-infowindow-list js-content">
{{#field_a}}
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_a</h5>
            <h4 class="CDB-infowindow-title">{{field_a}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_b</h5>
            <h4 class="CDB-infowindow-title">{{field_b}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_c</h5>
            <h4 class="CDB-infowindow-title">{{field_c}}</h4>
          </li>
{{/field_a}}          
{{^field_a}}
   {{#field_d}}
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_d</h5>
            <h4 class="CDB-infowindow-title">{{field_d}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_e</h5>
            <h4 class="CDB-infowindow-title">{{field_e}}</h4>
          </li>
          <li class="CDB-infowindow-listItem">
              <h5 class="CDB-infowindow-subtitle">field_f</h5>
            <h4 class="CDB-infowindow-title">{{field_f}}</h4>
          </li>
   {{/field_d}}
{{/field_a}}
        </ul>
      </div>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>