Show ACF value inside Info Window template

Danny
(@dannyfoo)

4 years, 6 months ago
I managed to display the ACF’s WYSIWYG data inside the listing template by referring to this. Except, I’m struggling now with how to display the data inside the info window.

I’ve very little experience writing PHP. So I don’t really understand the code below well enough to figure out why it’s not working.
```
// Add storeDescription_data field to info window
function custom_cpt_info_window_meta_fields( $meta_fields, $store_id ) {
	
	$storeDescription = get_field( 'store_description', $store_id );
	
	$meta_fields['store_description'] = get_post_meta( $store_id, $storeDescription, true );
	
	// $meta_fields['my_textinput'] = get_post_meta( $store_id, 'wpsl_my_textinput', true );
	
	return $meta_fields;
}
add_filter( 'wpsl_cpt_info_window_meta_fields', 'custom_cpt_info_window_meta_fields', 10, 2 );
```
Some help here would be much appreciated. Thank you in advance.

P.S. The use case for using the WYSIWYG editor from ACF is so that I can add as many WhatsApp numbers, without having to continuously create new fields for it.

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

(@farroyob)

Hi there,

I think you are using the wrong filter. If you want to modify the contents of the info windows in the map, the ones you see when you click the markers, you have to use the wpsl_info_window_template filter.

It is very straightforward and the documentation gets you on track, so check it out.

If I misunderstood what you want to accomplish, get back to us and we will discuss it again 🙂

Regards,

Thread Starter

Danny

(@dannyfoo)

4 years, 5 months ago

Hi there @farroyob Thank you for trying to help me with this.

I did read through the specified documentation. And noted the following comment in the code..

Before you can access the ‘my_textinput’ data in the template, you first need to make sure the data is included in the JSON output.

That was why I started thinking whether I had to do something with the wpsl_cpt_info_window_meta_fields filter in order to get my ACF value to display in the info_window_template

Here’s my full code to show the ACF data in the listing template (this works) and the info window template (need help here)

// Add storeDescription meta data to listing template
function custom_store_meta ( $store_meta, $store_id ) {
	$storeDescription = get_field( 'store_description', $store_id );
	$store_meta['storeDescription_data'] = $storeDescription;
	
	return $store_meta;
}
add_filter( 'wpsl_store_meta', 'custom_store_meta', 10, 2 );

// Modify listing template (left sidebar)
function custom_listing_template() {

    global $wpsl_settings;

    $listing_template = '<li data-store-id="<%= id %>">' . "\r\n";
    $listing_template .= "\t\t" . '<div>' . "\r\n";
    $listing_template .= "\t\t\t" . '<p><%= thumb %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . wpsl_store_header_template( 'listing' ) . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address %></span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<% if ( address2 ) { %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address2 %></span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<% } %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n";
    $listing_template .= "\t\t\t" . '</p>' . "\r\n";
    
    // Check if the 'storeDescription_data' contains data before including it.
    $listing_template .= "\t\t\t" . '<% if ( storeDescription_data ) { %>' . "\r\n";
    $listing_template .= "\t\t\t" . '<%= storeDescription_data %>' . "\r\n";
    $listing_template .= "\t\t\t" . '<% } %>' . "\r\n";
    
    $listing_template .= "\t\t" . '</div>' . "\r\n";

    // Check if we need to show the distance.
    if ( !$wpsl_settings['hide_distance'] ) {
        $listing_template .= "\t\t" . '<%= distance %> ' . esc_html( $wpsl_settings['distance_unit'] ) . '' . "\r\n";
    }
 
    $listing_template .= "\t\t" . '<%= createDirectionUrl() %>' . "\r\n"; 
    $listing_template .= "\t" . '</li>' . "\r\n"; 

    return $listing_template;
}
add_filter( 'wpsl_listing_template', 'custom_listing_template' );

// Store custom data in WPSL JSON response
function custom_frontend_meta_fields( $store_fields ) {

    $store_fields['wpsl_store_description'] = array( 
        'name' => 'store_description',
        'type' => 'textarea'
    );

    return $store_fields;
}
add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );

// Add storeDescription_data field to info window
function custom_cpt_info_window_meta_fields( $meta_fields, $store_id ) {
	
	$storeDescription = get_field( 'store_description', $store_id );
	
	$meta_fields['store_description'] = get_post_meta( $store_id, 'wpsl_store_description', true );
	
	// $meta_fields['my_textinput'] = get_post_meta( $store_id, 'wpsl_my_textinput', true );
	
	return $meta_fields;
}
add_filter( 'wpsl_cpt_info_window_meta_fields', 'custom_cpt_info_window_meta_fields', 10, 2 );

// Modify info window template (popup)
function custom_cpt_info_window_template() {
    
    $cpt_info_window_template = '<div class="wpsl-info-window">' . "\r\n";
    $cpt_info_window_template .= "\t\t" . '<p class="wpsl-no-margin">' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<strong><%= store %></strong>' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<span><%= address %></span>' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<% if ( address2 ) { %>' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<span><%= address2 %></span>' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<% } %>' . "\r\n";
    $cpt_info_window_template .= "\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n"; 
    $cpt_info_window_template .= "\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n"; 
    $cpt_info_window_template .= "\t\t" . '</p>' . "\r\n";
    
	// Check if the 'storeDescription_data' contains data before including it.
    $listing_template .= "\t\t" . '<% if ( storeDescription_data ) { %>' . "\r\n";
    $listing_template .= "\t\t" . '<%= storeDescription_data %>' . "\r\n";
    $listing_template .= "\t\t" . '<% } %>' . "\r\n";
    $cpt_info_window_template .= "\t" . '</div>' . "\r\n";
    
    return $cpt_info_window_template;
}
add_filter( 'wpsl_cpt_info_window_template', 'custom_cpt_info_window_template' );

I’m not sure if I could’ve skipped the wpsl_cpt_info_window_meta_fields filter and use ACF’s get_field directly inside the wpsl_cpt_info_window_template part.

Thanks in advance again.

Thread Starter

Danny

(@dannyfoo)

4 years, 5 months ago

Holy smokes~! I just discovered that the type = ‘wp_editor’ can be declared. This means, I may not need ACF after all. Yeay!

There are some issues though..

I can enter text into the Text tab and not the Visual tab – is this a bug?
I need to remove the Add Media function from the editor here – any ideas?

Here’s the updated full code:

function custom_meta_box_fields( $meta_fields ) {
    
    $meta_fields[__( 'Additional Information', 'wpsl' )] = array(
        'phone' => array(
            'label' => __( 'Tel', 'wpsl' )
        ),
        'fax' => array(
            'label' => __( 'Fax', 'wpsl' )
        ),
        'email' => array(
            'label' => __( 'Email', 'wpsl' )
        ),
        'url' => array(
            'label' => __( 'Url', 'wpsl' )
        ),
        'my_editor' => array(
            'label' => __( 'Description', 'wpsl' )
        )
    );

    return $meta_fields;
}
add_filter( 'wpsl_meta_box_fields', 'custom_meta_box_fields' );

function custom_frontend_meta_fields( $store_fields ) {

    $store_fields['wpsl_my_editor'] = array( 
        'name' => 'my_editor',
        'type' => 'wp_editor'
    );

    return $store_fields;
}
add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );

function custom_listing_template() {

    global $wpsl_settings;

    $listing_template = '<li data-store-id="<%= id %>">' . "\r\n";
    $listing_template .= "\t\t" . '<div>' . "\r\n";
    $listing_template .= "\t\t\t" . '<p><%= thumb %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . wpsl_store_header_template( 'listing' ) . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address %></span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<% if ( address2 ) { %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address2 %></span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<% } %>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n";
    $listing_template .= "\t\t\t" . '</p>' . "\r\n";
    
    // Check if the 'my_editor' contains data before including it.
    $listing_template .= "\t\t\t" . '<% if ( my_editor ) { %>' . "\r\n";
    $listing_template .= "\t\t\t" . '<%= my_editor %>' . "\r\n";
    $listing_template .= "\t\t\t" . '<% } %>' . "\r\n";
    
    $listing_template .= "\t\t" . '</div>' . "\r\n";

    // Check if we need to show the distance.
    if ( !$wpsl_settings['hide_distance'] ) {
        $listing_template .= "\t\t" . '<%= distance %> ' . esc_html( $wpsl_settings['distance_unit'] ) . '' . "\r\n";
    }
 
    $listing_template .= "\t\t" . '<%= createDirectionUrl() %>' . "\r\n"; 
    $listing_template .= "\t" . '</li>' . "\r\n"; 

    return $listing_template;
}
add_filter( 'wpsl_listing_template', 'custom_listing_template' );

function custom_info_window_template() {

    global $wpsl_settings, $wpsl;
   
    $info_window_template = '<div data-store-id="<%= id %>" class="wpsl-info-window">' . "\r\n";
    $info_window_template .= "\t\t" . '<p>' . "\r\n";
    $info_window_template .= "\t\t\t" .  wpsl_store_header_template() . "\r\n";  
    $info_window_template .= "\t\t\t" . '<span><%= address %></span>' . "\r\n";
    $info_window_template .= "\t\t\t" . '<% if ( address2 ) { %>' . "\r\n";
    $info_window_template .= "\t\t\t" . '<span><%= address2 %></span>' . "\r\n";
    $info_window_template .= "\t\t\t" . '<% } %>' . "\r\n";
    $info_window_template .= "\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n";
    $info_window_template .= "\t\t" . '</p>' . "\r\n";
    
    $info_window_template .= "\t\t" . '<% if ( phone ) { %>' . "\r\n";
    $info_window_template .= "\t\t" . '<span><strong>' . esc_html( $wpsl->i18n->get_translation( 'phone_label', __( 'Phone', 'wpsl' ) ) ) . '</strong>: <%= formatPhoneNumber( phone ) %></span>' . "\r\n";
    $info_window_template .= "\t\t" . '<% } %>' . "\r\n";
    $info_window_template .= "\t\t" . '<% if ( fax ) { %>' . "\r\n";
    $info_window_template .= "\t\t" . '<span><strong>' . esc_html( $wpsl->i18n->get_translation( 'fax_label', __( 'Fax', 'wpsl' ) ) ) . '</strong>: <%= fax %></span>' . "\r\n";
    $info_window_template .= "\t\t" . '<% } %>' . "\r\n";
    $info_window_template .= "\t\t" . '<% if ( email ) { %>' . "\r\n";
    $info_window_template .= "\t\t" . '<span><strong>' . esc_html( $wpsl->i18n->get_translation( 'email_label', __( 'Email', 'wpsl' ) ) ) . '</strong>: <%= formatEmail( email ) %></span>' . "\r\n";
    $info_window_template .= "\t\t" . '<% } %>' . "\r\n";
    
    /**
     * Include the data from a custom field called 'my_textinput'.
     * 
     * Before you can access the 'my_textinput' data in the template, 
     * you first need to make sure the data is included in the JSON output.
     * 
     * You can make the data accessible through the wpsl_frontend_meta_fields filter.
     */
    $info_window_template .= "\t\t" . '<% if ( my_editor ) { %>' . "\r\n";
    $info_window_template .= "\t\t" . '<%= my_editor %>' . "\r\n";
    $info_window_template .= "\t\t" . '<% } %>' . "\r\n";
    
    $info_window_template .= "\t\t" . '<%= createInfoWindowActions( id ) %>' . "\r\n";
    $info_window_template .= "\t" . '</div>' . "\r\n";
    
    return $info_window_template;
}
add_filter( 'wpsl_info_window_template', 'custom_info_window_template' );

farroyo

(@farroyob)

4 years, 5 months ago

Hi again, I am glad you found a workaround where you don’t need ACF, it is really not necessary for wp store locator.

As for your questions:

I can enter text into the Text tab and not the Visual tab – is this a bug?

I am not very sure what is going on here, because it works flawlessly in all the test sites that I run, but another user has come across this very issue this week and I don’t know what to make of it, we need to investigate a bit further. (by the way, do you see any javascript errors in the console when that happens)?

I need to remove the Add Media function from the editor here – any ideas?

Yes, we are aware of this. Right now, the options that you pass on to wp_editor are ignored, this is a missing feature and we have it in our to-do list.

Thanks again!

Thread Starter

Danny

(@dannyfoo)

4 years, 5 months ago

Hey @farroyob I’m in touch with your colleague; Fernando, and we’ve narrowed the editor behaviour down to Firefox – my primary browser.

The editor loads fine in Chrome. Just not in Firefox.

And it’s consistent even on my Mac. My main workstation is a Windows.

So it’s a very odd thing indeed.

Well.. hopefully the options for wp_editor won’t take too long. If I can enable just the Text tab, then I can sweep this oddity under the carpet for now – LOL!

farroyo

(@farroyob)

4 years, 5 months ago

Hi, not my colleague, it’s always me, haha. I didn’t notice you were the same person. Good we narrowed it down 🙂

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

The topic ‘Show ACF value inside Info Window template’ is closed to new replies.

Tags