Laravel eCommerce Mobile App:
Mobikul as a mobile app developer has dedicated its time and effort to create an app for various famous Open Source platforms. However, this time after acquiring years of regress experience. Webkul together with Mobikul has created an app for their in-house platform that is Bagisto.
As a matter of fact with the advancement in technology just having a website for a business will restrain growth. Henceforth, the requirement of the hour is a mobile app. The Bagisto platform is built on the Larvel framework and uses PHP which is helping many business owners. However, the Mobile app build is on Bagisto uses Kotlin for Android application.
This app will allow the customer to checkout in a convenient form due to its easy accessibility. Thus, this native app is having a collection of the feature that makes it an advance app for the customers.
Feature List – Laravel eCommerce Mobile App
- Easy management of the orders with the help of the app.
- Well configured with the back-end.
- The app can work on both tablets and smartphones.
- Informative and interacting shopping app with a fast and intuitive response.
- An open-source app that can customize (paid service) as per business requirements.
- 24×7 support on Facebook (Paid), Whatsapp (Paid), and Mail.
- A search suggestion is implemented to allow customers to get the required product more easily.
- Wishlist to save products for future purchases. (Coming Soon)
- Multi-Lingual functionality (RTL) support for localization of the app.
- Easy Social sharing for more marketing of the products.
- Location detection using GPS or Google Map (only work if you’ll provide a Google API key) for the customer to save the address easily in the address book.
- Product comparison to allow customers to purchase the product easily.
- The store owner can enable multiple currencies in the app to attract customers all across the Globe.
- Downloadable Products support for customers.
- Notification history creation for the customer (Coming Soon).
- Real-time synchronization between the app and the website.
- Interactive UI/UX with Modern Material Design standards.
- Easy addition of offers and Coupons to engage maximum customers.
- Quick product search again via machine learning. (Coming Soon)
- The app allows easy browsing even with no -internet connection for the Pre-loaded page to support Offline mode. (Coming Soon)
- Allow the app user to cut short login processes by implementing a faster and easier Social Login Facility. (available on customization)
- Local Notification to the customer that avoids the abandoned cart.
Mobikul Basic Configuration
The admin can manage the Bagisto Mobile App from the back-end in just a few simple sets of steps. The app configuration is done by the app owner as per the business requirement.
The admin can amend the app as per the business requirement from Mobikul Configuration. For that, the admin needs to navigate through Configure > Mobikul > Mobikul Basic Configuration as per the below image:
Username – The admin needs to provide the username for the Mobikul. This is used for connecting to the respective server. The username is required to mention in the code end as well.
Password – Here you will provide the password for the Mobikul. This will use with the above username for connecting to the server. The password requires to mention in the code end as well.
Collection Page Size- As the label name of the field is self-explainable. Here you need to set the number of products that you want to display on the collection page of your Mobikul application at a time.
Enable random featured product in home page? – If the field is set to “Yes” then, the featured image displayed on your Mobikul application will be taken on a random basis.
Allowed CMS Pages – Form here the admin can select the CMS pages which they want to show in the mobile app.
FCM Push Notification Parameter
If an admin needs to set up the push notification feature for Mobikul mobile application then you must require this section’s fields to be set up.
API key: Admin needs to provide the Server API key which you will get after the firebase console registration.
Android Topic: It is used for sending the notification on the group basis on android devices.
The topic name which you will provide in this field will be the name of the group. This will include all the mobile devices which have installed your application.
iOS Topic: It is used for sending the notification on the group basis on iOS devices.
Meanwhile, the topic name which you will provide in this field will be the name of the group. This will include all the mobile devices which have installed your application.
The android and iOS topics will add to the application code by the mobikul developers and then saved in your admin panel.
So kindly do not change this part after the application is configured as this might hamper the working of the notifications.
Moreover, the Mobikul Mobile App builder supports displaying and configuring featured categories. The featured categories can be easily configured from the admin panel.
For that, the admin needs to navigate through Mobikul > Featured Categories.
Also, for adding a new Featured Categories, the admin can click on Add Features Category button.
Thus, the featured category can configure with information such as-
- Image: Upload the featured category image from this field.
- Sort Order: This is the sort order of the featured category among other featured categories.
- Store View: The featured category can be shown store view wise. “All Store Views” can select for displaying the featured category in all the store views.
- Featured Category Status: Set the featured category as enable or disable according to the requirement.
- Categories: The admin here chooses the category which will redirect when the featured category image will be clicked.
Moreover, the admin can edit or delete the created Featured Categories.
The admin can configure the banner of the mobile app from the banner section of the admin panel.
For that, the admin needs to navigate through Mobikul > Banner Image.
Also, for adding a new banner image the admin needs to click on the Add Image button.
Title – The admin can enter the title of the banner.
Banner Image – The admin can upload the banner image from this field which will be a part of the homepage.
- Sort Order – This section determines the sequence of banner or at which number the banner will be found on the app homepage.
- Banner Type – The admin can specify the type of banner in this section by specifying it as a category or product.
- Product/Category Id – The admin can state the id of the product or category as chosen in the above option.
- Store View – The admin can select the store view where the banner will be visible.
- Banner Status – The admin can enable the status of the banner to make it visible on the homepage.
Further, the admin can edit or delete the created banner images.
The Push Notification of the Mobikul Mobile App can be easily managed from back-end.
For that, the admin needs to navigate through Mobikul > Notifications.
Also, for adding the new notification the admin can click on the Add Notification button.
Notification Title – The admin can enter the title of the notification.
Content – The admin can describe the notification under content.
Image – Add an image for the notification.
Notification Type – Here the admin can select the notification type from the drop-down as Product Type, Category Type, Other Type, Custom Collection.
Notification Status – For here, the admin can enable or disable the notification.
Further, the admin can edit or delete the existing notification as per the business requirement.
The applications homepage is divided into multiple carousels which can be managed from the back-end.
For that, the admin needs to navigate towards Mobikul > Carousel.
Also, the admin can add a new carousel by clicking on Add Carousel button.
Wherein, the admin can enter the information in the carousel from here to be displayed on the homepage.
- Title- Enter the title or name of the carousel here.
- Type- In this field the admin can enter the type of carousel as image or product type.
- Background Image- The background of the carousel can be set in this section in the form of the image.
- Background Color code- The admin can set a solid color for the image by mentioning the color code in this section for the background.
- Sort Order- The admin can enter the order of the carousel in this section.
- Store View- The admin can set different carousels for different views.
- Carousel Image Status- The admin can make the status of the carousel as enable or disable.
Moreover, the admin can edit or delete the created carousels. Also, can check the product associated with a particular carousels.
The admin can add/edit carousel images of the mobile app.
For that, admin needs to navigate towards Mobikul > Carousel Image as per below image:
Also, the admin add a new Carousel image, by clicking on Add Image button.
New Carousel Image:
- Carousel image- The admin can upload an image in this section.
- Title- Set the title of the Carousel.
- Carousel Image Type- The admin can decide the Carousel Image Type in this section. Wherein the admin can define if the image is linked to a category or product.
- Product/Category Id- The admin can state the id of the product or category as chosen in the above option.
- Carousel Image status- The admin can enable or disable the status of Carousel Image.
Moreover, the admin can also edit or delete the existing carousel image.
The admin can define the custom collection for the mobile application.
For that, the admin needs to navigate through Mobikul > Custom Collection.
Also, the admin can add different collection as per their requirement. For that they need to click on Add Collection button.
Collection Name – Enter the collection name here.
Status – Define the status of the collection as enable or disable.
Choose Product Collection – For here, the admin can choose
Further, the admin can also delete the created custom collection as per requirement.
Mobikul Orders History
From the back-end, the admin can check all the mobikul orders.
Also, the admin can view the order details from action.
Additionally, can also generate invoice and shipment for the order. Moreover, the admin can cancel the order if required.
This is an introductory screen that customer encounters as soon as they open the Application. Moreover, this screen is added to the app from the code end.
The business owner will provide us this image as per the requirement via prerequisite PDF.
The homepage of the app is having multiple sections to divide it into usable sections.
Here the application users will see the banner set by the admin.
Here the Laravel eCommerce Mobile application users will see the features categories set by the app owner.
The Laravel eCommerce Mobile application’s homepage is divided into multiple carousels that can manage from the back-end.
Recently Viewed Products
Here the app users will check the products that are recently viewed by them.
The bell icon on the homepage redirects the customer to the Notification section. Apart from the pop-up, the customer can click on the icon to view the notification history.
Additionally, the Homepage of this app is having an additional icon. However, this feature will save customers from scrolling effort.
The search will work exactly in same way as it works on the website.
Thus, this feature can save a lot of time of customer as it optimizes the search process in the best way.
Search Via Image- Machine Learning
This feature will allow the customer to look for the image via image scanning. The app uses Google Firebase’s ML kit- a ready to use API. The app will save the search time in two ways-
- Text Detection– Here the app user can search the product by allowing the scanning of the text in on an object. Currently, the text detection works for the English language only.
- Product(Object) Detection– In this case, the app user can search the product via the real-time object. That is the app user can scan the product in reality which will open up the list of linked products.
Herein, the left navigation drawer will give the app user following facilities-
- Sign in/ Signup option
- About Us
- Customer Service
- Compare Products
- Orders and Returns
- Contact us
- App Version.
Moreover, the app encourages the customers to get registered using application. It gives them the a simple form to fill-in the details. Thus, allowing an easy sign-in when ever accessed.
However, the this section has three options associated-
- Sign in with the Email address
- Create An Account
Sign Up- Create An Account
The Laravel eCommerce Mobile App user can simply register the application by filling the registration form. Thus, the app user can fill in the basic details to become a customer.
Sign in Via mail id
If the customer accomplishes the registration process then they can log in via the mail id and password that was mentioned at the time of registration.
Additionally, there is a facility of ‘Forgot Password‘ in this section if the user forgets their authentication details.
The page will display the details related to the products which the app user can scan through. Thus, the page has the following details-
- Add your Review– Post-purchase the app user can review the product by entering the rating, summary of the review, and complete review-comment of the product.
- Add to Wishlist- The app user can click on the ‘Wishlist button‘ to add the product to the wishlist.
- Share Product option- The app user can even share the product on social media by clicking on the share button.
- Edit quantity- The app user can append the quantity to purchase of the product from here.
- Add to Cart- The app user can click on the Add To Cart button to add the product to the cart for checkout.
- Buy Now- The customer can click on Buy Now Button in order to directly move to the checkout.
- Description/details of the product- The product’s complete details are also mentioned on this page for the app user to refer to before purchase.
The account section will save the customer’s personal data, in multiple sub-sections. This section as mentioned above will only display to the logged-in users.
The dashboard will show the recent activities of the customer in 3 sections viz. My Address, My Order, and My Review.
- Recent Orders- This section encompasses the information about the customer’s recent orders with details like, Order ID, Name of the product, Total Amount, Status of The Order, and a ‘Details’ button through which other details of orders are displayed.
Thus, the app user can click on any corresponding order and get the details of the of complete order.
- Address- This contains the information about the Default Billing Address, Default Shipping Address, and Manage Other Addresses.
The app user can click on any address to edit the details on the address.
Here the app user can click on Manage Other Addresses to change the details of other address.
- Review- In this section, the Review which is submitted by the customer on various products are visible here.
Thus, the app user can click on View All Product Reviews to view the list of complete reviews given by the customer.
The app gives its user an easy way to view the orders from this section also. Thus, allowing a quick way to access orders.
The customer for this section examine the details of the order and perform the action on the orders like-
- Know details of the order
- Reorder the products in the order
- Review the products in the order.
It will list up all the reviews made by the customer on different products of the store with the reviews and ratings for the product.
It is just like a directory wherein we save all the addresses. Here, we will save the-
- Default addresses of Billing and Shipping.
- List of other addresses.
Thus, from this section, the customer can ‘Add New Address’, edit the present address or delete the addresses.
The customer can click on the button of ‘Add New Address’ to open a form asking the details of the address.
Here, the customer has got the location detection facility also wherein the customer can fill the details with the help of GRPS.
This section is meant for the app user to save personal information related to the account. For, this section the app user can update-
- Their first and last name,
- Registered mail address for the login purpose, and
- Password linked with the registered account.
It provides an option for Multiple Store views, that is the feature allows the user to customize the Store View in various languages right from English to Arabic, French, German and many other.
Note- The app also supports the RTL layout for the customer following the languages like Arabic, Hebrew, Persian/Farsi, and many other languages of the same font style.
The customer can select the desired currency as per the requirement.
The customer can see the change in currency wherever the price of the product is displayed.
The Laravel eCommerce Mobile App user can manage the notification from the app. This can be done for various steps in the app-
Thus, the app user can disable or enable –
- all the notification of the app.
- Orders based notifications.
- Offer based notifications.
- The app User can even monitor the notifications for an abandoned cart.
The Laravel eCommerce Mobile App user can even manage the data appearing in Offline mode. Thus, the app user can enable or disable the following field to do so-
- Track and Show Recently Viewed Products
- Track and Show Search History
Thus, the above details can be even cleared from history.
You can also find a link as “CMS Pages” here. Where you can see all the CMS Pages that was created by the admin.
The products can add to the compare product section from the product page wherein the customer can compare multiple products on the store.
Thus, allowing them to finalize a product from multiple options.
The customer can communicate with the store owner or admin by sharing a message from this section.
Thus helping the customer to build a strong relationship with the store owner.
Support – Laravel eCommerce Mobile App
Thus, that’s all for the Laravel eCommerce Mobile App still, have any issues feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com.
Current Product Version - 1.02
Supported Framework Version - 1.1.2