2 September 2016

How to Customize Google Marker InfoWindow and Sidebar of Store Locator

Agile Store Locator Infobox is custom made HTML, which can be edited or styled with CSS without any knowledge of scripting. Customization of Store Item or Google Maker InfoBox is pretty much easy with our plugin. You can’t only style the Google Marker Infobox but also Add/Remove attributes which you want to show on your InfoBox. This is how our default Marker InfoWindow appears.

infowindow

We are using jsrender library which is a lightweight library for templating, it provides the ability to add IF and ELSE condition in our script, so if we have any column data missing for a particular store we can hide that information for that store, for example, if you don’t have Phone Number available for All Store List, we can simply change enclose our HTML tag in the IF statement like this.

{{if phone}}
<div class="phone"><span class="glyphicon glyphicon-earphone"></span><b>Phone: </b><a href="tel:{{:phone}}">{{:phone}}</a></div>
{{/if}}

By using this IF clause in it means, if the phone number is not available for any store the whole div tag (<div class=”phone”>….</div>) will not appear in the marker InfoBox.

Now, first of all, let see how many columns we can use in our info box or store view, we can use any of them to show on our marker infobox or Store List View.

title, description, street, city, state, postal_code, country, lat, lng, phone, fax, email, website, description_2, start_time, end_time

store-data
The Store Data we add when creating Store

The above columns are the same columns which we save in our stores, description_2 is our additional Information on Add Store.

Customization of Google Marker InfoBox

Now I’m going to show you step by step how we can customize our InfoBox, we will add an additional description to it, which is description_2 in data columns.

  • Open up your WordPress Admin panel, go to Plugins and select Editor, then Select “Agile Store Locator” from Plugin List and press Select Button. Now you will see “Plugin Files” showing the files of our plugin directory on the right side of the editor.
  • If you are using White Template Select file “agile-store-locator/includes/template-frontend-0.php” or “agile-store-locator/includes/template-frontend-1.php” in case of Blue Template selected for your store locator.

    infobox-plugin-editor
    Editing InfoxBox HTML using WordPress Plugin Editor
  • Now first of all take backup of your file before customization to revert it back in case of any problem, after that search for <script id=”asl_too_tip” type=”text/x-jsrender”> script tag, under the script we have our InfoBox HTML which can be styled and customized.
  • Now we will add our Additional Description which is referred as description_2 in between the script TAG, we can simply place this block of code below Category Block. Make sure that our new attribute must be wrapped in <div> tag.
    {{if description_2}}
    <div>{{:description_2}}</div>
    {{/if}}

    add-additional-info
    Added Additional Description Tag to our InfoBox
  • Once you place the code Press Update File and refresh the front view of agile store locator, the additional Description will be appearing on your marker infoWindow.

    marker-infoWindow
    Additional Description Added On InfoWindow

Customization of Agile Store Locator Store List

The customization of Store List which appears next to our Map is exactly same as we did for Infobox, all the same columns are available to edit in our store List, the only difference is that we will update HTML within <script id=”tmpl_list_item” type=”text/x-jsrender”> script tag instead of <script id=”asl_too_tip” type=”text/x-jsrender”>.

sidebar-store-locator
Sidebar of Store Locator before Country Tag

Step 1 and 2 are same for customizing Store List, in step 3 we will search for HTML within <script id=”tmpl_list_item” type=”text/x-jsrender”> and update it.

sidebar-agile-store-locator
Sidebar HTML in Plugin Editor

For Example, we want to show the country Name below the city, state, and Zip. We can place this line of code wrapped in <p> tag below address Block, update it and refresh the front view.

<p class="p-area">{{:country}}</p>

sidebar-plugin-editor
Country Tag added into our HTML

Now once we refresh the page, it will have a country tag added on the sidebar of our store locator.

sidebar-store-locator
Sidebar of Store Locator After Country Tag

Thanks for reading the article, let me know in your comments how it worked for you.

2 thoughts on “How to Customize Google Marker InfoWindow and Sidebar of Store Locator”

  1. Just wish to say your article is as astonishing. The clearness on your submit is just nice and
    I can think you are a professional on this subject.
    Well together with your permission let me clutch your feed to stay updated with approaching post.

    Thanks a million and please continue the gratifying work.

Leave a Reply

Your email address will not be published. Required fields are marked *