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.

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

    anusuyafurphy

    (@anusuyafurphy)

    Hi Chavo,

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

    Thank you.

    stevygee1987

    (@stevygee1987)

    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.