Features configuration

Determines the functionality and appearance of Online Ordering components. Selections can be made using the following modes:

In CP Channel Config interface
On Web integration
- as a data attribute attached to #zuppler-menu placeholder.
```
data-feature-a="value" data-feature-b-value
```
- from URL using feature query string.
```
exampledomain.com?features=feature-a-value,feature-b-value
```
On Native App using configuration function. E.g.
```
  setAppConfig({
      feature-a: "value", 
      feature-b: true,
      ...
  })
```
Features that are configured in CP Channel Config have higher specificity and will override those defined on the integration page

General

`external-user-management`

false [boolean] default - If enabled, user management is handled by the host application and Zuppler won't render the User Icon in toolbar.

`kiosk-mode`

false [boolean] default - If enabled users will be automatically cleared when they will land on order confirmation page

`show-item-quantity`

true [boolean] default - Show item quantity picker and qty display across the app

`navbar-buttons`

Configure how the navigation bar buttons are aligned

normal standard behavior
right all buttons are on the right except for the back button

`flow-time`

Defines the display type for time selection screen

standard default - ASAP - TODAY - TOMORROW - OTHER
compact ASAP - SCHEDULE

`loyalty-type`

all default - All configured loyalty providers are enabled
none No discounts or coupons will be made available

`menu`

simple default - full page menu
drilldown categories are visible on the first screen, and then items as a secondary screen
sidebar Menus & Categories are displayed on the left side of the menu

`menu-frame`

Controls how the main integration view is rendered

simple default - Shows only the menu and toolbar
cart Shows the menu on the left and cart on the right and the special configuration toolbar at the top
cartfull Shows the menu on the left and cart with order info on the right

`prices`

Configure how prices are shown on the menu page

default - Will only display the first price
range Will display min and max prices
priority Display the price of the size that is listed first
none Prices are not visible in menu page

`image-quality`

Configures image quality for menu items

standard default - Use medium resolution image quality
high Use high resolution image

`menu-discounts`

Determine how discounts are displayed in Menu Page

standard default - Standard discounts
none Discounts will not show

`quick-add-mode`

Defines quick add behavior

option	quick add	quick add collapse	customize	customize collapse
none	no	no	no	no
relaxed*	yes	yes	yes	yes
always-relaxed	yes	yes	yes	yes
strict	yes	no	no	no
inline	yes	no	no	no

Always relaxed setting is the same as relaxed but will apply even if the user clicks on the item name

Item

`itemview`

standard default - modifiers on the left side, image with description, selections and actions on the right
builder full page image with editable summary on the right side

`item`

simple default option - list of modifiers with options
squares Modifiers with list of pictures. Falls back to standard version
plus - Same as squares but with circles

`item-comments`

true [boolean] enable special instructions on item

`item-optional-modifiers-mode`

Overrides quick-add mode for expanding/collapsing non required modifiers

quick-add default - Follows quick add mode
collapsed Non required modifiers will show as collapsed
expanded All modifiers will show as expanded

`item-comments-maxlength`

250 [number] limit item comments to maxlength chars

`item-options-selectionmode`

Defines how options can be selected when max selection is reached on a modifier

snake default option - automatically uncheck older choices
fixed uncheck a choice manually in order to select another

Cart

`skip-initial-flow`

true [boolean] Skip cart configuration when the menu is initially loaded

`enable-save-cart`

true [boolean] Enable Dashboard Saved Orders and Save Cart functionality

`address-street-valid`

true [boolean] Consider street level addresses as valid delivery address (no house number is required)

`address-disable-bounds`

false [boolean] Disable address lookup restriction to bounds around restaurant locations

`cfp`

false [boolean] If enabled this will make the cart render the custom fields read only and make the cart flow configure the custom fields having each set on its own page.

`cart-comments`

true [boolean] Enable Special Instructions on Cart

`cart-comments-maxlength`

250 [number] limit cart comments to maxlength chars

Orders Features

`show-payment-details`

false [boolean] Display receipt & payment details in Order Confirmation and Dashboard

`feedback`

true [boolean] Display Restaurant review form and item rating buttons in Order Confirmation

Portal

`no-future-orders`

false [boolean] Prevents ordering from restaurants that are currently closed

`include_paused_restaurants`

false [boolean] Paused restaurants will also be included with the portal results

`portal-restore-last-location`

true [boolean] Saves & restore last opened restaurant when the portal page is reloaded

`portal-services`

Service ids to be supported by portal, separated by commas

"PICKUP, DELIVERY, CURBSIDE, DINEIN"

`portal-cuisines`

Multiple selector for available cuisines

`time-types`

Time types available in portal

`portal-navbar`

Configure navbar appearance in portal page

standard default
none

`branding`

Displays how the restaurant name is showing in site

single default - The portal is featuring same restaurant with multiple locations
multi The portal features multiple restaurants

`portal-breadcrumb`

Controls how the breadcrumb is displayed

simple default - Shows the restaurant name and back button
details Show extra information about the restaurant in breadcrumb

`cutoff`

[number] Min time to order ahead in hours

`portal-slices`

Slices are separated by | and their syntax is SliceName followed by size on desktop and mobile in square brackets ([6,12]) and then followed by eventually configuration in round brackets. The size param represents the number of columns to span on a flexible grid of 12 columns. If the size is defined as an underscode _, that slice will not render for the specified breakpoint.

Service[12,12]
Search[6,12](address,cuisine,name)  // Span 6 columns on desktop, 12 on mobile
Cuisines[4,_]                       // Span 4 columns on desktop, does not render on mobile

Slices followed by exclamation sign ! are required. Listing results are not displayed untill all required slices are filled in. Eg

Service![12,12]
Search![6,12](location)

Here's how the following slices configuration renders on both breakpoints: Service[4,12]|Address[8,10]|Cuisines[6,_]|Go[6,2]|Restaurants[12,12]

               Desktop
+-----------+-------------------------+
|  Service  |         Address         |
|   [4,12]  |          [8,10]         |
+-----------+-----+-------------------+
|     Cuisines    |         Go        |
|      [6,_]      |       [6,2]       |
+-----------------+-------------------+
|             Restaurants             |
|               [12,12]               |
+--+--+--+--+--+--+--+--+--+--+---+---+

                Mobile
+--+--+--+--+--+--+--+--+--+--+---+---+
|               Service               |
|                [4,12]               |
+-----------------------------+-------+
|           Address           |   Go  |
|            [8,10]           | [6,2] |
+-----------------------------+-------+
|             Restaurants             |
|               [12,12]               |
+--+--+--+--+--+--+--+--+--+--+---+---+

Available slices:

Spacer - this does not render anything but an empty space
Search - this is omni complete from various sources. Sources can be as follows:
- Address - will search for an address for pickup or delivery. This will also use user saved addreses on search
- Cuisines - will search for a cuisine from default configured per locale
- Name - will search for restaurants matching on name
- Location - will search for address. This will also include user saved addresses. The diference to Address is that it will not filter addresses for pickup or location.
  
  If there is just one source specified the source search criteria will be used as a placeholder for value when the component reloads
Address - this will only allow entering an address.
Service - this will allow selecting between services Pickup or Delivery
Cuisines - inline cuisine selector
CuisinesDropdown - dropdown cuisine selector
DietaryPreferences - renders the Dietary Preferences filter as a dropdown
Time - this will allow filtering on time
Go - shows the portal search button. If Go slice is configured, the portal won't show any results until this button is pressed. Accepts label as config: Go[0,0](Search Restaurants)
Restaurants - this will display the results. Configuration options:
- Compact - this should be used for small one brand portals where we use the address for title
- Large - this is portal view where restaurant with logo and everything else is visible.
Map - this will display the results on a map
- MapStyled (default) - use theme colors
- MapUnstyled - use default Google colors
MapRestaurants - display results map and restaurants as 2 columns
- Accepts Restaurants and Map slices config (see above) separated by comma
- Eg: MapRestaurants[12,12](Compact,MapUnstyled)
Queries - this is helpful in conjunction with Search with multiple sources as it will display all search conditions and also allow for query removal

Customizing the Theme

colors-background
colors-lowContrast
colors-midContrast
colors-highContrast
colors-brand
fonts-body
fonts-heading
fonts-deco

Colors can be defined hex or rgb formats.

Custom Icons

data-icon-A="B" replaces all icons of name A with B. Icon name can be any from https://material.io/tools/icons

EG. data-icon-shopping_cart='local_mall'

Custom SVG Paths

data-icon-A="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" replaces all icons of name A with a custom SVG Path. Custom Icons can be added as SVG Path via data-attributes in integration config for web, and via App Config in Native integrations. The following example will replace the cart icon with a circle:

WEB:

data-icon-local_mall: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"

Native:

"icon-local_mall": "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"

The SVG path should render corrently within a 24/24 points viewport:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>

External Render Containers

Allows rendering of different components in external DOM elements. The following ID's are available:

zuppler-navigation-left
- zuppler-navigation-back
- zuppler-navigation-cart
- zuppler-navigation-discounts
- zuppler-navigation-search
zuppler-navigation-right
- zuppler-navigation-user
- zuppler-navigation-dashboard

Custom notification delays

Overrides application defined timeouts for notifications. Accepted types: info, warning, error

EG. data-notification-delays="error:0|info:10000"

Custom Translations

Define a function and return custom translations.

<script>
    function _zupplerCustomTranslations(locale) {
        return {
            "item.actions.create": "Add to bag",
            "item.instructions.placeholder": "Who is this for?",
        }
    }
</script>

Features configuration

General

external-user-management

kiosk-mode

show-item-quantity

navbar-buttons

flow-time

loyalty-type

Menu

menu

menu-frame

prices

image-quality

menu-discounts

quick-add-mode

Item

itemview

item

item-comments

item-optional-modifiers-mode

item-comments-maxlength

item-options-selectionmode

Cart

skip-initial-flow

enable-save-cart

address-street-valid

address-disable-bounds

cfp

cart-comments

cart-comments-maxlength