How can I implement the add to cart functionality in traditional web app
Application Type
Traditional Web
Service Studio Version
11.11.4 (Build 43812)

Hello Dear Community,

I want to add the add-to-cart functionality in my shopping web app. 

In the cart, I want to display the product details and total price with quantity.

I'm also sharing the .oml file for more details.

feel free to ask if any details require.


ShopingEnd1.oml

Solution

Hello Vinayak,

Please find attached the updated OML. 

1. I have added the logic on the ProductDetail Screen to add the record on the AddToCart button.

2. This record will appear on the ShoppingCart screen where you can go from the link View Cart available on the FourColumnGallery screen.

3. In the ShoppingCart screen you can add/remove the quantity of the products and the sub total will get updated based on the add/remove the quantity.

Please review the OML and let me know, if you need any other  help.

Thanks & Kind Regards,

Sachin

ShopingEnd1Sachin19.oml

Hi Sachin, your solution really helped me to solve the issue with your reference. Keep contributing to the community your work is really appreciable. 

Thanks Vinayak for your kind words. :) I love to help others and definitely will keep doing this! Happy learning. 

Champion

Hello Vinayak 

Sorry, I haven't checked the OML you have attached. But here is a solution might help you. 

You can look into Traditional eCommerce Sample which has Add To Cart Functionality and Payment Integration Too. 


Though it is build on old UI. So, please don't include this in your current app but take the reference of how Add To Cart is developed. 


I hope this will help you. 

Hi Manish, Thanks for the solution I've found it very useful.

Hello Vinayak,

I have gone Through your Oml and Made a few Modifications in the Add To Cart Action and Shopping Cart Preparation and i post your edited oml here.

All you need To Do is clear the Existing errors (You can Add Some of your own more actions into preparation) And Make Changes in your Screen To Match the Data Receiving on the Local Variable(User Products) I have created for you.

ShopingEndModified.oml

Hi Varada, Thank you for modifying the app, but whenever I click on any product from fourcollunmgallary page it should go to the product detail page of that particular product but there's an error.  

whenever I click on a particular product it's appearing the same product on the detail page.

Kindly go through with the attached.OML file and please tell me what should I do to get the product by its ID. 

or could you fix it and resend it to me....it will be very helpful for me.

Thanks & Regards


ShopingEndModified.oml

I just gave you the Idea To implement Your Requirement,

Debugging  Errors and rest of the implementations you have To do for Your Learning,because Some one else will not keep Coding For you!

Wish you Happy Coding.

Hi Varada, Thanks for your solution it really helped me a lot.

I did that to my app. So first, you need to have the tables for that


This is what I have in my application, where you have the shopping list and the product. This list's relationship is many to many. A shopping list has a lot of products, and a product can be in a lot of shoppingLists. And that's why you have a third table to save this interaction, the ShoppingListProducts.

Another thing is that a shoppingList needs to be related to a User, and that's why you have the Shared ShoppingUsers.


So with all this things, you can manage everything, you just need to list all the shoppinglist the user have, if you want to see the products to that shoppinglist you jsut need to pass the shoppinglistId, and you can also know the quantity.

Every ShoppingListProducts has is own quantity as you can see on the diagram, its a way of seeing and add.


Have a look to in this application!!

https://www.outsystems.com/forge/component-overview/4962/shopping-list

It covers a lot

Best Regards,

Márcio 

Hi Marcio, Thanks for your solution. 

Solution

Hello Vinayak,

Please find attached the updated OML. 

1. I have added the logic on the ProductDetail Screen to add the record on the AddToCart button.

2. This record will appear on the ShoppingCart screen where you can go from the link View Cart available on the FourColumnGallery screen.

3. In the ShoppingCart screen you can add/remove the quantity of the products and the sub total will get updated based on the add/remove the quantity.

Please review the OML and let me know, if you need any other  help.

Thanks & Kind Regards,

Sachin

ShopingEnd1Sachin19.oml

Hi Sachin, your solution really helped me to solve the issue with your reference. Keep contributing to the community your work is really appreciable. 

Thanks Vinayak for your kind words. :) I love to help others and definitely will keep doing this! Happy learning. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.