InstaFood QR Menu food delivery,
pickup and dine-in

Version 1.0.0


Introduction

  • Item Name : InstaFood QR Menu food delivery, pickup and dine-in
  • Item Version : v 1.0.0
  • Support : SakuraPlugins

You are entitled to get free lifetime updates to this product from the author directly.

This documentation is to help you regarding install, set up & customization of the plugin. Please go through the documentation carefully to understand how this plugin works.

Requirements

In order to work properly the plugin needs the following:

  1. WordPress 5.5+. InstaFood it's built on top of WordPress as a plugin.

Plugin Install & setup #back to top

In order to use the plugin:

  1. Unzip the main file (the file that you have downloaded when you have purchased the plugin). The plugin installer is 'plugin_name'.zip.
  2. Log in to your Wordpress Admin Panel, go to Plugins > Add new > Upload. Upload the zip file that was discussed in the above topic.
  3. Once you have uploaded the plugin, it automatically installs to your WordPress instance. Click the Activate button to activate it.

Settings#back to top

Once you have installed the plugin head to settings (Admin > InstaFood settings). Here you can set up the: General settings, Credentials, Web apps, Order options, Locales, tables & QR codes and Custom Css and JS


Credentials & APIs#back to top

Google Maps & Geocoding

The API Key will be used to get the restaurant geo-coordinates within the Admin General settings and for delivery, this way the max delivery distance can be determined when a user places an order (delivery).
This API Key is optional, if left empty the max delivery radius won't be required.

Both Geocoding API and Maps JavaScript API must be enabled within the Google cloud console.
In order to create the API key:
1. Go to Google Cloud Platform and create a project https://console.cloud.google.com/projectcreate.
2. Make sure you select the project from the top navigation, then click APIs and Services.

2.1 Click API Library, then Search for "Maps Javascript API", click on it, then click Enable.
2.2 Search for "Geocoding API", click on it, then click Enable.
3. Click Credentials, then click Create credentials > API key
4. Click Credentials, then click Create credentials > API key
5. Copy the API Key then paste it in the WP Admin > InstaFood settings > Credentials > Google API Key
6. Click Credentials, then click Create credentials > API key
Note! There is no need to restrict the API Key, it's only beeing used in the backend

Stripe Keys

The Stripe API will be used to process payments.
A webhook enables Stripe to push real-time notifications to the application, as an example, an order is marked as paid based on events received from Stripe. Find out more within the documentation.

In order to create the API key:
1. Log in to your Stripe account and from the top-right menu click Developers
2. From the left menu click API Keys, from Standard Keys click > Create Secret Key
3. Copy the publishable key and secret key to their respective places within WP > InstaFood credentials > Stripe
Note! From the Stripe admin, top right corner, you can always choose to switch to developer mode, this way you can test it without having to use a real card. When you switch to developer mode, a new set of keys is being generated.

Stripe webhook

A webhook enables Stripe to push real-time notifications to the application, as an example, an order is marked as paid based on events received from Stripe.
In order to Implement a Stripe Webhook:
1. Log in to your Stripe account and from the top-right menu click Developers
2. From the left menu click Webhooks, then click add an endpoint
3. From the WordPress > Admin > InstaFood Settings > Credentials, copy the Stripe webhook endpoint URL and paste it to Stripe Endpoint URL
4. Click, Select Events then add all the events from Charge and all the events from Payment Intent
5. From Webhooks, click on the newly created webhook, then click Reveal Sign-in secret
6. Copy the sign-in secret and paste it within the WordPress > InstaFood Settings > Credentials > Stripe webhook endpoint secret

Google reCaptcha

reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website. Meanwhile, legitimate users will be able to login, make purchases, view pages, or create accounts and fake users will be blocked. ReCaptcha credentials are optional.
This API Key and secret are optional, if left empty the app will work without protection though

In order to create reCaptcha credentials:
1. Sign in to Google reCapthca https://www.google.com/recaptcha/admin
2. From the top left corner click the + icon (create)
3. Add a label, select reCAPTCHA v3, add the domain name where you installed InstaFood, then click save
4. Copy the site key and the site secret and paste it within WP > InstaFood settings > Credentials > Google reCaptcha.

Web apps section#back to top

Mobile web app

Select the page that will render the mobile web app within the front end.
Note! Changing the webpage will cause the regeneration of all QR codes.

Bill page

Select the page that will generate the PDF bills for orders.

Shortcodes [instafood_embedded]

Even if InstaFood is mainly purposed for mobile devices, there is the possibility to embed the mobile app within regular WordPress pages. In order to do that you can use the [instafood_embedded] shortcode.
The way it works: If the user visiting the website uses a mobile device will be prompted to open the mobile web app on another page, if the user comes from a desktop device the mobile web app will be embedded within the visited page.
Usage example
[instafood_embedded mobile_web_app_info="We've detected that you're visiting from a mobile device." button_label="Open mobile web app"]

Order options#back to top

From the Order options, you can enable Pick-up, Delivery or Dine-in, also the payment methods and other options as min order value, Max delivery, Delivery cost and Tipping percentage.

For Pick-up the following options are available:

Pickup start date (days no)

Pickup start date in days. Leave empty if orders can be placed right away. If the field value is 2, the user can choose the pickup day two days from the current date. For example, this feature is useful if a shop would sell birthday cakes that need a longer preparation time.

Pickup end date (days no)

Pickup availability in days. The value represents the maximum number of days a user can choose to pick up the order. Leave empty if orders can only be picked up only within the same day.

OrderSafeMatch

OrderSafeMatch technology uses a unique combination of colour and pickup number to easily verify orders and to ensure accuracy and simplicity. OrderSafeMatch also speeds up the curbside and in-store order pickup process.

Locales#back to top

Instafood supports two languages, the primary and the secondary language.

Set up locales used across frontend. Note! Some locales contain variables (ex: <%= orderPrepareTime %>) You can change / swap the order of those variables within the locale string according to your language. Note !!! Variables should not be re-named.

Tables & QR codes#back to top

Instafood supports two types of QR codes:

General QR code

the general QR code is being used for delivery and pickup only. It does not hold the table information. As an example, the general QR code can be placed on flyers sent with a previous order.

Tables QR codes

In order to offer a better user experience, each table has its own QR code, this way the table is being identified automatically when the QR code it's being scanned.As for the restaurant staff to easily identify which QR code to assign to which table, all QR codes images will contain the table number.

Products, groups & choices#back to top

Products

1. Products can be added from Admin > InstaFood Products.
2. Each product must be assigned to at least one category. A single product can be assigned to multiple categories.
3. Categories that are not empty are being displayed within the mobile web app.
4. In addition to variants, each product supports Groups with choices.

Introducing Groups & choices

Choices and Groups allow unparalleled customization options for products.
1. Choices are similar with products, the only properties available for choices are the price and the name. A choice's price can also be set to 0.
2. An example of a choice could be a salad, or a cake, or an extra 100g of meat.
3. A single choice can be part of multiple Choice groups.
4. Choice groups can be assigned to products.
5. Each Choice group can be optional for the user to choose from or could have a minimum number of choices required or/and have a maximum allowed choices that the user can choose from.

Live orders & orders#back to top

InstaFood's orders admin implements a reactive user interface allowing the restaurant's staff to act with ease.
The live orders section retrieves new orders every couple of seconds, new orders are also accompanied by a discrete sound. Once an order is marked as accepted it will automatically be moved to the Orders section from where the staff can easily change its statuses (Accepted, Rejected, Prepared, Delivered and Closed).
Full details about orders are also quickly accessible.

Order payment statuses:

1. Pending transaction.
2. Payment intend succeeded.
3. Pending on delivery.
4. Failed.
5. Cancelled.
6. Paid.
Stripe orders have an initial payment status of Pending transaction. As soon as payment confirmation is received from Stripe the order payment status is set to Paid. All other orders have an initial payment status of "Pending on delivery". All orders that are set as "Delivered" will also be set as "Paid".
For orders that were intended to be paid for with Stripe but the user cancelled the process the payment status will be set to "Cancelled" and can be deleted by the restaurant staff.

Users & roles#back to top

InstaFood implements two additional user roles: Restaurant administrator and Restaurant staff.

Restaurant administrator:

The restaurant administrator user has access to all features related to InstaFood like: Customize the options, language, adding products, groups and choices, create/delete/update other Restaurant administrators or Restaurant staff users. The administrator does not have access to other parts of WordPress.

The Restaurant staff:

The Restaurant staff user has access to Live orders & orders & waiter call requests.

Product/categories re-order#back to top

Should you choose to change the order of the products and categories displayed within the mobile web app, we recommend the following plugins:

Development#back to top

Should you choose to extend the current functionality, for the mobile web app or the admin Live Orders you should know:
To transpile the JS and Scss we've used Prepos (Prepros compiles your files, transpiles your JavaScript, reloads your browsers and makes it really easy to develop)
1. The mobile web app is located at "instafood/frontend/mobile-app". Open Prepos > Add project > select mobile-app/assets. That's it, now any change will be compiled automatically.
2. The Admin Live orders is located at "instafood/com/sakuraplugins/appetit/templates/admin/orders_management/" . Open Prepos > Add project > select orders_management/orders_assets. That's it, now any change will be compiled automatically.

Version History (Changelog) #back to top

Changelog

                                        -----------------------------------------------------------------------------------------
                                        Version 1.0.0 - Nov 22th, 2021
                                        -----------------------------------------------------------------------------------------

                                        - first release