Gists

3 hours ago
<?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 );
1 week ago
<?php
/**
 ** Use legacy templates instead of react for 
 ** yith wishlist so it can be re-init easily
 ** after facet refresh
 **/

// legacy use php templates for wishlist button
add_filter( 'yith_wcwl_rendering_method', function( $rendering ) {
    return 'php-templates';
});

// Re-trigger YITH wish list init after FacetWP refreshes (after facet filtering)
add_action( 'facetwp_scripts', function() {
	?>
	<script>
	document.addEventListener('facetwp-loaded', function() {
		/** wishlist */
        if (FWP.loaded) {
			jQuery(document).trigger( 'yith_wcwl_init' );
        }
	});
	</script>
	<?php
});
3 months ago
<?php
/** partial support, facet pager does not work, generateblock pager does work
 ** but does not does not use ajax to update page
 ** add "facetwp-template" class to query https://d.pr/i/1R8Nds
 ** and the snippet below
 **/

add_filter('generateblocks_query_wp_query_args', function ($args, $attributes, $block, $current) {
  if ("facetwp-template" == $attributes['className']) {
    $args['facetwp'] = true;
  }
  return $args;
}, 10, 4);
3 months ago
<?php
add_action('facetwp_scripts', function () {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {
      if (FWP.loaded) {
        MK.component.ResponsiveImageSetter.init(jQuery('.facetwp-template img[data-mk-image-src-set]'));
      }
    });
  </script>
  <?php
}, 100);
3 months ago
<?php
// Filters out the "FacetWP has not detected a listing template" on pages without a '.facetwp-template' element.
// This is useful in niche customized scenarios where FacetWP JS assets are loaded on all pages, e.g. if included in a code compilation pipeline.
add_action('wp_footer', function() {
  ?>
  <script>
    const originalConsoleError = console.error;
    console.error = function() {
      if (arguments[0] &&
        typeof arguments[0] === 'string' &&
        arguments[0].includes('FacetWP has not detected')) {
        return;
      }
      originalConsoleError.apply(console, arguments);
    };
  </script>
  <?php
});
3 months ago
<?php
add_action('facetwp_scripts', function () {
// Change "3" in both style and script to change the number shown initially

?>
    <style>
        .facetwp-depth.visible > div:nth-child(n+3 of .facetwp-checkbox) {
            display: none;
        }
        .facetwp-depth.visible.showmore > div:nth-child(n+3 of .facetwp-checkbox) {
            display: block;
        }
    </style>
    <script type="text/javascript">
        (function($) {
            document.addEventListener('facetwp-loaded', function() {
                document.querySelectorAll('.facetwp-depth').forEach((node) => {
                    if ( node.childNodes.length > 3 ) { // only works if no grandchildren
                        // add show more / less
                        let show = document.createElement('a');
                        show.textContent = 'Show more';
                        show.classList.add('show-more');
                        node.append(show);
                        show.addEventListener('click', function(e) {
                            let showmore = e.target;
                            let depth = e.target.parentNode;
                            if ( depth.classList.contains('showmore') ) {
                                depth.classList.remove('showmore');
                                showmore.textContent = "Show more";
                            } else {
                                depth.classList.add('showmore');
                                showmore.textContent = "Show less";
                            }
                        });
                    }
                });
            });
        })(fUtil);
    </script>
<?php
}, 100);

3 months ago
<?php
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {
      FWP.hooks.addFilter('facetwp/selections/hierarchy_select', function(output, params) {

        var selected_values = [];
        params.el.find('.facetwp-hierarchy_select option:checked').each(function() {
          var value = $(this).attr('value');
          if (value.length) {
            selected_values.push({value: value, label: $(this).text()});
          }
        });

        if (selected_values.length === 3) {
          console.log(selected_values[2]['label']); // get the label of the 3rd level choice and do something with it
        }
        return output;
      });

    });
    })(fUtil);
  </script>
  <?php
}, 100 );
4 months ago
<?php
/** fixes <picture> tag processing https://d.pr/i/UYLz8P
 ** for facet's ajax refreshes which don't automatically
 ** get processed by imagify
 ** NOT for use with facetwp listing templates
 **/
add_action( 'facetwp_inject_template', function( $output ) {
    $process = New \Imagify\Picture\Display( new Imagify_Filesystem() );
    $output['template'] = $process->process_content( $output['template'] );
    FWP()->request->output = $output;
});
5 months ago
<?php
// Disable FacetWP's query variables in the URL, except for Pager facets.
// To entirely disable FacetWP's query variables, see:
// https://facetwp.com/help-center/developers/the-facetwp-url/#disable-facetwps-query-string

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {

        FWP.buildQueryString = function() {

          var fwp_vars = Object.assign({});

          // Add pagination to the URL hash
          if (1 < FWP.paged) {
            fwp_vars['paged'] = FWP.paged;
          }

          fwp_vars = FWP.helper.serialize(fwp_vars, FWP_JSON.prefix);
          return fwp_vars;
        }

    });
  </script>
  <?php
}, 100 );
5 months ago
<?php
add_action('facetwp_scripts', function () { ?>
  <script>
    (function($) {
      $().on('facetwp-loaded', function() {
        var has_posts = ( 0 <  FWP.settings.pager.total_rows);
        var method = has_posts ? 'removeClass' : 'addClass';
        $('h1.listing-title')[method]('facetwp-hidden');
      });
    })(fUtil);
  </script>
<?php }, 100);