Title: Toggle Featured Stores
Last modified: April 12, 2021

---

# Toggle Featured Stores

 *  Resolved [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/)
 * Hello,
 * I’ve followed your guide here to show featured stores first: [https://wpstorelocator.co/document/create-featured-store-that-shows-up-first-in-search-results/](https://wpstorelocator.co/document/create-featured-store-that-shows-up-first-in-search-results/)
 * I just wondered if there was a way to expand on this to allow the user on the
   frontend to toggle this view.
 * So by default featured stores are loaded first, but the user can just toggle 
   this off to show them in normal distance order.
 * Kind regards

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

 *  Plugin Author [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/)
 * (@tijmensmit)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14311386)
 * Let me know if your comfortable with code, then I can point you in the right 
   direction how to make this work.
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14311585)
 * Hi Tijmen,
 * Yeah I have a reasonable understanding. I implemented your code from your well
   written guide that I linked to in my first post and then modified this to work
   with the Advanced Custom Fields instead.
 * So hopefully I should be ok with this too 🙂
 * Many thanks
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14328376)
 * Hi [@tijmensmit](https://wordpress.org/support/users/tijmensmit/),
 * I just wondered if you’ve managed to find the time to take a look at this for
   me please.
 * Much appreciated
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14369562)
 * Hi [@tijmensmit](https://wordpress.org/support/users/tijmensmit/)
 * Apologies for pushing for this but it has been over 2 weeks now and I can see
   you’ve been helping others (as recent as 2 hours ago) but there has been no update
   on this from your last comment.
 * Your help would be very much appreciated.
 * Kind regards
 *  Plugin Author [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/)
 * (@tijmensmit)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14369779)
 * Sorry for not responding before, I only got a notification for your last response.
 * The first thing you need to do is make sure you have included a CSS class as 
   explained [here](https://wpstorelocator.co/document/create-featured-store-that-shows-up-first-in-search-results/#change-styling).
 * Next use [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)
   to load a custom script, in the script use [ajaxComplete](https://api.jquery.com/ajaxcomplete/)
   to run code after a search is complete that listens for changes to change to 
   a checkbox in your [custom template](https://wpstorelocator.co/document/load-custom-store-locator-template/).
 * The code inside [ajaxComplete](https://api.jquery.com/ajaxcomplete/) should look
   for the custom CSS class, and based on the above checkbox [show / hide](https://api.jquery.com/toggle/)
   it.
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14376089)
 * Thank you [@tijmensmit](https://wordpress.org/support/users/tijmensmit/) and 
   don’t worry about the delay – I appreciate you taking the time to come on here
   and help.
 * All of what you’ve said makes absolute sense however I don’t think I explained
   it very well.
 * I don’t want to toggle the style of featured stores. I’d like a dropdown box 
   on the frontend that will show featured stores at the top of the results list
   by default and then the option of changing the results to be distance only.
 * So going off what you’ve said, inside my ajaxComplete function I’d need something
   like:
 *     ```
       $(document).ajaxComplete(function () {
   
       	$("#dropdown").change(function () { 
       		if($(this).val() == 'featured_first'){
       			// Put featured stores at the top
       		} else {
       			// Sort by distance (featured stores appear in normal distance order)
       		}
       	});
   
       });
       ```
   
 * —
 * I can see that the function for sorting by featured first is as follows, so I
   just need a way of merging the two together somehow.
 *     ```
       add_filter( 'wpsl_store_data', 'custom_store_data_sort' );
   
       function custom_store_data_sort( $stores ) {
   
           $premium_list = array();
   
           foreach ( $stores as $k => $store ) {
   
                   // Check if the location is a premium one.
                   if ( isset( $store['featured'] ){
   
                       // Move the premium location to a new array
                       $premium_list[] = $store;
   
                       // Remove it from the existing $stores array
                       unset( $stores[$k] );
                   }
           }
   
           /**
            * Merge the list of premium locations with the existing list.
            * This will make sure the premium location show up before the normal locations.
            */
           $results = array_merge( $premium_list, $stores );
   
           return $results;
   
       }
       ```
   
 * I hope this makes sense.
 *  Plugin Author [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/)
 * (@tijmensmit)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14382874)
 * I don’t have a working code snippet showing how to do this, but [this](https://stackoverflow.com/questions/21267120/sort-by-id-element-using-jquery)
   and [this](https://stackoverflow.com/questions/26387996/reorder-li-elements-by-class-name-in-jquery)
   article should point you in the right direction how to make it work.
 * Edit, you may for the distance short want to add the distance itself as a data
   attribute on the li element so you can use that value to sort on when you want
   to restore it.
 * Or keep two copies of the li list in two different vars, one with the distance
   sorting, and one with the features stores.
    -  This reply was modified 5 years ago by [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/).
    -  This reply was modified 5 years ago by [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/).
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14382987)
 * Ohhh I see why you mentioned adding classes now. That’s a far better solution
   compared to the overengineered one I was trying to do.
 * Thank you very much for your time and help with this.
 *  Thread Starter [Ordog](https://wordpress.org/support/users/ordog/)
 * (@ordog)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14399730)
 * Hi [@tijmensmit](https://wordpress.org/support/users/tijmensmit/)
 * I just wanted to follow up on this to let you know that I’ve now done what I 
   needed thanks to your help.
 * In the end I went with the data attribute as you suggested. One for distance 
   and one that tracks the original order. Then I had a function that when the dropdown
   changes it either sorts by distance or sorts stores back into their original 
   order.
 * Your support has been very much appreciated, thank you once again.
 *  Plugin Author [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/)
 * (@tijmensmit)
 * [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14402297)
 * Happy to hear it’s resolved now 🙂

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

The topic ‘Toggle Featured Stores’ is closed to new replies.

 * ![](https://ps.w.org/wp-store-locator/assets/icon-256x256.jpg?rev=1007784)
 * [WP Store Locator](https://wordpress.org/plugins/wp-store-locator/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-store-locator/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-store-locator/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-store-locator/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-store-locator/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-store-locator/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [Tijmen Smit](https://wordpress.org/support/users/tijmensmit/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/toggle-featured-stores/#post-14402297)
 * Status: resolved