Use widgets to create an online mobile store
Requirement
Display a card layout with each card containing mobile details like an image, company, model, and features. Any third party languages can also be used, provided the required dependencies like packages, CDN URLs etc. are included. Users can click on a card to purchase the selected phone.
Use Case
A mobile store wishes to enable online purchase of its products. The Widgets feature is used to create a card layout with the required customization to display its products.
Steps to follow
1. Download and install Node.js source code from this link https://nodejs.org/en/download/
2. Run the following commands to confirm that the installation is successful. The commands return the version of the package.
Note: When entering commands, there is no need to enter the dollar sign ($) explicitly, it would already be present by default. Commands can be run in Terminal for Mac OS and in Command Prompt for Windows.
- $ node -v
- $ npm -v
3. Run the following command to install the zapps cli node package.
Note:
You will be prompted to enter the system password. When typing in the password, the characters won't be visible.
- sudo npm install -g zoho-extension-toolkit
4. Run the following command to confirm that the installation was successful. It returns the version of the package.
- $ zet -v
5. Now create a project using the following command
- $ zet init
Note: Use the following command in the event of permission issues:
sudo zet init
6. Select Zoho Creator.
7. Specify a project name and hit Enter.
Note:
The project is basically a folder which is used to store files that are required to render the widget. The project name can contain only alphanumeric and underscore characters.
8. Type cd <project/folder_name> and hit Enter to navigate to the project directory.
9. Run the following command.
- $ zet run
Note: This will run the HTTP server in your local machine in port number 5000. The port should not be occupied with any other process before starting the server. A relevant note may appear as a result of the above command.
10. To verify if the server has started successfully, navigate to widget.html file and open it in a browser. The widget.html file will be present in the folder (project) created earlier.
Note:
- By default, the widget.html file will be present in the App folder.
- You can also access the widget.html file by following the below steps:
- Open the local host URL (https://127.0.0.1:5000) in a new tab and authorize the connection by clicking Advanced->Proceed to 127.0.0.1.
- Append /app/widget.html to the local host URL i.e., https://127.0.0.1:5000/app/widget.html
You should see the following screen:
11. Enter your code in the widget.html file. Any third party app, for example Sublime, VS Code, Eclipse, etc., can be used to add or modify code in the html file. The widget.html file contains the structure, design, and components of the Widget. To use the Zoho Creator APIs in the widget, you can use the API helpers provided in the JS SDK Library.
You can use the attachment provided at the end of this tutorial to build the application. Copy the contents from the attached widget.html file and paste it into the widget.html file created on your machine. Copy and paste the CSS and JS files into the app folder of your project (parent folder). Each file has a specific use. For example, the css file contains code related to the design of the cards, and the JS file contains the code to define the elements in the card.
Note: In the JS file (Widgets -> App -> Assets -> JS), search for creatorapp.zoho.com/<app_owner>/, and replace the placeholders with the actual app owner name and the application link name. Similarly, ensure that the report names are mentioned correctly.
The xls report and images will be later used to import data into the app (Step 14).
12. Ensure you are still in the project directory and run the following command in the terminal.
Note: The previous command will result in exiting the project directory. You have to navigate back to the project directory and run the following command.
- $ zet validate
13. Next, run the following command:
- $ zet pack
A zip file of the application will be created in the dist folder of your project directory.
14. Create two forms with the following details:
Form | Form Link Name | Field Type | Field Name | Field Link Name |
Add Mobile | Add_Mobile | Single Line | Mobile Name | Mobile_Name |
Single Line | Manufacturer | Manufacturer | ||
Drop Down | Storage (with options 16 gb and 32 gb) | Storage | ||
Drop Down | OS (with options iOS, Android, Windows) | OS | ||
Number | Camera | Camera | ||
Multi Line | Description | Description | ||
Currency | Price | Price | ||
Image | Small Image | Small_Image | ||
Image | Large Image | Large_Image | ||
Order | Order | Single Line | Selected Model | Selected_Model |
Name | Name | Name | ||
|
| Address | Address | Address |
|
| Phone | Phone | Phone_Number |
The Add Mobile form is used by the company to add products that are up for sale. Data is fetched from this form and displayed in the widget. The code for the same is written in the attached JS file. The Orders form is for customers to purchase the required product.
Import data from the attached xls file. Images can be inserted separately for each record after importing.
15. Create a page named Mobile Store.
16. Add a widget in the page by clicking Widgets > Create Widget.
17. Enter Widget details, and click Create.
Note: The zip file can be found in the dist folder of your project directory. This is mentioned earlier in step 13.
18. Now, drag and drop the widget on the Page builder.
See how it works
Points to note
- When entering commands, there is no need to enter the dollar sign ($) explicitly, it would already be present by default.
- Ensure the image fields are visible in the quickview of the List report.
- node and npm are predefined package managers that are used to run zet - zoho extension toolkit
- If the widget.html file does not open in Sublime or Visual Studio, move it to another accessible folder.
- Index file should be in the format /<widgetfilename>.html.
- You can use permissions to hide the Add Mobile component from customers.
Related Links
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Understand widgets
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Widgets are used to extend the capabilities of your Zoho Creator application so that you could perform tasks that could not ...Understand Pages
1. What Does This Page Cover? Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator. 2. ...Custom card layout for e-commerce app
Requirement Display products in a card layout with a button to add required products to a cart. Use Case An e-commerce business uses an order management app to process orders. Products need to be displayed in a card layout with product images, and ...Use Widgets to Track Live Location
Requirement Share the live location of a device and display it on a map that can be accessed from anywhere for tracking purposes. Use Case When an ambulance is on the run, it needs to reach the nearest hospital on time. To avoid any traffic, the ...Generate Barcode using third-party API
Requirement Generate a barcode based on the provided IMEI (International Mobile Equipment Identity) number using a third-party API. Use Case A mobile store uses an order management application to manage their orders. The application has a form ...
New to Zoho LandingPage?
Zoho LandingPage Resources