Nibble

Getting started With Seek and destroy for Umbraco 6

Here is a quick guide to get an ajax shop/store/… finder on your Umbraco powered site with the Seek and Destroy package

Prerequisites

Make sure you have at least Umbraco 6.1 since the package makes use of an UmbracoAPIController and that’s only available since version 6.1

Also you need some content that you want to search through, so this can be a collection of stores/offices/hotels/markets/… basically everything that has an address

Install the package

Get the package from http://our.umbraco.org//projects/developer-tools/seek-and-destroy and install it using the developer section

image

Follow the dashboard wizard

Once the package is installed you can use a new dashboard control to help you with geocoding content (you can skip this if you already store coordinates for your content).

So on the developer dashboard you should have a seek and destroy tab with a new control that consists of 3 parts

Google maps datatype

First step is to install the google maps datatype, this is a new datatype that can be used to store coordinates

image

Add google maps datatype property to doctype(s)

Next you can add a new property that uses the google maps datatype to your store/office/hotel/… document types by choosing the doctype and supplying a new alias for the property (I like to call this location)

image

Geocode content

Once you have a place to store the coordinates and your content already contains an address you can auto geocode your content with the following step (so that will try to fetch coordinates based on the stored address). Simply select the doctype, the field(s) containing the address and the field to store the coordinates

image

Once that is done your content will have a new property that looks like

image

Make sure you have jquery

Before adding the locator macro make sure jquery is available on your frontend since the ajax locator makes use of it

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Add the default stylesheet

And to get some default styling also make sure to include the stylesheet

<link href="~/css/seekanddestroy.css" rel="stylesheet">

Add the macro to the page

So now it’s just a matter of adding the macro to the page you want to locator to be displayed on. You’ll need to specify 3 parameters. The source, so where to start looking for documents, the doctype of the documents to look for and the property containing the coordinates.

image

And that’s it with these simple steps you’ll have a shop/store/office locator running on your Umbraco site in minutes Smile

8 Comments so far

  1. Yannick on September 17th, 2013

    Will this work with members’ addresses?

  2. Tim Geyssens on September 17th, 2013

    @Yannick it uses content but you could change it to support members

  3. Yannick on September 17th, 2013

    Thanks Tim, just did that. if somebody is interested… wasn’t much work but here are the modified files: https://dl.dropboxusercontent.com/u/6238459/SeekAndDestroyMembers.zip

  4. Tim Geyssens on September 18th, 2013

    @Yannick sweet :)

  5. Tom on September 19th, 2013

    Just wondering how you specify the units used? i.e. distance in miles vs distance in km?

    Thanks Tim! :)

  6. Tim Geyssens on September 19th, 2013
  7. Lasse on October 28th, 2014

    Hi.

    I have now used about six ours trying to get it work :( I have installed it and everything. The map is vissible - http://haslev.aspserver.dk/forhandler/find-forhandler.aspx

    But I can’t get it to show anything else but my location. Have add multiple locations but nothing happens?

    Can you please help? If it’s not straight forward please reach me on my mail and you can get a log in to admin.

    I hope that you can help. It’s the last thing missing before I can launch the site for my client.

  8. Tim Geyssens on November 4th, 2014

    @Lasse I replied on the forum with a possible fix

Leave a Reply