Add Call to Action buttons in Infobox

In this guide article, we will explain how you can add one or more call-to-action buttons in the infobox of the Store Locator, the addition is just like the addition in the list template, here is the screenshot of the default infobox of our Store Locator plugin.

In the default Infobox, there is already a call to action button which serves the data of the website field of the store.

Hide the Default Website Call to Action #

In case you want to hide the default website call to action button, you can use the CSS below to hide it.

.asl-p-cont a.action.a-website,
.asl-cont a.action.a-website {display: none !important}

Add a New Call to Action Button #

1- To add a new call to action button, first, you have to decide on which field you are going to bind it, so most probably you will create a custom field through the ASL Settings as shown below.

2- once you have added the additional fields, now you should add data to that field, so only then the button will appear for those stores that have the field data available.

3- As you have added the field data, now it is time to add that in the template, go to the ASL Settings > Customizer, select the template that you are using from the Template Dropdown and select infobox from the Section Dropdown.

4- Click on the Load Template, to load the existing HTML template of the info box, and copy the given HTML code to make a new call to action.

{{if booking}}
<a target="_blank" href="{{:booking}}" class="action">[Booking]</a>
{{/if}}

5- We will paste the above HTML code into the template where we want to add the button, please note that we have created a field named booking that is in the code, if you have named it differently, you should replace it before pasting the above HTML code, the name should be in a small case without any space or dash.

6- Once you have added the code, click on the Save button to apply the changes.

Create a Big Call to Action #

If you want to create a full-width infobox button, please copy and paste the HTML code instead of the above code.

{{if booking}}
<div class="sl-row mt-2">
  <div class="pol">
    <a href="{{:booking}}" class="btn-asl btn d-block w-100">[Booking]</a>
  </div>
</div>
{{/if}}

You will paste the above code after the asl-buttons HTML unlike Step 5 where we have pasted it within the asl-buttons HTML tag.

This is how the infobox should appear once it is added properly.

How to add a WhatsApp Call to Action? #

Creating a WhatsApp button call to action is just exactly the same procedure as described above, we will list the points again.

1- Create a custom field named as “whatsapp” in the Custom Field Manager.

2- Add Whatsapp number to any of your store through the Edit Store.

3- Add the given code below to the Template Customizer, for detail please check store locator template customizer.

	{{if whatsapp}}
        <a href="https://wa.me/{{:whatsapp}}?text=Hello" class="action btn-green whatsapp-btn">
            <span class="d-flex align-items-end"><i class="ico-whatsapp"></i> <span>[WhatsApp]</span></span>
        </a>
  {{/if}}

Once you save the customizer, the end results will be list this based on the infobox you have selected.

Change the Ordering of the Infobox Buttons #

If you want to change the ordering of the Infobox buttons in the Agile Store Locator plugin, follow these steps to customize the button arrangement using CSS.

.asl-cont .asl-buttons .a-website {
    order: 1 !important;
}
.asl-cont .asl-buttons .directions {
    order: 2 !important;
}
.asl-cont .asl-buttons .zoomhere {
    order: 3 !important;
}
.asl-cont .asl-buttons a.action {
    margin-right: 0px !important;
}
#asl-storelocator.asl-cont .infoBox .asl-buttons {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

The above CSS will make the website button to be first, follow-up buttons are direction and zoom, the CSS can be add into the Additional CSS.