Adding CSS dynamically to search results

If you only want the first one, then try this code inside the function custom_store_meta.

if ( !is_wp_error( $terms ) ) {
    if (function_exists('z_taxonomy_image')) {
        $store_meta['terms'] = z_taxonomy_image_url($terms[0]->term_id);
    }
}

The $terms[0]->term_id will only grab the first one.

Hi Tijmen. Thanks for your reply!

It works ok!

Now, I want to declare another store meta but I get an error. My code looks like this:

add_filter( 'wpsl_store_meta', 'custom_store_meta', 10, 2 );
function custom_store_meta( $store_meta, $store_id ) {
    $terms = wp_get_post_terms( $store_id, 'wpsl_store_category' );
    $store_meta['terms'] = '';
    store_meta['icons'] = '';
    if ( !is_wp_error( $terms ) ) {
         if (function_exists('z_taxonomy_image')) {
			$store_meta['terms'] = z_taxonomy_image_url($terms[0]->term_id);
			$store_meta['icons'] = z_taxonomy_image($terms[0]->term_id);
		}
	}
    return $store_meta;
}

function custom_frontend_meta_fields( $store_fields ) {
    $store_fields['wpsl_terms'] = array(
        'name' => 'terms'
    );
    $store_fields['wpsl_icons'] = array(
        'name' => 'icons'
    );
    return $store_fields;
}

And in my custom listing template I put this line:

$listing_template .= "\t\t" . '<%= icons %>' . "\r\n";

I get the error:
ReferenceError: icons is not defined

What I’m doing wrong?

Thanks in advance.

@chavo —

Did you end up getting this working? I have two categories for my stores and I would like to have a different icon show up on the map depending on the category.

Hi flantascience. Yes.
I used this code in functions.php

add_filter( 'wpsl_store_meta', 'custom_store_meta', 10, 2 );
function custom_store_meta( $store_meta, $store_id ) {    
    $terms = wp_get_post_terms( $store_id, 'wpsl_store_category' );    
    $store_meta['terms'] = '';
	if ( !is_wp_error( $terms ) ) {
		if ( count( $terms ) > 1 ) {
           	$store_meta['terms'] = get_bloginfo('template_directory')."/images/icono-multimarca.svg";
        } else {
			if (function_exists('z_taxonomy_image')) {
            	$store_meta['terms'] = z_taxonomy_image_url($terms[0]->term_id);
			}
        }
    }      
    return $store_meta;
}
function custom_frontend_meta_fields( $store_fields ) {
	$store_fields['wpsl_terms'] = array( 
        'name' => 'terms'
    );
    return $store_fields;
}

Note that you need to install the plugin Categories Images and assign an image to the categories.

I hope it helps!

I’ve installed ‘Categories Images’ and assigned a yellow and green square to my two categories. I then added that code to functions.php. I do not see any changes to the store locator. I was expecting the icon markers on the map to change…. is the change happening somewhere else I’m not aware of?

Here’s the demo site: https://riptie.rezz-on8.com/distributor-locator/

Hi, sorry for my late reply. I don’t know what to say. Maybe there is something related to Google Maps Api changes or maybe something with the plugin code… I don’t know. I don’t notice any console error. Try making partial echo of the info to be sure what part of the code is working.

Hi Chavo,

Is there anyway to display category image icon in gmap in wp store locator. Please advise me.

Thank you.

Here is the complete, updated solution, which I pieced together, without having to modify any core plugin files:

1) Install Categories Images plugin and add some images to your Store Categories.
2) Copy wpsl-gmap.js to your Child Theme, replace this lines in addMarker():

url = markerSettings.url + wpslSettings.storeMarker;

with:

// Edit here: Use category image as marker
if( infoWindowData.categoryMarkerUrl ) {
	url = infoWindowData.categoryMarkerUrl;
} else {
	url = markerSettings.url + wpslSettings.storeMarker;
}

3) In functions.php, load your modified javascript instead of the plugin’s:

/* see https://stackoverflow.com/a/29307618 */
function prefix_child_replace_wpsl_script() {
	global $wp_scripts;
	$wp_scripts->registered[ 'wpsl-js' ]->src = get_stylesheet_directory_uri() . '/js/wpsl-gmap.js';
}
add_action( 'wp_footer', 'prefix_replace_wpsl_script' );

4) Also in functions.php:

add_filter( 'wpsl_store_meta', 'prefix_store_meta', 10, 2 );
function prefix_store_meta( $store_meta, $store_id ) {
	$terms = wp_get_post_terms( $store_id, 'wpsl_store_category' );

	$store_meta['terms'] = '';

	if ( $terms ) {
		if ( !is_wp_error( $terms ) ) {
			// Just use the first category found
			if( function_exists('z_taxonomy_image_url') ) {
				$store_meta['categoryMarkerUrl'] = z_taxonomy_image_url($terms[0]->term_id);
			}
		}
	}

	return $store_meta;
}

add_filter( 'wpsl_frontend_meta_fields', 'prefix_frontend_meta_fields' );
function prefix_frontend_meta_fields( $store_fields ) {
	$store_fields['wpsl_categoryMarkerUrl'] = array( 
		'name' => 'categoryMarkerUrl'
	);

	return $store_fields;
}

Thanks for sharing this. I have been so busy with other issues, that I never really had the time to look into this.

I’m almost done with the 2.2.8 update, and I will include this line in the wpsl-gmap.js file, so it will work without any code changes after the update is released.

if ( infoWindowData.categoryMarkerUrl ) {
   url = infoWindowData.categoryMarkerUrl;