Insert an A-Z letter banner for each letter in a Listing Builder listing template in Dev mode

<?php

// Example template for a Listing Builder listing in Dev mode.
// The listing shows therapists. The query must be ordering by the last name.
// We insert a full width banner with the letter of the alphabet when a new letter starts.
// Screenshot: https://d.pr/i/pEhwFf
// The classes used replicate what would be the classes in visual mode.
// This listing could be combined with an A-Z facet. 
// If you do, add the script below the template part to your functions.php to remove the letter headings when the A-Z facet is in use.

if ( have_posts() ) :

  echo '<style>
    .fwpl-layout.therapist-listing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 40px;
    }    
    .fwpl-item.age-group,
    .fwpl-item.modality {
        padding-top: 10px;
    }
	.letter-heading {
	  width: 100%;
	  display: block;
	  grid-column: 1 / -1;
	  font-size: 20px;
	  font-weight: bold;
	  color: #fff;
	  padding: 0 20px;
	  line-height: 2.4em;
	  background-color: #015c65;
	  border-radius: 5px 5px 25px 5px;    
	}
	
    @media (max-width: 780px) {
      body .facetwp-template .fwpl-layout,
      body .facetwp-template-static .fwpl-layout {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
      }
    }
  
    @media (max-width: 544px) {
      body .facetwp-template .fwpl-layout,
      body .facetwp-template-static .fwpl-layout {
        grid-template-columns: repeat(1, 1fr); /* 1 columns */
      }
    }

  </style>';

  $current_letter = '';
  
  echo '<div class="fwpl-layout therapist-listing">';

  while ( have_posts() ): the_post();

    // Add a letter heading for each letter in the alphabet
    // We are using the last name here, as the query is ordered by the last_name field
    $last_name = get_field('last_name');
    $first_letter = strtoupper(substr($last_name, 0, 1));

    if ($first_letter !== $current_letter) :
      echo '<div class="letter-heading">' . esc_html($first_letter) . '</div>';
      $current_letter = $first_letter;
    endif;

    echo '<div class="fwpl-row therapist border-top card">';

    $post_id = get_the_ID();
    $post_title = get_the_title();

    echo '<div class="fwpl-item therapist-title entry-title">';
    $website = get_field( 'website', $post_id );
    if ( $website ) {
      echo '<a href="' . $website . '" target="_blank">' . $post_title . '</a>';
    } else {
      echo $post_title;
    }
    echo '</div>';


    echo '<div class="fwpl-item address">';
    echo do_shortcode( '[work_address]' );
    echo '</div>';

    echo '<div class="fwpl-item phone">';
    echo do_shortcode( '[work_phone]' );
    echo '</div>';

    $agegroup = get_field('age_group');
    $modality = get_field('modality');
    if ($agegroup) {
      echo '<div class="fwpl-item age-group">';
      echo '<hr style="width:30%; background-color:white; margin-bottom:10px;">';
      $labels = [];
      foreach ($agegroup as $item) {
        if ( isset( $item['label'] ) ) {
          $labels[] = $item['label'];
        }
      }
      $agegroups = implode(', ', $labels);
      echo '<div class="field-label">Age Group</div>';
      echo '<div style="font-size:15px;">'. $agegroups .'</div>';
      echo '</div>';
    }
    if ($modality) {
      echo '<div class="fwpl-item modality">';
      $labels = [];
      foreach ($modality as $item) {
        if ( isset( $item['label'] ) ) {
          $labels[] = $item['label'];
        }
      }
      $modalities = implode(', ', $labels);
      echo '<div class="field-label">Modality</div>';
      echo '<div style="font-size:15px;">'. $modalities .'</div>';
      echo '</div>';
    }

    echo '</div>';

  endwhile;

  echo '</div>';

  ?>
<?php else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

<?php
// Add this to your functions.php to remove the letter headings when the A-Z facet is in use

add_action( 'facetwp_scripts', function() {
    ?>
    <script>
        (function($) {
            document.addEventListener('facetwp-loaded', function() {
                let selected = FWP.facets['therapist_alphabetical']; // Your A-Z facet name
                if ( selected.length ) { // If any choice in this facet is selected
                    $('.letter-heading').addClass( 'facetwp-hidden' );
                }
            });
        })(fUtil);
    </script>
    <?php
}, 100 );