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);