Implementing a Location Finder on Your Site

Order Online - Location Finder Installation

For multi-location installations, our location finder makes it easy for your customers to find the nearest location. It uses a "lightbox" or "pop-up" presentation. A guest first clicks an "Order Online" button, which triggers the pop-up. This makes it easy to design for existing sites - just find a place to put your Order Online button, and you're done.

Other great benefits:

  • Easy to implement!
  • Mobile friendly - looks great on mobile
  • Easy to style with custom styles (CSS knowledge required)
  • For mobile users, will use geolocation to save typing and speed up the ordering process

Requirements

  • jQuery must be provided on the page (recommeded 1.11 or higher in the 1.x branch)
  • If jQuery is not already added, it can be included from the Google CDN with a tag such as: 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Example Page

A stripped-down example page is available  here.  All styling and extraneous content has been removed, to make the code more clear.

Installation

  • Within the <head> tags, add the Header Content
  • Just above the closing </body> tag, add the Body Content
  • At the end of the Body Content, there are two variables to customize the App ID and API Key. Provde your App ID and API Key; contact Paytronix nline Ordering if you need help finding these values
  • If you want to customize the colors, fonts, etc., create custom CSS as desired. Several example styles have been provided for reference

Triggering the Order Online Modal

  • Add the order-now CSS class to any buttons, links, or other elements that you want to trigger the Order Online pop-up Example: <a href="#" class="order-now">Order Online!</a>
  • The modal can be called manually via Javascript, as follows: odn.order();

Customizing the Address / Zip Code Labels

If you want to change the labels for the address or zip code fields, you simply need to modify the placeholder attributes on the HTML in the Footer Content.

Look for the following content on your page:

<input type="text" placeholder="Street Address" name="street_address"><br><input type="text" placeholder="Zip Code" pattern="\d*" name="zip">

The default placeholders ("Street Address" and "Zip Code") can be changed to your desired text.  For example, to have it read "Your Street Address" and "Your Zip Code", the code would be:

<input type="text" placeholder="Your Street Address" name="street_address"><br><input type="text" placeholder="Your Zip Code" pattern="\d*" name="zip">

Header Content

This content should be added to the head section of your site.

<link rel="stylesheet" href="https://www.opendining.net/media/js/odn-location.css">
<style>
/* Example custom styles for Order Online dialog / content */
/* Style for Order Online modal header */
.od-modal-header h2 {
	font-family: Raleway, Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: #fff;
}
/* Style for Order Online modal body area */
.od-modal-body {
	font-family: Raleway, Arial, Helvetica, sans-serif;
	font-weight: 300;
}
/* Style for Order Online links */
.od-modal a {
	color: #8B7149;
	text-decoration: none;
}
</style>

Footer Content

This content should be added to the body of your site, near the bottom.

<div class="od-modal od-search" data-remodal-id="order-now" role="dialog">
  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
  <div class="od-modal-header">
	<h2>Order Online!</h2>
  </div>
  <div class="od-modal-body">
	<div class="od-order-type-container">
		<h3>Select Your Order Type</h3>
		<div>
			<button type="button" class="od-order-type od-btn od-btn-lg" data-type="delivery">Delivery</button>
			<button type="button" class="od-order-type od-btn od-btn-lg" data-type="takeout">Pick-Up</button>
		</div>
	</div>
	<div class="od-order-type-selected">
		<h3>
			<a href="#" class="od-link od-change-order-type od-pr">(change)</a>
			Order Type: <span class="od-selected-type"></span>
		</h3>
	</div>
	<div class="od-address">
		<h3>Find a Location</h3>
		<form method="post" action="" class="find-store">
			<input type="text" class="od-street-address" placeholder="Street Address" name="street_address">
			<input type="text" class="od-zip" placeholder="Zip Code" pattern="\d*" name="zip">
			<button type="submit" class="od-address-search od-btn btn-primary">Find My Store</button>
		</form>
	</div>
	<div class="od-no-locations">
		Sorry!  No nearby available locations were found.  Please try a different address.
	</div>
	<div class="od-location-selected">
		<h3>
			<a href="#" class="od-link od-change-location od-pr">(change)</a>
			Your Location: <span class="od-current-location"></span>
		</h3>
	</div>
	<div class="od-location">
		<a href="#" class="od-other-locations" data-active="Hide Other Locations" data-inactive="See Other Locations">See Other Locations</a>
	</div>
	<div class="od-locations">
	</div>
  </div>
</div>
<div class="od-location-template od-location-instance">
	<div class="od-loc-info">
		<h4 class="od-restaurant-name"></h4>
		<span class="od-loc-address"></span><br>
		<span class="od-loc-address2"></span><br>
		<span class="od-loc-phone"></span>
	</div>
	<div class="od-loc-actions">
		<a href="https://www.opendining.net/menu/" class="od-order-button od-btn btn-primary od-btn-lg">Order Now!</a>
	</div>
</div>
<script>
	window.odnAppId = 'SET YOUR APP ID HERE';
	window.odnApiKey = 'SET YOUR API KEY HERE';
</script>
<script src="https://www.opendining.net/media/js/odn-location.js"></script>

Supporting Multiple Location Finders on One Page

You may want to have multiple separate location finders on a single page. For example, if you offer both standard ordering and catering orders, but those are broken into separate restaurant groups, you may want to have two separate buttons and separate location finders. In this case, each button may be marked up with the Paytronix Online Ordering app identifier to tell the system what set of restaurants to show.

To trigger a specific group of restaurants, you must set the data-app attribute on the button/link that you want to trigger the location finder.

The following code shows two separate buttons that trigger different "apps," or groupings of locations -- one for standard ordering, and one for catering orders.

<a href="#" class="order-now" data-app="SET YOUR APP ID HERE">Order Online!</a>
<a href="#" class="order-now" data-app="SET YOUR OTHER APP ID HERE">Order Catering!</a>