[ASL_STORELOCATOR]

Add Store Locator on Page

[ASL_STORELOCATOR gesture_handling="cooperative" zoomcontrol="false" zoom="4"]

List of the Attributes for the Filters

List of the Attributes for the Maps

List of the Attributes for the Configuration

List of the Attributes for the Sorting

List of the Attributes for the UI/UX

Sections in “Add New Store” Form

1. Store Information

This section includes the following fields:

• Store Name: The name of the store, which will appear as a heading in the listing.
• Description: A brief description of the store.
• Site URL: The URL of the store’s website.

2. Store Address

This section contains all the fields related to the store’s location:

• Phone
• Fax
• Email
• Street
• City
• State
• Postal Code
• Country
• Coordinates (Longitude/Latitude): These are crucial for the store’s marker to appear on the map. The marker will not display if these fields are left empty or zero.

Adding the Coordinates

The coordinates, which are the latitude and longitude fields, are automatically added as you enter the address. However, for this feature to work, you need to ensure that the API key is configured properly. If necessary, you can also manually enter the data for the coordinates fields.

3. Store Timings

In this section, you can specify the store’s operating hours:

• Open Days: The days of the week the store is open.
• Start Time: The opening time for each day.
• End Time: The closing time for each day.
• Custom Time for Each Day: If the store has different opening and closing times on different days, these can be set individually.

4. Other Details

This section includes additional options and customization fields:

• Categories: The categories to which the store belongs.
• Additional Details: Any other relevant information about the store.
• Enable/Disable Store Options: Settings to enable or disable specific store.
• Logo: The store’s logo that appear in the listing.
• Marker: The marker icon that will represent the store on the map. You can also upload a new marker if desired.
• Custom Fields: Custom fields that are created through the Custom Field Manager, allowing for additional specific information to be added to the store profile.

1. Via Manage Stores:
   • Navigate to the “Manage Stores” section.
   • Select the stores you want to delete.
   • Click the “Delete” button to remove the selected stores.
     
2. Delete All Stores:
   • If you want to delete all stores and reset the store IDs back to 1, go to the “Import/Export” page.
   • Click the “Delete All Stores” button to remove all existing stores.
     
3. Delete via CSV:
   • Export your store data as a CSV file.
   • Rename the header column “update_id” to “delete_id” in the CSV file.
   • Re-import the modified CSV file.
   • The stores listed in the CSV file will be deleted.

Please note that deleting stores is a permanent action, and deleted stores cannot be recovered. Make sure to back up any important data before performing these actions.

What is Google Maps API Key?

The public Google API Maps Key is used on the front end of the store locator. The libraries include Geocoding, Place API, Direction, and Javascript Maps.

What is the Difference Between Two API Keys?

The Google Public API Key and Google Server API Key are both used to access and authenticate with Google APIs, including services like Google Maps. The primary difference between them lies in how you can apply restrictions to enhance security:

1. Google Public API Key:
   • HTTP Referrers Restriction: This type of API key is typically used for client-side applications, like JavaScript code that runs in a web browser.
   • You can specify the web domains (HTTP referrers) from which the API key can be used. Requests made from web pages on these specified domains are allowed.
   • Commonly used for public websites or applications where the API key needs to be embedded in client-side code and exposed to end users.
2. Google Server API Key:
   • IP Address Restriction: Server API keys are used for server-to-server communication, such as when your server needs to make requests to Google APIs.
   • You can specify a list of IP addresses or IP ranges that are allowed to use the API key. Requests originating from these specified IPs are accepted.
   • Often used for back-end server applications where the API key is kept secure on the server side and not exposed to the client.

How to Create a Google Server API Key?

In the guide video, we have demonstrated how you can create both Google API keys, please watch the guide tutorial.

Below is the shortcode of the address Search Widget with its parameters.

[ASL_SEARCH category_control="1" redirect="url-of-your-store-locator-page" bg-color="#FFFFFF" btn-color="#FFF000"]

The parameter redirect must be the valid URL of your Store Locator page.

How can I change the colors?

To change the colors such as background or button, please make use of shortcode attributes bg-color and btn-color, where you can provide your color codes in hex format.

How can I Customize the Layout of the Search Widget?

Please make a backup of the template so that your changes don’t override any updates. Moreover, to customize the layout of the search template, please follow the below steps.

1- Goto the ASL Dashboard and click on the button “Backup Template”.

2- Select “Search Widget” in the dropdown list.

3- Click on the Backup button to make the backup.

Now as we have created the backup of the template, we can do any HTML changes to the template using our “Theme Editor” by selecting the template.

Add/Remove Dropdown Controls

Search Widget can support up to 3 dropdown filters, that you can display next to the search. The first is the category filter that is default and it can be removed by the shortcode attribute category_control=”0″.

[ASL_SEARCH category_control="0" redirect="url-of-your-store-locator-page" bg-color="#FFFFFF" btn-color="#FFF000"]

To add Specialities or Brand dropdown filter you have to add them in the shortcode as given below.

[ASL_SEARCH category_control="0" redirect="url-of-your-store-locator-page" bg-color="#FFFFFF" btn-color="#FFF000" filter_ddl="special"]

To add the brand and the special filter together you have to write it in comma-separated values.

[ASL_SEARCH category_control="0" redirect="url-of-your-store-locator-page" bg-color="#FFFFFF" btn-color="#FFF000" filter_ddl="brand,special"]

How to add the store detail page?

Create a new WordPress page and you can name it Stores as in the screenshot below.

Add the page title such as Stores and add the [ASL_STORE] shortcode in it.

Copy the page ID of the newly created store detail page and the relative URL slug of it.

Now, go to the ASL Settings > Detail Page tab, and do the following steps.

• Select the Website link type to Page Slug.
• Go to the UI Settings tab and enable the Website Link button.

• Save the Settings, and now the last step is to “Save Changes” in the Permalink.

Once you perform these changes, you will be able to see the store detail pages.

It is also possible to display only a specific field of any store through the render store field guide.

How to remove the Hours Closed Labels?

If you are to avoid showing up the store timings that are closed for any day, you can use the following shortcode to get rid of those closed days, and just render the open hours of the week.

[ASL_STORE closed_label="0"]

Steps to Setup the Store Registration Form

1. Go to “pages” on WordPress and add a new page.
2. Add the title of the page. For example, “ Store Form Store Locator”
3. Paste the shortcode [ASL_FORM] on the page and press “Publish”
4. Open the published page to access the Store Registration Form

How can Users Register a New Store?

1. On the Store Registration Form, fill in the new store information, address location, and any additional details.
2. Press register after agreeing to the terms and conditions.
3. If you have provided an email for notifications and checked the “Notifications”  box in ASL Setting, you get a notification about the addition of the new store
4. Go to the “Manage Stores” tab and approve the newly added store by clicking the ”approve” button next to it
5. The store will now appear in the store list in “Manage Stores” and on the map as well

 Pre-selecting a specific country on the Store Registration Form

Users can also have a country pre-selected on the Store Registration Form, which can save you the trouble of continuously selecting the country from the dropdown menu when registering a new store.

To have a pre-selected country on the Store Registration Form, simply add the following shortcode on a new page:

[ASL_FORM default_country="223"]

In the above shortcode, the number 223 corresponds to the USA. To pre-select another country please use the corresponding country code provided below.

Redirecting to a specific page after registering a new store

In case a user wants to be redirected to a different web page after registering a new store, they can do so by adding the below shortcode on the new page:

[ASL_FORM default_country="223" redirect="insert URL here"]

For example, the below shortcode will redirect the user to google.com and the pre-selected country will be the USA.

[ASL_FORM default_country="223" redirect="http://google.com"]

Remove the Google Maps

Since version 4.8.12, the register form has a Google Map to pinpoint the location of the user by dragging the marker, in case you don’t need it, use this shortcode below.

[ASL_FORM default_country="223" map="0" redirect="insert URL here"]

List of Country codes

Set Up the Store Registration Form with reCAPTCHA

​Starting from version 4.11.11, the Agile Store Locator plugin integrates seamlessly with the Advanced Google reCAPTCHA plugin. This enhancement fortifies your Store Registration Form against spam and automated submissions, ensuring that only legitimate entries are processed. To implement this feature, ensure both plugins are installed and activated, and configure the reCAPTCHA settings appropriately.

Customization of Store Registration Form

The store registration form in Agile Store Locator is highly customizable, allowing you to tailor it to your specific requirements. To add new fields to the form, follow these steps:

Accessing the Custom Field Manager

To customize the store registration form in Agile Store Locator, start by accessing the Custom Field Manager section within the ASL Settings, newly created fields will appear in the form automatically.

Modifying the Registration Template File

If you need to modify existing fields or their properties, navigate to the form file located at agile-store-locator/public/partials/asl-store-form.php and make the necessary changes, once you have done the changes, you can make a backup of the template to avoid getting overridden with the updates.

Implementing Field Validation

Enhance the user experience and ensure data accuracy by adding validation to form fields. Simply include the required attribute in the HTML input elements of the desired fields.

Remove Existing Fields

While it’s possible to remove fields directly from the form, keep in mind that certain mandatory fields cannot be removed entirely. If you still need to proceed with removal, locate the respective HTML elements in the form file (asl-store-form.php) and delete the corresponding HTML code, for those fields you can use the d-none class to hide them.

Customizing the Store Registration Form

Starting from version 4.10.11, Agile Store Locator allows users to customize the appearance of the store registration form using CSS variables. These variables let you easily change the typography, font size, colors, and other style elements, the following CSS rules can be add to the Appearance > Additional CSS.

Available CSS Variables

Here are the CSS variables you can use to style the store registration form:

• --sl-title-color: Sets the color of the title.
• --sl-title-size: Sets the font size of the title.
• --sl-subtitle-color: Sets the color of the subtitle.
• --sl-subtitle-size: Sets the font size of the subtitle.
• --sl-font-color: Sets the color of the form text.
• --sl-font-size: Sets the font size of the form text.
• --sl-label-color: Sets the color of the labels.
• --sl-label-size: Sets the font size of the labels.
• --sl-action-btn-font-size: Sets the font size of the action button text.
• --sl-action-btn-color: Sets the color of the action button text.
• --sl-action-btn-bg: Sets the background color of the action button.
• --sl-action-btn-border: Sets the border color of the action button.
• --sl-font-family: Sets the font family for the form.
• --sl-map-height: Sets the height of the map.

Example Usage

To apply these custom styles, add the following CSS rules to your stylesheet:

.asl-store-form {
  --sl-title-color: orange;
  --sl-title-size: 50px;

  --sl-subtitle-color: red;
  --sl-subtitle-size: 40px;

  --sl-font-color: pink;
  --sl-font-size: 15px;

  --sl-label-color: green;
  --sl-label-size: 10px;

  --sl-action-btn-font-size: 15px;
  --sl-action-btn-color: white;
  --sl-action-btn-bg: purple;
  --sl-action-btn-border: purple;

  --sl-font-family: "Poppins";

  --sl-map-height: 500px;
}

Customization Examples

Example 1: Changing Title and Subtitle Colors and Sizes

.asl-store-form {
  --sl-title-color: blue;
  --sl-title-size: 60px;

  --sl-subtitle-color: gray;
  --sl-subtitle-size: 35px;
}

Example 2: Customizing Form Text and Label Styles

.asl-store-form {
  --sl-font-color: #333;
  --sl-font-size: 14px;

  --sl-label-color: #666;
  --sl-label-size: 12px;
}

Example 3: Styling the Action Button

.asl-store-form {
  --sl-action-btn-font-size: 16px;
  --sl-action-btn-color: #fff;
  --sl-action-btn-bg: #007bff;
  --sl-action-btn-border: #007bff;
}

Example 4: Setting the Font Family and Map Height

.asl-store-form {
  --sl-font-family: "Arial, sans-serif";
  --sl-map-height: 400px;
}

The above mentioned fonts need to be installed on your site. By utilizing these CSS variables, you can create a store registration form that matches your site’s design and branding.

Video Tutorial Store Registration Customization

To create a store lead form page please follow the below steps:

1. Firstly, open a new “page”
2. Secondly, insert the below shortcode to create the lead form

[ASL_LEADFORM radius="100" country="us"]

The above shortcode has 2 attributes:

1. Radius – When a prospective customer fills a lead form, all the stores within the radius value will be notified of the lead.
2. Country – This attribute restricts the lead notification to a specific country when a prospective customer fills the lead form.

To display the store lead form on your website, please follow the below steps:

1. Go to “ASL Settings” on Agile Store Locator
2. Navigate to the “Register and Leads” tab
3. Enable “Notification Status”, and provide your notification email in the“Notification Email” section

4. Click on “Save Settings”

Note: when a prospective customer fills in a lead form, a notification will appear in the notification email address provided, as well as to all the stores within the radius value in the shortcode.

Once you are done, you will now have the means to capture lead information using the store lead from.

For more information on how to add a store lead form, please see the below video tutorial.

You can upload the stores’ data with CSV files. Furthermore, the “Import/Export” section holds all the uploaded CSV files in the system, and these files are visible in a list format. In addition, any uploaded CSV files can be downloaded, deleted, or imported into the database.

Validating the Google Geocoding API Key

Before you import a CSV file please make sure that you have a valid Google Geocoding API Key. 

You must have a valid API key to retrieve any coordinates (latitude and longitude) that might be missing from your CSV file. 

To fetch the missing coordinates from your CSV file, please click on the “ Fetch Missing Coordinates” button after you validate the Google Geocoding APKI key.

Uploading and Importing a CSV File

To upload a CSV file with stores’ data onto AGile Store Locator, please follow the below steps:

1. Go to the “Import/Export Stores” section on Agile Store Locator
2. Click on the “Upload” Button
3. Select the CSV file for uploading, and click on “Upload File”

Once you have uploaded a CSV file, you will now need to import it into the system for the store data to appear. Furthermore, to import an uploaded CSV file simply click on the “Import” button next to the file name, and you get an “X Rows Imported” message.

How to Export a CSV File?

Click on the “Export All” button to export all the stores in the system, and retrieve them as CSV files.

How to Delete All Stores?

The “Delete All Stores” button will prompt you to delete all the stores’ data from the system upon confirmation. Use this button with caution because the deleted data can’t be retrieved once gone.

How to reimport the Stores Data?

Reimporting is a better way in case you have mistakenly made some problem such as duplicate data, wrong slug, or any other reason, the setups are pretty simple and don’t take more than a few minutes to do so, here are the steps for it.

1. The first and most important step is to export your stores data via the green “Export All” button and keep that CSV file safe, better to make a backup copy of it.
2. Make edits to your CSV file and make sure there is no update_id column in it, as that will look for update data instead of insertion.
3. Click on the red button “Delete All Stores” which will delete all the data of the stores, it will also reset the auto-generated IDs of the stores back to zero.
4. Import your CSV file that you have edited in the second step by uploading and clicking on the import button.
5. Once your file is imported all the new data that you have imported should start appearing on the store locator, if you still notice the old data, refresh or disable the JSON Cache.

By following the above step, you should be able to successfully import your updated CSV file data, in case of any issue, please contact us with your purchase code and the sample CSV file or any generated error.

Understanding and Preventing Store Duplication in CSV Imports

When stores are getting duplicated during the import process, it’s crucial to understand how the import operations are performed and what conditions lead to duplication. Here’s an explanation:

1. Import Operations:

• The import process involves three main operations: insertion, updation, and deletion.
• Insertion: New records are added to the store database.
• Updation: Existing records are updated based on specific criteria.
• Deletion: Records may be removed from the database if required.

2. Importance of ‘update_id’ Column:

• The presence of an ‘update_id’ column in the CSV file is crucial for determining whether a record should be updated or inserted.
• If the ‘update_id’ column exists and contains data, the import process will attempt to update existing records based on this identifier.
• However, if the ‘update_id’ column is missing or contains empty data for certain rows, the import process will proceed with insertion instead of updating existing records.

3. Causes of Duplication:

• Missing or Empty ‘update_id’ Column: If the ‘update_id’ column is absent or contains empty data in the CSV file, the import process will treat each row as a new record, leading to duplication.