Please contact Zuppler Staff if you have not yet received information about your Channel slug.

The most basic and fundamental part of a network is the Restaurant Online Ordering page. It is the first step you should complete when setting up your new network. So please take a moment and setup your first restaurant following this wizard using "test" as the restaurant slug. Once you have the Test Restaurant up and ready, please come back here.

Understanding the code

Block elements

In order to display the Order Online components, Zuppler API will translate the following placeholders in your HTML document:
zuppler-account, zuppler-cart, zuppler-menu

The other divs are used as layout helpers, so they arrange and resize the rendered elements.

Script tag

The source location of this script include details about your Channel and Restaurant slugs.

http://api.zuppler.com/channels/your-channel/restaurants/restaurant/menu.js

 

The source location of the script (explained above) is the only difference from one restaurant to another among your network. Your channel slug never changes, so you only need to change the restaurant slug.

Let's suppose our new restaurant name is "Springfield Favorite Bistro". Duplicate the page created at Step 1, rename it and change the restaurant:

http://api.zuppler.com/channels/your-channel/restaurants/springfield-favorite-bistro/menu.js

Save and browse to your new page. Zuppler will recognize this is a new restaurant, and will ask you to configure it. Just click on "This page is not yet configured. Click to configure." and follow the steps. Done! Your new restaurant is ready.

Best practices

The way you setup the system to handle more restaurants is totally up to you. Just make sure each restaurant page is calling the script with the appropriate slugs. However, we recommend to be more dynamic and not duplicate static pages for each restaurant.

You can take advantage of variables passed in the URL query string. Hence, we can have a single page that serve all restaurants.

PHP example:
Replace the basic script location:

<script type='text/javascript' src='http://api.zuppler.com/channels/your-channel/restaurants/first_restaurant/menu.js'></script>

With something more flexible

<script type='text/javascript' src='http://api.zuppler.com/channels/your-channel/restaurants/<?php echo $_GET["restaurant"]; ?>/menu.js'></script>

Then navigate among your restaurants, passing the slug as a parameter in the URL:

http://your-domain.com/order-online.php?restaurant=first_restaurant
http://your-domain.com/order-online.php?restaurant=second_restaurant
http://your-domain.com/order-online.php?restaurant=third_restaurant

Very Important Please contact Zuppler once you finish setting up your network. We need to update our system to match your URL pattern.

After a few restaurants has beed added to your network it is time to show them in a nice listing page.

Zuppler provides a helpfull API to obtain restaurant list information defined for a channel.

Total Restaurants in a Channel

In order to obtain a count of restaurants defined for your channel, you would need to invoke the following URL:
http://api.zuppler.com/channels/channel-slug.json

Calling this will return the following:

{ "permalink":"permalink-to-your-channel", 
  "stylesheet_url":"", 
  "use_external_account":true, 
  "restaurant_count":34 }

You can read the restaurant_count value to determine the total restaurant count for the channel.

Restaurant Listing Information

In order to obtain the restaurant listing information, we would need to call the following URL: http://api.zuppler.com/channels/channel-slug/restaurants.json?page=page num

This returns 20 restaurants in a page. The total number of pages will be determined based on the restaurant count. So, if your channel has 50 restaurants, then you need to invoke the URL 3 times with different page numbers (1, 2 & 3) in order to get a full listing.

The result from this call will look like this:

{...},
{
    "id": 43,
    "category_columns": 2,
    "menu_columns": 1,
    "remote_id": "litos-empanadas",
    "permalink": "litos-empanadas",
    "show_description": false,
    "use_tabs": false,
    "channel_link": "Channel",
    "restaurant": {
        "name": "Lito's Empanadas",
        "permalink": "litosempanadas",
        "restaurant_logo": {
            "id": 5976,
            "available": true,
            "xlarge": "http://cdn.zuppler.com/path-to-the-xlarge-image...",
            "medium": "http://cdn.zuppler.com/path-to-the-medium-image...",
            "thumb": "http://cdn.zuppler.com/path-to-the-thumb-image...",
            "tiny": "http://cdn.zuppler.com/path-to-the-tiny-image...",
            "original": "http://cdn.zuppler.com/path-to-the-original-image..."
        },
        "addresses": [{
            "id": 479,
            "address_id": 13479,
            "address": "2566 N Clark St, Chicago, IL 60614",
            "mini_address": "2566 N Clark St, Chicago",
            "geo": {
                "lat": "41.929489",
                "lng": "-87.642846"
            }
        }],
        "restaurant_cuisines": "Mexican",
        "restaurant_amenities": "Online Orders, Delivery, Catering, Carry Out",
        "delivers": true,
        "city": "Chicago",
        "ordering_paused": false,
        "working_hours": "<strong>Sun</strong>: 12:00pm  - 7:30pm <br/><strong>Mon - Sat</strong>: 11:00am  - 8:30pm"
    }
},
{...}

Best practices

An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and Internet connection.

Each separate domain costs time in a DNS lookup, so page-load time will grow along with the number of separate domains you call.

Since the information presented in the listing page is not changing so frequently, we recommend to call the Zuppler API server-side, cache the results and make it to expire at 10 minutes or so. This approach will optimize the page-load performance considerably.