Add the My Nearest Locations Widget to your Magento Site

Configuration and Use

Signing up for Bullseye for your Magento Site

Please follow this link to sign up.  Once you sign up, go SETTINGS/ACCOUNT   in your Bullseye account and find your API and Client ID:

Copy and paste the Account ID and Search API key somewhere so you can use it later.

Load Location Data

Note that your location data will be maintained in your Bullseye account, not your Magento login.

If you are signing up for a trial and would like to load sample data, you can download it here and go to the Bullseye admin to import the sample data (see screenshot below). You may also refer to Upload Locations in a .csv file which can also be used as a reference to upload your own data. The sample file may also be helpful in helping you understand how to format your data.  We include Lat/Long in the sample file, but you do not need Lat/Long in your data, we can provide coordinates assume you have accurate address data for your locations.

After the data is uploaded, you can configure the basic API settings.

In your Magento account, navigate to

Stores>Configuration>Bullseye>Store Locator>General  

Copy and Paste the API key and Client ID into the appropriate fields:

Copy and Paste the Search API key into the Bullseye API key field, and the Client Id in the Client Id field.  You only need to use the

Google API key if you are going to use the widgets instead of pasting the locator code into a CMS page.

Other General Settings:


Import Country: This option lets you import additional countries into Bullseye if you have a locator with multiple countries, or if you add

countries to Bullseye after your initial set up.  After adding your countries and locations from those countries to Bullseye, select Import Country

and those countries will be functional in your Magento widget.  

Type in the number 1 in the text field under "Default" for the country you want to default to in the search. 

Top Link Text:

This will show the text of the link of the Mini Locator in the front end.  Typically depending on your theme that is on the top right of the browser.

Store Link Icon:

This will show the icon next to the link on the Top Links.

CMS Page:

This is where you can select what CMS Page the store location page uses. If you want to simply display the Bullseye search a page (as opposed to creating a smaller "mini" store locator widget that goes in your navigation) you can go to the Bullseye application and login, and create a search interface, then go to Magento and paste that into source view of the CMS Page editor.  Remember to use source view.

The installer creates a page "\locations" that can be edit in the Magento CMS Page section of Magento.  You can find instructions for setting up the interface that will go in Magento here. Once you create the interface, you can save the code in the Publish step, to be embedded later in a Magento page.

Text for Front End

This section allows you to rewrite the default text used in the mini locator and elsewhere.  For example, if you refer to your stores as dealers, you can change that here.

Creating a Widget and Adding it into Pages, Content Blocks, Etc.

Currently we can support 2 different store locator widgets with your Magento site.  This allows you to display locators on specific pages, or to embed in CMS pages and blocks. Please consult the Magento documentation for more detailed instructions on Widgets.  Below is an overview of the 2 Bullseye Widgets:

  • My Nearest Locations: A simple widget that plots locations that are close to the user on a map or list, without the ability to search manually.  Locations will merely be displayed on the map, or list and the user may select a map marker to get the address info of that location, or view the list:

           List Example:

Map Example:
  • My Store: A locator that is launched from a site's navigation, allows a user to select a default store, and links to the "My Nearest Locations" locator:

Creating a Widget (My Nearest Locations)

This method may be used for placing a widget through the site, or on a particular page.

  1. Go To Content & Widgets   then select Ad Widget  
  2. Select the "My Nearest Locations   widget in the Type  .
  3. Select the appropriate theme.
  4. Set the Storefront Properties and Options as appropriate

             Widget Title  : Type in the name of the widget for you own reference only.

             Assign to Store Views   Select the appropriate option according to how your site is structured.

             Sort Order Type in the appropriate number as it should be prioritized, if there are multiple instances of widgets within a single container.

Select Layout Updates  

Select the correct option as appropriate from the "Display On" menu.  You may want to display the widget on all pages in your site, or on select pages.

You may also select the appropriate container option from the "Container" menu which give you different options in terms of where the widget will appear

on the page(s).

Select Widget Options and enter text for the fields as appropriate:

Title: This is what the user will see on the front end when they use the widget.

Radius to search: Enter a Radius that will be wide enough to return a location.

Message if no store found: Enter a friendly message that will be displayed when no results are found within a radius.

Maximum stores to show: Enter the number of stores that should be displayed.

View: Select with Map or List format of the results depending on your preference.

Select  Save when you are done, and Clear Caches if necessary. You will see a message the the instance of the widget was saved.

Including a Widget in a Block or CMS Page

You may use this method if you are editing a particular page, and want to put the widget on that specific page.

  1. From the CMS page WYSIWYG editor click the Insert Widget  button.
  2. Select either the My Store  or My Nearest Widget
  3. Choose the desired options and select Insert Widget  
Finding the Store

Click on the "Store Locator" link in the top navigation:

A popup will appear with a search box to find a store:

Buttons:

  1. Use My Location: This button is used to get the list of stores near the user based on the location of the user's computer or phone.  This only works if you have the widget installed on a secure site (https://).  The user may select "Allow access browser location" if they want to allow the widget to access their location on their computer or phone:
  2. Search stores on map: This will take the user to the CMS page where you have put the "My Nearest Location" interface (the code you inserted from the Bullseye Admin.

    3. Find a Store near a Zip/Postal Code allows the user to enter a zip code to find locations near them: Save Store & Display Your Store in Map

The user can click the "Save" link next to the location they want to save.  This location will be displayed when they return to your site in the future, beneath the heading "Your Preferred Store."  This will remain until the user changes or removes the store. 

NOTE: The Map for the saved store and nearest store will be shown only in a secure site.

The Map view of the saved store and nearest store can be saved in any page by creating the widget as mentioned in above "Creating a Widget" point:

If the user has their location service turned off in their browser, or on their phone, the nearest store will not be available in map and list view, and the message will be displayed:

If the site is not secure, then both the map view and list view will not display:

If a custom logs in to the site, a "My Store" link will be created in their account navigation section, and the store can be viewed there: