Custom card layout for e-commerce app
Requirement
Use Case
Steps to follow
Form | Form Link Name | Field Type | Field Name | Field Link Name |
Products | Products | Single Line | Product | Product |
Image | Image | Image | ||
Currency | Price | Price | ||
Items | Items
| Lookup | Product | Product |
Number | Quantity | Quantity | ||
Currency | Price | Price | ||
Currency | Total | Total | ||
Order | Order | Name | Name | Name |
Address | Address | Address | ||
Phone | Phone | Phone_Number | ||
SubForm | Items | Items | ||
Currency | Total | Total |
- <%{
- %>
- /* class to define font length*/
- <style>
- .product-link {
- text-decoration: none;
- font-size: 1rem;
- }
- /* class to define Card Layout */
- .product-cards {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-rows: auto;
- gap: 0.5rem;
- }
- /* will get back */
- .no_record_wrapper {
- display: none;
- }
- /* to remove text No Records Added */
- .row.reportfullwidth.custom-report.zc-card-report
- {
- background-color: white;
- }
- /* class to define details in individual Card */
- .product-card {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
- transition: 0.3s;
- width: 70%;
- height: fit-content;
- text-align: center;
- padding: 1rem;
- float: left;
- margin: 25px;
- }
- /* class to add space between product name and Add to Cart text */
- .product-card .product-container-card {
- padding: 1rem;
- }
- /* class to define Image dimensions*/
- .product-header-image {
- display: block;
- margin: auto;
- max-width: 150px;
- height: 60%;
- }
- </style>
- /* class to fetch images from report */
- <div class="product-cards">
- <%
- for each product in Products[ID != null]
- {
- var = product.Image.getprefix("\" lowqual").getsuffix("<img src = \"").replaceAll("/sharedBy/appLinkName/viewLinkName/fieldName",zoho.appuri + "All_Products/Image");
- %>
- /* class to display product image in each card fetched in above snippet*/
- <div class="product-card">
- <img src=<%=var%> class="product-header-image" alt=<%=product.Product%>/>
- <div class="product-container-card">
- <h4><b><%=product.Product%></b></h4>
- /* action to open form on click of Add to Cart*/
- <p><a class="product-link" href="#Form:Items?zc_LoadIn=dialog&Product=<%=product.ID%>">Add To Cart</a></p>
- </div>
- </div>
- <%
- }
- %>
- </div>
- <%
- }%>
- // fetch details of the selected Product
- productDetails = Products[ID == input.Product];
- // Assign the product details to the form fields
- input.Price = productDetails.Price;
- input.Quantity = 1;
- input.Total = productDetails.Price;
- // hide email field as it is used only to track the current user's products
- hide Email;
- // disable Price and Total fields from manual updation
- disable Price;
- disable Total;
- input.Total = input.Quantity * input.Price;
- openUrl("https://creatorapp.zoho.com/<owner-name>/<app-linkname>/#Product_Listing","same window");
- reload;
- // hide the email field
- hide Items.Email;
- // insert subform rows with selected Items
- rows = Collection();
- // declare initial value to calculate the sum later
- sum = 0.0;
- // iterate though records of current user in Items form to fetch values and insert in subform
- for each rec in Items[Email == zoho.loginuserid]
- {
- row1 = Order.Items();
- row1.Product=rec.Product;
- row1.Price=rec.Price;
- row1.Quantity=rec.Quantity;
- row1.Total=rec.Total;
- rows.insert(row1);
- sum = sum + rec.Total;
- }
- input.Items.insert(rows);
- input.Total = sum;
- row.Price=row.Products.Price;
- if(row.Quantity != 0 && row.Quantity != null)
- {
- row.Cost=row.Quantity * row.Price;
- }
- input.Total = input.Items.sum(Cost);
- delete from Items[ID != 0];
- openUrl("https://creatorapp.zoho.com/<app-owner>/<app-linkname>/#Product_Listing","parent window");
See how it works
Points to Note
- Custom card layout could also be implemented with ZML snippet in a similar way.
- The Items form can be hidden from customers to restrict it from appearing as a standalone component.
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:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
|
Quick Links |
Workflow Automation |
Data Collection |
|
|
||
|
Form Templates |
||
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Zoho Sheet Resources
Zoho Forms Resources
Zoho Sign Resources
Sign, Paperless!
Zoho TeamInbox Resources
Zoho DataPrep Resources
Design. Discuss. Deliver.
Related Articles
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 ...Manage custom layout
1. What Does This Page Cover? Learn how to name, rename, edit, and perform other customizations on the custom layouts you have designed for the detailed view of your records using the Canvas layout builder. Before moving ahead, you can learn more ...Customize tablet layout
Customize your page layout, for a tablet view. You can set a compact layout or retain the original page layout while accessing the page from your tablet. The following are the steps to customize the page layout for tablet: Go to the Design view of ...Create Custom Layout
1. What Does This Page Cover? Learn to design a custom layout corresponding to your business requirements for the detailed view of your records using the Canvas layout builder. Before moving ahead, you can learn more about canvas layout builder and ...Customized search component for report data, using pages
Requirement Provide a search component for users to search for the required data. Data is fetched from reports based on the search keyword. Use Case A library or a book management system wants to allow for searching. Any customer who ...