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 customers can add required products to their cart to make an order.

See how it works

Steps to follow

1. Create the forms with the following details:

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
		Email	Email	Email
Order	Order	Name	Name	Name
		Address	Address	Address
		Phone	Phone	Phone_Number
		SubForm	Items (Existing Form)	Items
		Currency	Total	Total

2. Set the initial value of email field in Items form to ${zoho.loginuserid}.

3. Rename the Items Report to My Cart, and set the following Layout to it under Quick View > Layout.

4. Navigate to QuickView > Actions, and rename the Delete action to Remove form Cart, and remove the additional actions like Edit, and Duplicate.

5. Set a filter in Report Properties of My Cart report as shown below. This is to ensure that customers see only their products in the report.

6. Create a page named Product Listing.

7. Add a button named Raise Order and set the following parameters under Action tab.

The URL should redirect to the Orders form. It will be in the following format:

https://creatorapp.zoho.com/<app-owner-name>/<app-linkname>/#Form:Order

8. Add an HTML snippet and paste the below HTML code.

<%{
%>
/* 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>
<%
}%>

9. Embed the My Cart report on the page and position it in parallel to the HTML snippet as displayed below.

10. Create a workflow to populate quantity with value "1" and price of the product when the Items form loads.

11. Click Add New Action and add the following snippet in the deluge editor:

// 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;

12. Now set a condition so that the above script executes only when Product value is not null.

13. Let's add another workflow to calculate the Total when the Quantity is updated.

14. Click Add New Action and add the following snippet.

input.Total = input.Quantity * input.Price;

15. Now create a workflow to redirect users to the Product Listing page after an item has been added to the cart.

16. Click Add New Action > Deluge Script and add the following script to the editor:

openUrl("https://creatorapp.zoho.com/<owner-name>/<app-linkname>/#Product_Listing","same window");
reload;

17. Now let's add a workflow in the Orders form to add subform rows with the selected items.

18. Click Add New Action and add the following snippet:

// 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;

19. Let's add a workflow to update the price if the selected product is changed in the Orders form.

20. Click Add New Action and add the following snippet:

row.Price=row.Products.Price;

21. Let's add a workflow to update the price if the selected quantity is changed in the Orders form, and to calculate the total cost of the selected items.

22. Click Add New Action and add the following snippet:

if(row.Quantity != 0 && row.Quantity != null)
{
row.Cost=row.Quantity * row.Price;
}
input.Total = input.Items.sum(Cost);

23. Lastly, let's add a workflow to remove the records from Items form after the order has been placed.

24. Click Add New Action > Deluge Script and add the following script to the editor:

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.

Custom card layout for e-commerce app

Custom card layout for e-commerce app

Requirement

Use Case

Steps to follow

See how it works

Points to Note

Related Links