Composr Supplementary: Creating a Store Locator for Your Composr Website

Written by Steve Jarvis, Sponsored by Arvixe hosting
Image

Adding our Catalogue

Adding our Catalogue

(Click to enlarge)

Composr has a huge number of possibilities available via its impressive choice of built in features. On top of the inbuilt features there is also a great range of additional optional features created by both the Composr team and other community members. One of these is DataMappr which makes adding a store locator to your website a simple process. A store locator is very useful for any retail business.

Setting up the catalogue of stores

The first part of this is to set up a catalogue within your install which will include all of the information relating to your stores and the positioning data for each store. To be able to fill in the data you will need to know both the longitude and latitude coordinates of each store. To find this you can use this free website. https://itouchmap.com/latlong.html.

I will go through the minimum for creating a new catalogue for your store locator. You can add as many fields to the information as you like but there are too many field option types to cover in this tutorial!

Creating your catalogue

Image

Adding your Store information (filling in a catalogue entry)

Adding your Store information (filling in a catalogue entry)

(Click to enlarge)

  1. Go to the Admin Zone
  2. Navigate to the Content section of the Admin Zone menu
  3. Choose the Catalogues icon
  4. Choose the Add catalogue icon
  5. Give the catalogue a name – for this version I have called it "stores" and used the same for the catalogue codename.
  6. In the name box for field 1 call it "Store name"
  7. Leave the setting as a brief line of text and to display in category views
  8. On field 2 give it the title "Store information"
  9. Set field 2 as multiple lines of text either with or without Comcode support. This is so you can fill in the information for the store
  10. Leave the settings for field 2 as a brief line of text and to display in category views
  11. For fields 3 and 4 these are the latitude and longitude fields for your stores. They should have one field for "Latitude" and one for "Longitude" and you probably want to untick (uncheck) the options to show on the category-views and also for in search.
  12. Click the Add catalogue button once you are happy with all of the fields you have added.
You now need to add entries for all of your stores including the Latitude and Longitude fields

Adding the module to your install and placing the store locator on a page

The next part of the process is installing the addon and placing the block on the relevant page. To do this you need to:
  1. Go to the Admin Zone
  2. Navigate to the Structure section of the Admin Zone menu
  3. Choose the Addons icon
  4. Scroll down and choose "Import non-bundled addon(s)"
  5. Click Download and choose the Information display category
  6. Choose DataMappr
  7. Scroll down and click the "Import non-bundled addon(s)" button
  8. Click Proceed etc until it is installed

Navigate to the page where you want the store locator to appear.
You can either add the block using the Block construction assistant in which case you need the block main_google_map or you can add the block manually in which case the code will look something like:
Image

Store locator box

Store locator box

(Click to enlarge)

Code

[block title="store locator" description="This is a Store Locator" latfield="Latitude" longfield="Longitude" catalogue="stores" width="100%" height="400px" zoom="6" latitude=" 53.417436" longitude -1.358185"]main_google_map[/block]

You can change these options to suit your own Catalogue. The parameters you can add are:
  • Title – the title of the block
  • Description – a description of the block
  • Latfield – This is a required field and must have the same name as the field you have put the latitude coordinates in when creating the catalogue
  • Longfield – This is a required field and must have the same name as the field you have put the longitude coordinates in when creating the catalogue
  • Catalogue – A required field and should be the codename of the catalogue you have created
  • Width – the width of the block, This will default to 100%
  • Height – the height of the box which will default to 300px
  • Zoom – A number between 1 and 17, the higher the number the more zoomed in the map will start at.
  • Latitude – The Latitude coordinates where you want the center of the map to be when first loaded.
  • Longitude – The Longitude coordinates where you want the center of the map to be when first loaded.
You should note that the preview of this page will not work for this block so I recommend creating the page not attached to a live site and making sure it works before you link it to your live site.

Feedback

Please rate this tutorial:

Have a suggestion? Report an issue on the tracker.