Adding a class to "location_name"

[jay5]

Hey guys,

Can you let me know what file I need to edit to add a class to the location_name under the search results? I tried editing the file below but it isn’t being applied on the front end.

store-locator-le\include\module\options\SLP_SmartOptions.php

Thanks
Jay

[Cici]

Hi Jay, what exactly are you trying to do?  If you are trying to add something to the results layout, that will effect  what is displayed on the  front end. Or are you looking for info regarding   extended data manager 

You shouldn’t be editing the code itself .  You should use CSS, see docs.

P.S. When posting in forums could you provide the information  requested in Looking for technical support. 

 

 

[jay5]

Hey Cici,

Thanks for the reply.

I am trying to add a FA icon after the location name for featured locations but since there is no “fa” class on the span.location_name, the icon just shows up as a box.

And sorry for not including any more info but here it is now. 🙂

SLP URL: http://kuat.space/dealers/dealer-locator/
Search Options: 65804 within 5 miles

You will see that Queen City Cycles is marked as a featured location with the box icon showing. I have also attached a screenshot showing both with and without the “fa” class added to the location_name.

 

 

Attachments:

You must be logged in to view attached files.

[Lance Cleveland]

1) You need to specify a complete Font Awesome class reference.   Throwing fa in front of something is not a font awesome class specification.     You need to specify an icon part of the class as well.  For example:
http://fontawesome.io/icon/bandcamp/

2) If you are going to use FA styling in the SLP results you are going to need to make sure your theme is supporting it and loading it on all pages or get a plugin that will load FA on all pages for you.

NEVER edit SLP code for anything unless you want to break your upgrade options.   We also cannot provide support on edited code installations.

You can do what you want by updating the Results Layout setting via SLP | Settings | Results | Results layout and learning a bit about how Font Awesome works.     The other option is to put basic HTML image tags in place, though a CSS/Font-based solution will be much faster and more scalable for different screen resolutions.

I would start by throwing a verbatim example from the SA site for an icon into results layout and getting that to render first.    That will let you know your page is loading the FA library properly, which is a function outside of SLP.   There are far too many font and CSS frameworks to start randomly loading all of them up on every SLP page, thus we leave it to the WP Theme or other plugins for users that want to extend the look & feel of the SLP UI with those libraries.

[jay5]

Thanks for the info Lance,

I was able to get it working by updating the results layout as you mentioned. I didn’t realize that was where the HTML was coming from but it made it super easy.

1.) Just to note on this, unfortunately adding the FA icon classes to the item through the results layout adds the icon to all the results instead of just the featured item. Using the content property you can call specific classes, in this case “div.featured span.location_name:after”, to add the icon where it needs to be without affecting the other results. I just added the standard “fa” class to all the results and added the icon directly to the featured item through CSS.

2.) Our current theme does support FA icons throughout it so they are being called already on each page.

Thanks again for the info as I just installed the plugin yesterday so I still trying to figure everything out.

[jay5]

I also have another question about the SLP Search Form widget but wasn’t sure if you wanted me to make another post or not so I added it here. If I need to start another one, just let me know.

Is there anyway to use the SLP Search Form widget inside custom HTML? I have added this widget to our footer but since it is it’s own widget, it is outside the rest of the elements. I would love to be able to add this under the dealer locator section, as well as to our product pages.

 

[Author]

Posts