Use widgets to create an online mobile store

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. 
  1. $ node -v
  2. $ 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.
  1. 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.
  1. $ zet -v
5. Now create a project using the following command
  1. $ 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. 
  1. $ 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: 
  1. By default, the widget.html file will be present in the App folder.
  2. You can also access the widget.html file by following the below steps:
    1.  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.
    2. 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.
  1. $ zet validate
13. Next, run the following command:
  1. $ 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

  1. When entering commands, there is no need to enter the dollar sign ($) explicitly, it would already be present by default.
  2. Ensure the image fields are visible in the quickview of the List report.
  3. node and npm are predefined package managers that are used to run zet - zoho extension toolkit
  4. If the widget.html file does not open in Sublime or Visual Studio, move it to another accessible folder.
  5. Index file should be in the format /<widgetfilename>.html.
  6. You can use permissions to hide the Add Mobile component from customers.
  1. Widgets
  2. Pages

    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 CRM Training
      Redefine the way you work
      with Zoho Workplace

        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 CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION





                        Still can't find what you're looking for?

                        Write to us: support@zohoforms.com

                                                                       
                            



                            





                                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.




                                    Manage your brands on social media

                                      Zoho Desk Resources

                                      • Desk Community Learning Series


                                      • Digest


                                      • Functions


                                      • Meetups


                                      • Kbase


                                      • Resources


                                      • Glossary


                                      • Desk Marketplace


                                      • MVP Corner


                                      • Word of the Day


                                        Zoho Marketing Automation

                                          Zoho Sheet Resources

                                           

                                              Zoho Forms Resources


                                                Secure your business
                                                communication with Zoho Mail


                                                Mail on the move with
                                                Zoho Mail mobile application

                                                  Stay on top of your schedule
                                                  at all times


                                                  Carry your calendar with you
                                                  Anytime, anywhere




                                                        Zoho Sign Resources

                                                          Sign, Paperless!

                                                          Sign and send business documents on the go!

                                                          Get Started Now





                                                                  Zoho TeamInbox Resources



                                                                          Zoho DataPrep Resources



                                                                            Zoho DataPrep Demo

                                                                            Get a personalized demo or POC

                                                                            REGISTER NOW


                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now







                                                                                            You are currently viewing the help articles of Sprints 1.0. If you are a user of 2.0, please refer here.

                                                                                            You are currently viewing the help articles of Sprints 2.0. If you are a user of 1.0, please refer here.



                                                                                                  • 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 ...
                                                                                                  • 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 ...
                                                                                                  • JS API documentation

                                                                                                    This help page is for users in Creator 6. If you are in the older version (Creator 5), click here . Know your Creator version . Download the latest JS SDK library from the CDN URL given below and link it using the script tag. CDN URL - ...
                                                                                                    Wherever you are is as good as
                                                                                                    your workplace

                                                                                                      Resources

                                                                                                      Videos

                                                                                                      Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                      eBooks

                                                                                                      Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                      Webinars

                                                                                                      Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                      CRM Tips

                                                                                                      Make the most of Zoho CRM with these useful tips.



                                                                                                        Zoho Show Resources