Support » Plugin: WP Store Locator » Adding CSS dynamically to search results

  • Resolved samuelgarton

    (@samuelgarton)


    Hi!

    Is there a way to dynamically add a CSS style (with the category type) to the li items in the search results?

    I have two categories of stores, and I would LOVE it if I could style them independently

    If there is anyway you can help me here I would be over the moon. I love this plugin, but this has me defeated 🙁

    https://wordpress.org/plugins/wp-store-locator/

Viewing 9 replies - 16 through 24 (of 24 total)
  • Plugin Author Tijmen Smit

    (@tijmensmit)

    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.

    flantascience

    (@flantascience)

    @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.

    chavo

    (@chavo)

    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: http://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 http://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;
    }
    Plugin Author Tijmen Smit

    (@tijmensmit)

    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;
    
Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘Adding CSS dynamically to search results’ is closed to new replies.