Add To Bag 

Defining the Action in UI Design

1. Log in to the Kuika platform.
2. Select your project from the Apps screen.
3. Go to the UI Design module.
4. Open the product listing or product details screen.
5. Place an “Add to Bag” button on the product card or detail page.

6. Select this button and add the + ADD ACTION → appropriate trigger (Initial Actions, OnClick, etc.) → Bag → Add to Bag action from the Properties panel.

Configuring Action Parameters

• Bag Key (Required – Symbol Picker): The ID of the bag to which the product will be added. This value can be entered as a fixed value or determined dynamically. For example: “default”, wishlistBagKey,
• Bag Item (Required – Symbol Picker): Any object/list on the Kuika platform to be added to the bag. It is usually sent as a JSON object and contains the following information:

{‘id’: product.id,“name”: product.name,‘price’: product.price,‘quantity’: 1}

‍

• This structure is dynamically linked by taking data from data sources or form inputs.
• The Bag Key and Bag Item parameters must be linked via Symbol Picker. It is recommended to use values specific to each user and instant values instead of fixed data.

When the ‘Add to Cart’ button in a product list is clicked, the relevant product information should be added to the default cart.

Configuration Steps:

1. Go to the product list or detail screen.
2. Display product information via a form or data binding.
3. Place an ‘Add to Cart’ button on each product card.
4. Add the following action to this button:
   
   • ADD ACTION → OnClick → Bag → Add to Bag
5. Link the parameters as follows:
   
   • Bag Key: ‘default’ (or dynamic, such as currentUser.id + ‘_bag’)
   • Bag Item:

{‘id’: product.id,‘name’: product.name,“price”: product.price,‘quantity’: 1}

‍

• Category-based Bags: Separate Bag Keys can be defined for different product types. For example: ‘electronics_bag’, “furniture_bag”.
• Visual Notification: The user can be notified with a Notify action after adding an item.

Technical Risks and Precautions

• Multiple Addition: Preventing the same item from being added to the cart multiple times or allowing it to be added in a controlled manner.

The Add to Bag action is one of the most effective ways to manage user interactions and start processing selections in the system. It can be easily applied in any scenario based on cart logic and provides a powerful shopping/ordering experience when used in conjunction with other actions.