Food Delivery Marketplace for Magento 2

Food Delivery Marketplace for Magento 2: This module allows the restaurant owners to initiate their own online food selling 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 a simple process. The owners will have a fully native Android and iOS applications for their customers, sellers, and delivery boys.

Further, this module provides a combination of services for managing the online food delivery business. The services include a marketplace system, Delivery Boy application, 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 secure and fast.

• Extensive Hyperlocal Marketplace platform.
• Google Maps APIs are  integrated for location-based filtering while ordeing or delivering the product.
• The admin can set 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 & banner from seller profile.
• The restaurant owner can publish their mobile application on Google Play and App Store.
•  This includes the express delivery shipping method to the customers for fast delivery.
• The admin can add or manage the delivery boys – orders, ratings, dashboard
• The customer can view the Marketplace page to see all the available restaurants.
• Both customers and sellers can manage the orders and personal profiles from the mobile app.
• Sellers can add or edit the product and attributes using the app.
• The seller can ask questions or chat with the customer using the app.
• Customers remain engaged with quick order placement and easy checkout using the app.
• Admin and delivery boy both can receive notifications with regard to Order.
• The admin can track the status of the delivery boy an assign them an order.
• Admin can chat with customers to answer their queries and receive feedback
• The admin can even chat with the delivery boy to ask them questions and answer their queries.
• Delivery boys can set their status as Online/Offline through the app if no pending orders are remaining in 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 activities, from the app or the web.

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

Vendor Restaurant Management 

For managing the Vendor Restautrant 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 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 heading, under that the restaurant list will appear.
• Restaurant List Subheading: The admin will add the text for sub-heading, 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 enable 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 enable 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 admins 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 kms: The possible delivery range for the shipping method.
• Admin Email Address: In this, the mail id of the customer is defined who will be the admin of delivery boy App.
• Allowed Shipping Method: The shipping method which will be applicable in 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:

After completing all the backend configurations, the food delivery website will be visible  as 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 on 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. 

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 restaurant will be visible as per the selected location of the customer.

Thereafter, if the user is visiting the website for the first time then they need to register. After clicking on the User icon on the top-right corner, the user can see the form popup which includes two sections for login and signup. 

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. 

Whereas, the registered customers can Login directly, by providing the Email and Password as shown in the image below:

After creating the account, the vendors can now add their restaurant details, which will be done by filling up the following form:

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 in 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 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 withing 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 restaurant that will be visible to the customer.
• Closing Time: The vendor will add the closing time of restaurant that will be visible to the customer.
• Opening Days: The vendor will add the opening days of restaurant that will be visible to the customer.

Restaurant Images: The vendor will add the related images of the restaurant which will be visible in the frontend.

The sellers will add products from web end by navigating to the New Products under the seller panel. After that, 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 desired name of the product which will be visible in the frontend.

Description: In this field, the vendor will add description about the food that will be visible in the frontend.

Short Description: In this field, the vendor will add short description about 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.

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 food product 

Tax Class: The vendor will slect 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 weight of the food product.

Further, the product will get append to the existing list of product. 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 unfder the Action attribute for the respective product.

Lets have a vision of the restaurant website from the customer perception. First, the customers has 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 restaurant 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 cart and another button to increment or decrement the food quantity.

Meanwhile, the customer can set the quantity and ad it to the cart, which will be visble in cart on the right side of the restaurant page, as shown in the image above.

Reviews: The customer reviews will be listed under this tab as show in the image below:

The customer can also add review by clicking on the Write A Review buttton on 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 seller end.

About: Under this tab, the description of restaurant will appear as added by seller.

Location: The location of the restaurant will be visible tp 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.

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 needs to add their shipping address. After the shipping address, the customer will select the Express 5 hour delivery shipping method and click on the Next button.

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 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.

The Online Food delivery mobile applications for the marketplace, is also provided to the customers. Now the customers can order food online without any hassle of carrying the laptops with them or searching the web links. 

Eventually, they can directly order food from the mobile application after installing them from appstore or play store. The app will luanch as shown in the image below:

 

The home page of the applications will be same as the landing page of the website. Which will contain the list of cuisines, then the why us section, after that the list of restaurants. The complete screen is shown in the mockups below:

 

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, that 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 seller panel.

 

Thereafter, the review  tab will appear, this tab will show the Store Rating and Seller Reviews. The customer can also add the new review.

 

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.

The vendor can also add the product from the mobile application as done in the web end. After clicking on the Add New Product under the seller account, the form will appear with the entry fields for new product as shown in the image below:

Add Product Details:

Attribute Set: The vendor will select the relevant attribute set for the product.

Product Type: The vendor will select the product type among theavailable Magento 2 product types.

Food Type: The vendor will select the food type among the Veg and Non-Veg.

Cuisine Type: The vendor will also select the cuisine type as shown in the below image.

 

Thereafter, the vendor will add the shop title, contact details, shop location, the images and logo of the shop.

 

Further, the vendor will enter the Social media profile links that are visible in the homepage. The vendor will also add the Restaurant Info by mentioning the details like range, time, opening time, closing time, opening days of the restaurant.

Lastly, the vendor can click on the Save Profile button for making changes visible in the frontend.

 

Marketplace Section of the Vendor Application:

The customer can also view the list of all the restaurants by clicking on the Marketplace section on the left navigation drawer. The customer can also view the desired restaurant by clicking on it.

 

Note: Further, for getting the details about the functionalities of the marketplace application please refer to the Marketplace User Guide for Magento 2.

The customer can also access the same application using their credentials. The process of placing order will be similar to the wen end. 

First, the customer will add products to the cart under the menu tab. The popup will appear that will notify the customer about 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 in this page as shown in the mockups below:

 

After that, the customer will ensure the billing address, payment method and click on the Place Order button.

 

Finally, in the next page the success message will appear with the order ID. 

Once 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 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.

Admin End Functionalities

The admin can also perform the roles from the mobile application. Just after the admin login to the application, under the left navigation drawer the sections wil be visible.

The Order list will be visible to the amdin when clicks on the Order section, and list of Delivery Boy will appear when the admin clicks on the Delivery Boy Button.

 

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:

 

After clicking on the save button, the delivery boy will get added to the existing list. The admin can also track the delivery boy location from the profile itself.

The Orders section will include three Tabs as All, Assigned, and Unassigned as shown in the image below:

 

After the order is assigned to the specific delivery boy, now the order will be 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 comment about the order updates as shown in the image below:

The order details includes the Item list, customer details, contact number, email, order details and order comments.

 

Three red buttons are availble in the end of the screen:

Pickup Location: 

The delivery boy can check the pickup location that is the location of the restaurant.

Picked Up: 

The delivery boy will click on the this button after which the application will ask the restaurant for the pickup confirmation. 

After conforming 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:

 

Note: Further, for getting the details about 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 doubt or suggestion, feel free to add a ticket at https://webkul.uvdesk.com/