Food Delivery Marketplace for Magento 2
Table of Content
Live Demo
Online Magento 2 Food Delivery Marketplace app allows restaurant owners to initiate their own online food delivery system through web and mobile apps and assist their nearest customers in the least time possible.
Meanwhile, the customers can place an order using the restaurant’s website or mobile application, just by stepping through a simple process of Online Food Delivery.
The owners will have fully native Android and iOS applications for their customers, sellers, and delivery boys.
Further, this Online Food Delivery module provides a combination of services for managing the online food delivery business.
The services include Webkul Magento 2 Multi Vendor Module, Delivery Boy App, and Vendor Hyperlocal Mobile App.
Consequently, the role of the marketplace system is to manage the sellers and various seller responsibilities like adding the restaurant details or any new product.
The concept to sell food online will provide the customers with express delivery as it uses the hyperlocal system.
Moreover, the customer and admin can track the delivery boy thereby making the order management system much more secure and fast.
**Please Note:
- You must have the Google API Key to make use of this extension. You can generate it by following the process mentioned in this user guide.
- The clients can get the application by following the process in the knowledgebase.
- The seller can only Add/ Edit the Simple and Virtual product type in Food Delivery Marketplace Mobile App.
Watch the below video tutorial to understand the extension workflow:
Features of Online Food Delivery App for Adobe Commerce
- Extensive Hyperlocal Marketplace platform.
- Google Maps APIs are integrated for location-based filtering while ordering or delivering the product.
- The admin can set the time required(30m, 1 hr, 2 hrs) for the restaurants to deliver the product.
- The vendor can customize the restaurant landing page details like headings & banners from the seller profile.
- A restaurant owner can publish their mobile application on Google Play and App Store.
- The customer will select the express delivery shipping method for getting their product delivered.
- The admin can add or manage the delivery boys – orders, ratings, dashboard
- Both customers and sellers can manage the orders and personal profiles from the mobile app.
- The customer can view the Marketplace page to see all the available restaurants.
- Sellers can add or edit the product and attributes using the app.
- Customers remain engaged with quick order placement and easy checkout using the app.
- The store owner and delivery boy both can receive notifications about Orders.
- The admin can track the status of the delivery boy and assign them an order.
- Customers can chat with Magento 2 store admin/seller of the delivery boy.
- The sellers can chat with the store admin for asking queries or have any discussions.
- Delivery boys can set their status as Online/Offline through the app if no pending orders are remaining on their end.
- Delivery boys can either Confirm or Cancel the new order assigned to them.
- OTP authentication is available for the right customer verification
- The customer can even track the delivery boy’s activities, from the app or the web.
Note: The customers can download the mobile applications for the Vendor Hyperlocal Application and the Delivery Boy Hyperlocal application for Android and iOS devices from the Play Store and App Store respectively.
Installation
First, the customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.
After that, transfer this app folder into the Magento 2 (Adobe Commerce) root directory on the server as shown below.
After the successful installation, you have to run these commands in Magento 2 root directory.
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
After running the commands, you have to flush the cache from the Magento admin panel by navigating through System > Cache management as shown below.
Multi-Lingual Configuration
For Multilingual support, please navigate to Store > Configuration > General > Locale Options. And select your desired language from the Locale option.
Language Translation
If you need to do the Online Food Delivery module translation, please navigate to the following path in your system app/code/Webkul/MpHyperLocal/i18n.
Open the file named en_US.CSV for editing as shown in the below screenshot.
Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.
After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV.
After that, upload the translated file to the same folder from where you have obtained it. Now your Online Food Delivery module translation is complete.
How To Get Google Map API Keys?
For generating the Google Map API Keys the admin will first go to the Google Cloud Platform Console. After that, the admin will click on the Navigation Menu button and then navigate to APIs and Services > Credentials.
Under the Credentials Page, the admin will click on the Create Project button as shown in the image below:
Thereafter, a form will appear with the entry fields to create the new project. The admin will enter the Project Name to the respective field and click on the CREATE button.
In the credentials page for that project, the admin will navigate to +Create Credentials > API Key as shown in the image below:
Further, a popup will appear with the success message “API key created”. The admin can copy these API keys and use them for Online Food Delivery module configurations.
Online Food Delivery Configurations
After the successful installation of the Online Food Delivery module, the admin will first manage the backend configurations. This module is a combination of products, the admin will have to manage multiple configurations separately.
Vendor Restaurant Management
For managing the Vendor Restaurant settings the admin will navigate to Stores > Configurations > Vendor Restaurant in the admin panel. Thereafter the admin will provide the following visible details:
General Settings
- Google Map API Key: The admin will enter the Google map API keys here for using the google map feature.
- Restaurant Delivery Times: The admin will enter the possible delivery times which will be selected by the seller under the seller profile.
Landing Page Settings
- Restaurant Landing Page Title: The text of the title that will be visible on the Banner of the landing page.
- Banner Image: The admin can add the banner image that will be visible on the landing page.
- Restaurant List Heading: The admin will add the text for the heading, under that the restaurant list will appear.
- Restaurant List Subheading: The admin will add the text for the sub-heading, and under that the restaurant list will appear.
Application Download From Website
- Enable Android Application Download: The admin will Enable this field to allow the customer for downloading the Android application.
- Your Application’s Play Store Link: If the above field is enabled then the admin needs to provide the play store link for the application.
- Enable Android Application Download: The admin will Enable this field to allow the customer for downloading the iOS application.
- Your Application’s App Store Link: If the above field is enabled then the admin needs to provide the app store link for the application.
Delivery Boy Management
Further, for managing the Delivery Boy Application settings the admin will navigate to the Stores > Configurations > DeliveryBoy. After that, the admin needs to manage the following entry fields:
- Warehouse Address: The admin’s address detail will be fixed from where the delivery boy picks up the order.
- Latitude and Longitude: The admin will enter the geographical dimension of the address from where a pickup can be done.
- Google Map API Key: The admin will enter the Google map API keys here so that the delivery boy can use the google map feature.
- Delivery Range in km: The possible delivery range for the shipping method.
- Admin Email Address: In this, the mail id of the customer is defined as who will be the admin of the delivery boy App.
- Allowed Shipping Method: The shipping method which will apply to the delivery boy.
Express Delivery Shipping Settings
Once all the configurations are completed, the admin will manage the Delivery settings by navigating to Stores > Configurations > Sales > Shipping Methods > Express Few hours Delivery.
After that, the admin can manage food delivery by providing the following details:
- Enabled: If the admin selects this field to Yes then the Delivery method will be visible in frontend.
- Title: The title of the delivery method that will be visible in frontend.
- Method Name: The admin can define the method of shipping.
- Type: The admin will select the shipping type among None, Per Order, and Per Item.
- Price: The amount chargeable on the selection of the shipping method.
- Calculate Handling Fee: The admin will select the way of calculating the Handling fee among Fixed or Percent.
- Handling Fee: The admin will enter the amount of the handling fee.
- Display Error Message: The admin will add the error message that will be visible to the customer when they use this shipping method from non-applicable regions.
- Ship To Applicable Countries: The admin will select either to ship in All Allowed Countries or some Specific Countries.
- Ship to Specific Countries: The admin will select the specific countries if selected Specific Countries for the above field.
- Show Method if Not Applicable: The admin will select either to display the shipping methods for applicable or non-applicable countries.
- Sort Order: The sequence order in which the shipping method will be visible.
Landing Page
The landing page has a different appearance for the web end and mobile applications. The customer can also make online food delivery from the website as well as mobile application users.
Web End Landing Page
After completing all the backend configurations, the food delivery website will be visible as shown in the image below:
Mobile App Landing Page
Eventually, the customer can order food from the mobile application after installing them from AppStore or play store. The app will launch and display the landing page as shown in the image below:
The bottom of the landing page is shown in the image below:
Meanwhile, the landing page will include the following sections:
Page Header: This header will display the website theme icon on the left upper corner. Another three icons of Download Mobile Application, User Account, and Cart are available in the right upper corner.
Header Image of Landing Page: The header image will be visible with the banner image and text added by the admin from backend. Over this header image, the customer can see two entry fields.
Among them, the first one is for selecting the location and the other one is for searching the restaurant or cuisine by typing its name.
Cuisine Category: After that, the list will appear with the cuisine types available in the restaurant.
Admin Creates Cuisine Type
For creating the cuisine the admin will navigate to Marketplace Management > Manage Restaurant Cuisine > Manage Cuisine Type. Further click on Add Cuisine Type button as shown in the image below:
Further, a form will appear where the admin will enter the name of the cuisine under the field Cuisine Title. Finally, click on the Save button.
The success message will appear as shown in the image below:
Why Us: This section will include the reasons which will fascinate the customer for ordering food from that particular restaurant.
Restaurant List: Under this section, the list of restaurants will be visible as per the selected location of the customer.
Seller End Workflow
To become a seller, the user will have to first login/ signup to the store. The process for the same is mentioned below:
Login/ Signup
For adding the restaurant to the online food delivery marketplace, the user must have a seller profile. Further, the seller will click on the Profile icon in the top right corner of the website.
For registering the account, the user has to first enter the First Name, Last Name, and Email as shown in the image below:
After that, the user will add the Password and confirms by re-typing in the next field. Finally, by clicking on the Create An Account button the customer will complete the registration process.
Become Seller
After registration, the user will move to the dashboard and click on the Become Seller tab. After that, the seller will add the shop URL and click on the checkbox as shown in the image below:
When the details are correctly added, the seller will now move to the Marketplace dashboard:
Restaurant Details
After creating the account, the vendors can now add their restaurant details, which will be done by filling up the following form:
Manage Restaurant Details Using Web End
The seller profile information can be edited under the Seller profile from the left menu bar.
Facebook ID: The seller can add their Facebook id link.
Instagram ID: The seller can add an Instagram id link.
Google Plus ID: Here, the seller can add a Google Plus Id link.
Youtube ID: The seller can add a Youtube id link.
Vimeo ID: The seller can add the Vimeo id link.
Pinterest ID: Here, the seller can Pinterest id link.
Contact Number: The seller can add their contact number.
Tax/VAT Number: The seller can add their Tax/Vat number.
The vendor has to provide the following details:
Shop Title: The vendor will enter the shop title which will be visible in the storefront.
Company Details
- Banner: The vendor will add the banner image here, that will be visible on the website’s frontend.
- Logo: The vendor will add a unique company logo that will be visible in the website’s frontend.
- Locality: The vendor will add the locality of the restaurant.
- Description: The vendor will add the description of the restaurant that will be visible under the About Us section in frontend.
Country: The restaurant owner will add the country of Restaurant.
Meta Keywords: The vendor will add the meta keywords for the restaurant SEO management.
Meta Description: The vendor will add the meta description for the restaurant SEO management.
Delivery Within(in Kms): The vendor will add the range within which the shipping will be provided.
Delivery Time: The vendor will select the definite hours in which the food will get delivered.
Restaurant Timings and Days:
- Opening Time: The vendor will add the opening time of the restaurant that will be visible to the customer.
- Closing Time: The vendor will add the closing time of the restaurant that will be visible to the customer.
- Opening Days: The vendor will add the opening days of the restaurant that will be visible to the customer.
Restaurant Images: The vendor will add the related images of the restaurant which will be visible on the frontend.
Manage Restaurant details Using Mobile Application
The seller does not need to carry the laptops for managing their restaurant details. They can also register themselves using the mobile application by following the steps below:
The restaurant owner will view the left navigation bar, and click on the sign in button. Thereafter, a signup button will appear and the owner will click on that button.
After that, a signup form will appear and the owner will click on the checkbox to become a seller. Also, they will provide the shop URL as shown in the image below:
After filling up the form the admin will approve the seller, and then the functionalities of the seller will be visible to the user under the Left Navigation Menu.
Thereafter, the vendor will add the shop title, contact details, shop location, images and logo of the shop.
Further, the vendor will enter the Social media profile links that are visible on the homepage. The vendor will also add the Restaurant Info by mentioning the details like range, time, opening time, closing time, and opening days of the restaurant.
Lastly, the vendor can click on the Save Profile button for making changes visible on the frontend.
Add New Food Product
The sellers have the leverage to add the new food product to the menu. This can be done using the website or the mobile application, both the processes are mentioned below:
Web End
The sellers will add products from the web end by navigating to the New Products under the seller panel. After that, the seller will provide the following details:
The vendor will add the details:
Product Category: The vendor needs to choose the category of the product.
Product Name: The vendor will add the desired name of the product which will be visible on the frontend.
Description: In this field, the vendor will add a description of the food that will be visible in the frontend.
Short Description: In this field, the vendor will add a short description of the food that will be visible in the frontend.
SKU: This field will ask the vendor for the unique SKU of the food product.
Price: The vendor will add the valuable price of the food product.
Add Special Price ($): Set a special price.
Special Price From: Here, the admin can set the starting date for the special price.
Special Price To: The admin can set the ending date for the special price.
Stock: The vendor will add the available stock for that particular food product.
Stock Availability: The vendor will select among In Stock and Out Of Stock that will be visible in the frontend.
Visibility: The vendor will select the visibility of the food product
Tax Class: The vendor will select the tax class for which the customer needs to pay the tax. The vendor will choose None if no tax class is applied.
Weight: The vendor will add the weight of the food product.
Add Meta Title: Here, add a meta title.
Meta Keywords: The vendor will add meta keywords.
Add Meta Description: Add a meta description here.
Allowed Product Qty on Product Purchase For Customer: Here, the vendor can set product quantity purchases for customers.
Product Images: The vendor will add the product images.
Food Type: The vendor can select a food type from the dropdown.
Cuisine Type: Here, the vendor can select cuisine type.
Further, the product will get appended to the existing list of products. The vendor will navigate to that list by navigating to My Products List under the seller panel as shown in the image below:
The attributes in the product table will display some details of the products. Meanwhile, the vendor can edit the product by clicking on the icon under the Action attribute for the respective product.
Add New Food Product Using Mobile App
The vendor can also add the product from the mobile application as done on the web end. After clicking on the Add New Product under the seller account, the form will appear with the entry fields for a new product as shown in the image below:
The vendor will add some other basic details as mentioned above in the web end process of adding the product. After that, the product will be visible in the seller product list as shown in the image below:
Customer End Workflow
Let’s have a vision of the restaurant website from the customer’s perception. First, the customers have to add their current location using the GPS location detection where the food will get delivered.
Between, the location can also be added via typing, in case the user needs to send food to some other location. After that, the list of restaurants will appear that will be according to the location and the customer will select the desired restaurant.
Thereafter, the restaurant page will be as shown in the image below:
The restaurant page will display the following tabs:
Menu:
The customer can select the desired cuisine from the available list of cuisines. Every food product has a button to add the food to the cart and another button to increment or decrement the food quantity.
Meanwhile, the customer can set the quantity and add it to the cart, which will be visible in the cart on the right side of the restaurant page, as shown in the image above.
Note: The restaurant will not accept orders if its status is offline.
Reviews: The customer reviews will be listed under this tab as shown in the image below:
The customer can also add a review by clicking on the Write A Review button in upper right corner. After that, a form will appear with some details as shown in the image below:
Photos:
The related images will be visible as set by the vendor from the seller’s end.
About: Under this tab, the description of the restaurant will appear as added by the seller.
Location: The location of the restaurant will be visible to the customer under this tab, as shown in the image below:
Returns: This will display the conditions for the returns.
Terms: Under this tab, the customer can view the terms and conditions of the restaurant.
Mobile Application Restaurant Page View
After clicking on the specific restaurant, the customer will move to the restaurant page. There, the customer will find multiple tabs. The first one is the Menu Tab, which will display the list of food as per the cuisines.
The customer can add the food of desired quantity to the cart and then proceed for placing the order.
The second tab contains the description of the restaurant. This description is added by the seller from the seller panel.
Thereafter, the review tab will appear, this tab will show the Store Rating and Seller Reviews. The customer can also add a new review for the store.
Under the More tab, the customer can see the shipping and return policies. The customer can also contact the restaurant owner for any issue via this tab only.
Order Food Online
The customer can make the food delivery either using the web or the mobile application. Order can be placed for one restaurant at a time. The process for both order placements is mentioned below:
Place Order From Web End
After adding product(s) to the cart, the customer will click on the Proceed To Checkout button. Moreover, if the customer is registered then the address will already be present thereunder the shipping address.
Whereas, the new users need to add their shipping address. Guest Users
The guest customers need to add their shipping details as shown in the image below:
Registered Customers
The registered customers can simply select the address under the Shipping Address section:
Just after completing the shipping details, now the customer will select the payment method and click on the checkbox which says that “the shipping and billing addresses are the same”. After that, tap on Place order.
Finally, the customer will receive a success message including the order ID. By clicking on that order ID the user can get the order details too.
After the order is placed successfully, now the customer can view the order and reorder the products for any specific order.
Once the customer clicks on the View order button, the order details will appear with the delivery boy and order information.
When the customer clicks on the Reorder button, the Restaurant page will appear with the reordered product already added to the cart. Further, the customer will proceed to checkout to make the orders.
Place Order From Mobile Application
First, the customer will add products to the cart under the menu tab. A popup will appear that will notify the customer about the product in the shopping cart. After that, the customer will click on the cart icon(upper-right corner of the mobile screen).
After clicking on the Proceed button, the customer will add the shipping address and shipping method. The customer can also see the price of purchased products on this page as shown in the mockups below:
After that, the customer will ensure the billing address, and payment method and click on the Place Order button.
Finally, on the next page, the success message will appear with the order ID.
The customer can also Reorder and Review the product by navigating to the Left Navigation Menu > Orders.
Further, the customer will click on the Reorder button for the specific order. Thereafter, a popup will appear and the customer will click on the Go To Cart button. The customer will then navigate to the checkout page with the same products in the cart as shown in the image below:
Assign Order To Delivery Boy
Web End
Once an order is placed by the customer either from the web end or mobile app, the next task is for the admin. The admin will assign a delivery boy to the desired delivery boy by navigating to Sales > Orders.
After that, the admin will select the specific order and then click on the Assign Delivery Boy under the left panel.
Using The Mobile Application
The admin can also choose the delivery boy from the Delivery Boy Application. The admin will view the left navigation bar for the application and click on the Orders Tab. Just after clicking, The list of orders will appear.
The orders section will include three Tabs All, Assigned, and Unassigned as shown in the image below:
The admin will click on the desired order and view it. After that, the admin will click on the Choose Delivery Boy and the list of online delivery boys will appear on the next screen.
Note: Only the delivery boys with Online status will be visible in the list.
Further, the admin will select any of them and the order will get assigned to the delivery boy.
After the successful assignment the selected delivery boy will be visible in the order details, as shown in the image below:
Admin Adds Delivery Boy
The Order list will be visible to the admin when clicking on the Order section, and the list of Delivery Boy will appear when the admin clicks on the Delivery Boy Button in the left navigation panel.
Further, the admin will click on the +(plus) button to add the new delivery boy. The admin needs to add the following details a shown in the image below:
The admin can Enable/ Disable the delivery boy. The enabled delivery boys will be visible to provide the service.
After clicking on the submit button, the delivery boy will get added to the existing list. The admin can also track the delivery boy’s location from the profile itself as shown in the image below:
Delivery Boy Functionalities
After the order is assigned to the specific delivery boy, now the order will proceed from the delivery boy’s end. The delivery boy will open the Mobikul Hyperlocal Food Deliver Boy application.
Further, after logging in to the app, the delivery bot will be open the left navigation drawer as shown in the image below:
The delivery boy will get to see the Popup on the screen which says “You have received order #orderid“. The delivery boy can Accept or Reject the order.
After accepting the order the customer can also view the order details. The OTP will be visible to the customer under the order details just after the order is assigned to the delivery boy, as shown in the image below:
Here, the delivery boy can view the order under the Orders section after accepting the order.
After clicking on that order, the delivery boy can see the order details. The status of the order will be visible as “Pending“. The delivery boy can add comments about the order updates as shown in the image below:
The order details include the Item list, customer details, contact number, email, order details and order comments.
Three red buttons are available at the end of the screen:
Pickup Location:
The delivery boy can check the pickup location which is the location of the restaurant.
Picked Up:
The delivery boy will click on the button after which the application will ask the restaurant for the pickup confirmation.
After confirming the pickup, the delivery boy will proceed for delivering the product to the customer and the status will change to Processing.
Once the destination is reached, the delivery boy will click on the Deliver button and ask the customer for the OTP.
Once the customer verification is done, the status of the order will change to Complete for the delivery boy and the customer end too.
Reject Order:
The delivery boy can reject the order by providing a valid reason with more than five words. After the rejection the customer will be able to see the details as shown in the image below:
If the admin rejects any order then the admin can assign another delivery boy for that order.
Delivery Boy Status
The delivery boy can also their own status by navigating to Left Navigation Menu > Settings. The status can be set to Offline only if the delivery boy does not have any pending orders left.
Note: Further, to get the details about the functionalities of the marketplace application please refer to the Marketplace User Guide for Magento 2 and for the functionalities of the Delivery Boy application please refer to the Delivery Boy App For Magento 2.
That’s all for the Food Delivery Marketplace for Magento 2 module. Still have any doubts or suggestions, feel free to add a ticket at https://webkul.uvdesk.com/
You may also browse other Magento 2 marketplace addons. Also our top-quality Magento 2 extensions.