Dashboard

Products with Cart, Checkout and Payment process using Customer Portal

Features:
  • Search Products Page using HTML Snippets
  • Add to Cart Button
  • Update stock on single click
  • Checkout Page with multiple products selected.
  • Stripe Payment Gateway Integration
  • Customer Portal for Wholesale Users
  • Auto Calculate Stock once order created.
  • Different stock and price show to different type of users (wholesale, Resale)
  • Email Invoice Template send to user once order created.
Module and Forms:
  • Customers
  • Items
  • Invoices
  • Sales Orders
  • My Cart
  • Checkout

Dashboard Page:

  • Search section is created using HTML Snippets. Two search button (Tyre Size, Brand Name) is present to search the products. On click of ‘Find Tyre’ redirect to the same page with search data show in below report.

Dashboard

  • On Products/Item Page click on the ‘Add to Cart’ button to buy the selected product. Multiple products will be added into the cart.

Add to cart

  • If Customer is Wholesaler then (Wholesale Qty, Wholesale Price) fields will show. And if Customer is Retail then (Retail Qty, Retail Price, Discount) will show.
  • For Wholesale Customer maximum stock show is 8. And for Retail Customers original stock will show.
  • On select of QTY, auto calculating Sub Total Price, Total Price, Discount.
  • Checkout button redirect to the Checkout Page for Payments details.
  • Payment options are
  1. Pay on Pick Up
  2. Pay on Delivery
  3. Pay with Credit Card online [Stripe Gateway Integration]
  • Once order is confirmed Invoice Email is send to the user.

HTML SNIPPETS:

<%{ 
   CUST = Customers[Email == zoho.loginuserid]; 
   dateyesterday = zoho.currentdate.subDay(1); 
   newDate = zoho.currentdate.subweek(1); 
   tyredetail = Items[ID != 0]; 
%> 
<p style='text-align:center; font-size:18px;'><%=CUST.Company_Name%></p> 
<form method="get" action="https://creatorapp.zoho.com/info_tyrespot/
inventory-management-solution/page-perma/Tyres" 
style="float: left;width: 100%;text-align: center;"> 

<div class="div1" name="div1" style="float:left; width:100%;"> 
<span style="width: 40%;padding-right: 10px; float:left; padding-top: 6px;"> 
Search for Tyre Size <br>[For Example, 2055516 / 19515]</span> 
<input type="text" id="Tyre_Size" name="Tyre_Size" 
style="float:left; height: 32px;font-size: 18px;position: relative;
text-align: center;margin-top: 10px;width: 40%;"> 
</div> 

<div class="div2" name="div2" style="float:left; margin-top: 20px; width:100%;"> 
<span style="width: 40%;padding-right: 10px; float:left; padding-top: 16px;"> 
Brand Name [For Example Centara]</span> 
<input type="text" id="Brand_Name" name="Brand_Name" 
style="float:left; height: 32px;font-size: 18px;position: relative;
text-align: center;margin-top: 10px;width: 40%;"> 
</div> 

<input type="submit" value="Find Tyres" style="padding: 8px; margin-top: 40px;
margin-bottom: 40px;width: 40%;background: #FF4C2F;color: #FFF;font-size: 18px;"> 
<a href="#" style="padding: 8px;margin-top: 40px;margin-bottom: 40px;
margin-left: 20px;width: 40%;background: green;color: #FFF;font-size: 18px;
border: 4px solid silver;">My Cart</a> 
</form> 
<%

}%>

“ADD to Cart” Button Workflow:

void defaultFunction(Items ID)
{
   mymap = Map();
   dt = zoho.currentdate.getPrefix(" ").tostring("dd-MMM-yyyy");
   mymap.put("Date_field",dt);
   optionalmap = Map();
   sub_forms = List();
   for each  new in ID
   {
	subform = Map();
	subform.put("Item_Name",new.ID);
	subform.put("Type",new.Type);
	subform.put("Tyre_Size",new.Tyre_Size);
	subform.put("SKU",new.SKU);
	subform.put("Brand_Name",new.Brand_Name);
	subform.put("Actual_Stock",new.Actual_Stock);
	subform.put("Available_Stock1",new.Available_Stock1);
	subform.put("Available_Stock2",new.Available_Stock2);
	subform.put("Wholesale_Price",new.Wholesale_Price);
	subform.put("Retail_Price",new.Retail_Price);
	sub_forms.add(subform);
    }
	mymap.put("Products_Details",sub_forms);
	sub = zoho.creator.createRecord("info","inven","My_Cart",mymap,optionalmap,"zohocreator");
	nn = sub.get("data").get("ID");
	openUrl("https://creatorapp.zoho.com/info/inven/My_Cart/record-edit/My_Cart_Report/"
        + nn,"same window width=100%");
}

Auto Calculate Total Amount Workflow:

if(row.Qty > row.Available_Stock2)
{
alert "please enter QTY less then " + row.Available_Stock2;
input.Total_Amount = "";
row.Total_Price="";
}
else
{
Items = Items[ID == row.Item_Name];
cust = Customers[ID == input.Customer_Name];
value = cust.Customer_Type;
if(row.Qty != null)
{
if(value == "Wholesale")
{
input.Discount = 0;
row.Discount=0;
row.Wholesale_Price=Items.Wholesale_Price;
row.Total_Price=row.Wholesale_Price * row.Qty - row.Discount;
input.SubTotal = row.Qty * row.Wholesale_Price;
}
else
{
input.Discount = Items.Discount * row.Qty;
row.Discount=Items.Discount * row.Qty;
row.Retail_Price=Items.Retail_Price;
row.Total_Price=row.Retail_Price * row.Qty - row.Discount;
input.SubTotal = row.Qty * row.Retail_Price;
}
}
input.Total_Amount = input.SubTotal - input.Discount;
}

Leave a Comment