Dokan Geolocation

Dokan Multi Vendor Documentation

When there is a lot of vendors in the marketplace, customers need some parameters to search for some specific vendors. Location can be a good parameter to find the vendors close to the customers.

Dokan Business package introduces the new module, Geolocation that allows customers to search for products and vendors by location.

Let’s see how to setup this module.

Admin Configuration

1. Turn on Geolocation from wp-admin→Dokan→Modules.

this is a screenshot of Dokan geolocation modules

2. Go to Dokan→Settings→Appearance. Turn on the checkbox for Show Map on Store Page if not enabled.

3. Then enter the JavaScript Google Map API Key in the next field. Obtain the API Key in the manner given in the link.

You can also go for Mapbox. It is an alternative to Google Maps. The link to acquire access key is given. You can easily attain the access token and use Mapbox as your geolocation.

this is a screenshot of dokan settings-Appearance

4. Click on Save Changes.

5. Go to Dokan→Settings→Geolocation. Here you can configure the position of the map as to where it would appear among these two storefront pages: Shop Page and Store List Page.

this is a screenshot of geoloaction

You can position the Map on Top, Left, and Right.

this is a screenshot of Dokan Geolocation Settings

When you are setting location on Mapbox, you need to write the location precisely. Or you can write the location of the adjacent areas then drag the locator on to your location.

6. By default, filters will be enabled. Admins can disable it. Filters include searching for products, categories, and vendors by location.

Shop page view with geolocation:

this is a screenshot of geolocation

Store List view with geolocation:

this is a screenshot of store list view

You can see all the stores location when you use Mapbox.

this is a screenshot of StoreList Mapbox

8. By default, maps in single product page will be enabled. Admins can disable it.

this is a screenshot of mapbox

Single product page tab view with geolocation:

9. Select the Radius Search Unit as Kilometers or Miles from the drop-down.

10. Admins can also change the minimum and maximum Radius Search Distance using the numeric fields.

11. After configuring, click on Save Changes.

Show location on Sidebar

Admins can also show the geolocation feature on storefront using Dokan widgets. Though for this to work, the default setting for Location tab on single product page has to be disabled from wp-admin→Dokan→Settings→Geolocation.

1. Navigate to wp-admin→Appearance→Widgets.

2. Drag and drop Dokan: Product Location widget to Sidebar to show the map on the side of single product page.

3. You can also add the Dokan: Geolocation Filter Form to a page on your site by dragging and dropping the widget. Note: for this widget to render properly, you need to use a child theme.

this is a screenshot of store location sidebar

This is how it will appear on the product page when you use Product Location widget:

this is a screenshot of store location sidebar

Widget view:

Show geolocation filters by shortcode

Alternatively, you can also render the geolocation filter form by shortcode.

  1. To do this, enter the shortcode [dokan-geolocation-filter-form] on your Edit Page section in the relevant place.
  2. Or you can also select Geolocation Filter Form from the Forms drop-down, as shown below.
  3. Then Save the update:
this is a screenshot of geolocation shortcode
this is a screenshot of page

View from the front after using shortcode:

Vendor configuration

1. Vendors go to Vendor Dashboard→Settings→Store. Ensure that under Map you have entered your address. Click on Update Settings.

2. Vendors can set up location product-wise too. To do this go to Vendor Dashboard→Products.

3. Now click on Edit Product. Scroll down the page. Under Geolocation, uncheck Same as store location.

4. Then enter a new location for the product. Then click on Save Product.

this is a screenshot of vendor configuration for geolocation

Now customers can search for this product by location from shop list page.

Other than that there are no other configurations for vendors.

How to Create The Mapbox Token

Creating a Mapbox token is pretty simple. All you need to do is follow these simple steps.

Step 1: Create your Mapbox account

You need to add a username, your email id and other important information to create a Mapbox account.

Step 2: Click on the Create Token button

After creating your Mapbox account, you need to log in to your account. There you will find the Create Token button. Click on it.

this is a screenshot of Create Token

Step 3: Add the token name and submit

You need to add a token name to distinguish between various tokens as you may need to create different tokens. Then click on the Submit button.

this is a screenshot of Submit

Step 4: Copy your Access Token

After submitting you will get your Access Token. Copy it from there and paste it on your Dokan Settings.

this is a screenshot of Access token

That’s it!

How to Create Google Map API

In order to collect the API key for Google Maps, log in to your Google developer account. Now click on the Create Credentials button and choose the API option from the drop-down menu. Give your API key a name and your API key will be created.

this is a screenshot of Choose API Key

Now, you need to enable a few API’s. Click on the Library and type,

Directions API and enable it,

this is a screenshot of Directions API

Geocoding API,

this is a screenshot of Geocoding API

Places API,

this is a screenshot of Places API

Maps Javascript API,

this is a screenshot of Maps Javascript

After enabling them, you need to restrict your API. For that, click on the Edit API option from the dropdown box,

this is a screenshot of Click on Edit API Key

Now, choose HTTP referrers and add your web address. While adding your website address, use one with HTTP, with “*” and one with HTTPS.

this is a screenshot of Edit API Key

After that Save your API key and copy that API key to your Dokan Google Map settings.