Adding CSS dynamically to search results

If you add this code to the functions.php in your theme folder, then the ‘terms’ names are included in the returned results.

You can then use the wpsl_listing_template filder to add the ‘terms’ data to the template.

If you look at the Usage example, then you can copy the code, add it to the functions.php in your theme folder, remove the my_textinput section, and replace the first $listing_template line with this:

$listing_template = '<li class="<%= terms %>" data-store-id="<%= id %>">' . "\r\n";

This will add the term names as the CSS class on the li elem, allowing you to style them anyway you want.

I came from this post

This is not working for me. My code into functions.php look like this:

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

    if ( count( $terms ) > 1 ) {
        $location_terms = array();

        foreach ( $terms as $term ) {
            $location_terms[] = $term->name;
        }

        $store_meta['terms'] = implode( ', ', $location_terms );
    }

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

function custom_listing_template() {

    global $wpsl_settings;

	$listing_template = '<li class="<%= terms %>" 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";
	$listing_template .= "\t\t" . '</div>' . "\r\n";

    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;
}
?>

I get the error:

ReferenceError: terms is not defined
((__t=( terms ))==null?”:__t)+

Any clue? Maybe something wrong with <%= terms %>?

Thanks in advance.

I guess not all locations you have are assigned to a term?

Try change the code from this line:

$listing_template = '<li class="<%= terms %>" data-store-id="<%= id %>">';

to this ( untested ).

$listing_template = '<li class="<% if ( terms ) { %> <%= terms %> <% } %>" data-store-id="<%= id %>">' . "\r\n";

I guess if you remove the whole terms part, it works fine, and there are no errors?

Hi Tijmen. Yes, you are right. If I remove the whole “terms” part, everything goes ok.

This is the error I get now:
ReferenceError: terms is not defined
if ( terms ) {

Try this code in the functions.php instead.

I go back to:
$listing_template = '<li class="<%= terms %>" data-store-id="<%= id %>">';
Also tried:
$listing_template = '<li class="<% if ( terms ) { %> <%= terms %> <% } %>" data-store-id="<%= id %>">' . "\r\n";

But we haven’t luck. Still getting:
ReferenceError: terms is not defined
((__t=( terms ))==null?”:__t)+

Have you checked if the terms field is included in the ajax response?

I will explain you my goal and maybe we can arrive to a better solution.
I want to display different markers based on categories. I know that this function isn’t developed yet, but I was thinking in a way to hack some solution.
With a plugin (Categories Images) I was able to add icons to each category. This is the easy part.
Each store is assigned to only one category.
So, I was looking for a way to get the url image of the category assigned to each store and send that url to wpsl-gmaps.js. Something like:
markerPath = categoryIcon
I guess that first I need to process the terms and get the category image url asigned to each store with php code. I think that something link this will work:

foreach (get_the_terms($store_id, 'wpsl_store_category') as $catIcons) :
if (function_exists('z_taxonomy_image')) {
  $categoryIcon = z_taxonomy_image_url($catIcons->term_id);
}
endforeach

I don’t know how to send $categoryIcon to wpsl-gmaps.js
What do you think?

I can’t figure out how to include the terms field in the ajax response.
I tried:

add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );
function custom_frontend_meta_fields( $store_fields ) {
    $store_fields['wpsl_terms'] = array(
        'name' => 'terms',
        //'type' => 'url'
    );

    return $store_fields;
}

What I’m doing wrong?

You need to use the wpsl_store_meta filter if you want to collect the category name / id the location is assigned to, or in this case get the thumb url.

I found a small problem in the original code, it assumed you had multiple categories, which is what the code was originally intended to do what I first wrote it, but it would fail if there was only 1 category.

This code should work much better, I checked it, it does include the category name in the ajax response if only a single cat exists. You can modify it to include whatever you want.

Well… this is weird. I got it working and I figured out the problem you report. But now, it isn’t working anymore. On first load, markers and list aren’t displayed. Only start point marker.
If I make a search, everything is displayed ok.

I get this:
TypeError: n is null
https://grupopropeller.com/web2015/wp-includes/js/underscore.min.js?ver=1.6.0
Line 5

The code in my functions.php 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'] = '';

    if ( !is_wp_error( $terms ) ) {
        if ( count( $terms ) > 1 ) {
            $location_terms = array();

            foreach ( $terms as $term ) {
                $location_terms[] = $term->slug;
            }

            $store_meta['terms'] = implode( ', ', $location_terms );
        } else {
            $store_meta['terms'] = $terms[0]->slug;
        }
    }

    return $store_meta;
}

add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );
function custom_frontend_meta_fields( $store_fields ) {
    $store_fields['wpsl_terms'] = array(
        'name' => 'terms'
    );
    return $store_fields;
}

add_filter( 'wpsl_listing_template', 'custom_listing_template' );
function custom_listing_template() {
    global $wpsl_settings;
	$listing_template = '<li class="<%= terms %>" 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";
	$listing_template .= "\t\t" . '</div>' . "\r\n";
    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;
}

I don’t know what I’m doing wrong ??
I’m getting this error again:
ReferenceError: terms is not defined
https://grupopropeller.com/web2015/wp-includes/js/underscore.min.js?ver=1.6.0 line 5 > Function
Line 4

You don’t need this part.

add_filter( 'wpsl_frontend_meta_fields', 'custom_frontend_meta_fields' );

Try to remove it, and see if it makes a difference.

Great! It works!

Just 2 more questions

1) How can I get only one category name (the first one) instead of all?
2) How can I send the value to the function addMarker in wpsl-gmap.js?

Thanks!

I can’t figure out how to arribe to question 1 (I tried $location_terms = $term[0]->term_id / $store_meta[‘terms’] = $location_terms[0] with no luck) but… I get different custom markers for each location!

Here are the steps:
1) Install “Category Images” plugin and assign images to each store category. You can use svg files (better for rendering in mobile devices)
2) Put this piece of code into your functions.php file:

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 ) {
            $location_terms = array();
            foreach ( $terms as $term ) {
                if (function_exists('z_taxonomy_image')) {
					$location_terms = z_taxonomy_image_url($term->term_id);
				}
            }
            $store_meta['terms'] = $location_terms;
        } else {
			if (function_exists('z_taxonomy_image')) {
            	$store_meta['terms'] = z_taxonomy_image_url($terms[0]->term_id);
			}
        }
    }
    return $store_meta;
}

3) Modify the addMarker function into wpsl-gmap.js
Remove this:

if ( storeId === 0 ) {
		infoWindowData = {
			store: wpslLabels.startPoint
		};

		markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;
	} else {
		markerPath = wpslSettings.path + "img/markers/" + wpslSettings.storeMarker;
	}
	mapIcon = {
		url: markerPath,
		scaledSize: new google.maps.Size( 24,35 ), //retina format
		origin: new google.maps.Point( 0,0 ),
		anchor: new google.maps.Point( 12,35 )
	};

Put this:

if ( storeId === 0 ) {
		infoWindowData = {
			store: wpslLabels.startPoint
		};
		markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;

		mapIcon = {
			url: markerPath,
			scaledSize: new google.maps.Size( 24,35 ),
			origin: new google.maps.Point( 0,0 ),
			anchor: new google.maps.Point( 12,35 )
		};
	} else {
		markerPath = infoWindowData.terms;

		mapIcon = {
			url: markerPath,
			scaledSize: new google.maps.Size( 48,48 ),
			origin: new google.maps.Point( 0,0 ),
			anchor: new google.maps.Point( 12,35 )
		};
	}

That’s all!!! I hope it helps.