The Quick-Add button is a feature commonly found in e-commerce platforms or software used for managing orders and quotes. Its purpose is to simplify the process of adding multiple products to a cart or creating quotes/orders efficiently. This feature is especially useful for experienced buyers who frequently need to add multiple products to their orders or quotes in a time-efficient manner, as it eliminates the need for manual searching and clicking on individual product listings.

It's important to note that the specific implementation of the Quick-Add button can vary depending on your business use case and flow. This button is available on every page with an out-of-the-box template; however, the SDK allows the implementer to do the following: 

  • Change the placement, appearance, and feel.
  • Embedded the button on any of the pages.
  • Configure an input component either a predefined list of products, a popup where you can add required products, or an input form for the Quick-Add button.
    • Set any of the flow for the popup component:
      • Allow the buyer to enter the product code and If the product code does not match any other products or the buyer enters 0 or a negative quantity, the application displays an error message.
      • Based on the product code buyer enter the application will display an auto-suggest selector, from which the buyer can choose the appropriate product. If the entered product code is wrong, the application displays the message "No product found".
    • Set any of the flow for the predefined list of products component:
      • Predefine the products and quantities, skip the popup, and add them to the cart after clicking the Quick-Add button.
      • Predefine products and/or quantities, then open the popup with all of those products, where buyers can add, update, and delete any.
  • Change the input field such as product name, product code, product description, and any standard or custom fields (maximum 4 cart line item fields) for the popup option. By default, the product code is provided as an input field.
  • Change the input fields (for a quote or order creation popup) up to 10 fields (standard or custom) from the Quote or Order object.

Quick Add Operation

By default, the Popup component is available with the out-of-the-box implementation. Refer to the following steps to add multiple products to the cart using this component:

  1. On any of the page, click the Quick-Add () button.
  2. Select the Quick Add option. The Add to Cart popup appears.


    You can add products in two ways:

    • Adding Products Manually - Ideal for adding one item at a time. Follow Step 3 to proceed.
    • Adding Multiple Products with a CSV File - This feature is useful for adding multiple products at once. Follow Step 4 to proceed.
  3. Adding Product Manually:
    1. In the Product field, search by product code and select it.
      The implementer can change the input field with the product name, product description, and any standard or custom fields.

    2. Enter the quantity, adjustment amount, and adjustment type.

    3. Click + Add Product link to add more products. To remove, click remove icon.
    4. Click Add To Cart to add product(s) to the cart.
  4. Adding Multiple Products with a CSV File:

    The Bulk Upload Products feature saves time by enabling you to add multiple products at once using a CSV file.




    1. Click Bulk Upload Product link to access the CSV file uploader screen.


    2. If you already have a file, drag and drop or upload the file.
      OR

      You can download a CSV template containing fields like Product Code and Quantity, update the data as required, and use it for bulk uploads. Click Download CSV Template to download the template.
      This allows you to enter the fields available in the CSV template. Adjustment amount and type are optional and enables you to proceed directly with adding items to the cart.


      If the CSV file fails to parse or is empty, a warning will appear on the screen. Make sure to verify that the file format is correct and contains valid product codes and quantities before uploading.

    3. The application shows the upload process for the selected CSV file.


    4. Once the CSV file is uploaded, the listed products and their quantities appear on the Add to Cart screen.


    5. To remove, click remove  icon.
    6. Click Add To Cart to add product(s) to the cart.
      Products get added to the cart.

Quick Order Operation

By default, the Popup component is available with the out-of-the-box implementation. Refer to the following steps to add multiple products to the cart and create an order using this component:

  1. On any of the page, click the Quick-Add () button.
  2. Select the Quick Order option. The Place Order popup appears.


    You can add products in two ways:

    • Adding Products Manually - Ideal for adding one item at a time. Follow Step 3 to proceed.
    • Adding Multiple Products with a CSV File - This feature is useful for adding multiple products at once. Follow Step 4 to proceed.
  3. Adding Product Manually:
    1. In the Product field, search by product code and select it.
      The implementer can change the input field with the product name, product description, and any standard or custom fields.

    2. Enter the quantity, adjustment amount, and adjustment type.

    3. Click + Add Product link to add more products. To remove, click remove icon.
  4. Adding Products by Bulk Upload Products with CSV File:

    The Bulk Upload Products feature saves time by enabling you to add multiple products at once using a CSV file.




    1. Click Bulk Upload Product link to access the CSV file uploader screen.



    2. If you already have a file, drag and drop or upload the file.
      OR

      You can download a CSV template containing fields like Product Code and Quantity, update the data as required, and use it for bulk uploads. Click Download CSV Template to download the template.
      This allows you to enter the fields available in the CSV template. Adjustment amount and type are optional and enables you to proceed directly with placing the order.


      If the CSV file fails to parse or is empty, a warning will appear on the screen. Make sure to verify that the file format is correct and contains valid product codes and quantities before uploading.


    3. The application shows the upload process for the selected CSV file.


    4. Once the CSV file is uploaded, the listed products and their quantities appear on the Place Order screen.

    5. To remove, click remove  icon.
  5. Click Place Order.
  6. Enter the required details for the order.

    For input fields, the implementer can specify up to 10 fields (standard or custom) from the Order object.
  7. Click Place Order.

You will see a success confirmation popup. To see more information about the order, click VIEW YOUR ORDER. This opens the Order details page.

Quick Quote Operation

By default, the Popup component is available with the out-of-the-box implementation. Refer to the following steps to add multiple products to the cart and create a quote using this component:

  1. On any of the page, click the Quick-Add () button.
  2. Select the Quick Quote option. The Place Quote popup appears.


    You can add products in two ways:

    • Adding Products Manually - Ideal for adding one item at a time. Follow Step 3 to proceed.
    • Adding Multiple Products with a CSV File - This feature is useful for adding multiple products at once. Follow Step 4 to proceed.
  3. Adding Product Manually:
    1. In the Product field, search by product code and select it.
      The implementer can change the input field with the product name, product description, and any standard or custom fields.

    2. Enter the quantity, adjustment amount, and adjustment type.

    3. Click + Add Product link to add more products. To remove, click remove icon.
  4. Adding Multiple Products with CSV File:

    The Bulk Upload Products feature saves time by enabling you to add multiple products at once using a CSV file.




    1. Click Bulk Upload Product link to access the CSV file uploader screen.


    2. If you already have a file, drag and drop or upload the file.
      OR

      You can download a CSV template containing fields like Product Code and Quantity, update the data as required, and use it for bulk uploads. Click Download CSV Template to download the template.
      This allows you to define the fields available in the CSV template. Adjustment amount and type are optional and enables you to proceed directly with placing the quote.


      If the CSV file fails to parse or is empty, a warning will appear on the screen. Make sure to verify that the file format is correct and contains valid product codes and quantities before uploading.

    3. The application shows the upload process for the selected CSV file.


    4. Once the CSV file is uploaded, the listed products and their quantities appear on the Place Quote screen.


    5. To remove, click remove  icon.
  5. Click Place Quote.
  6. Enter the required details for the quote.

    For input fields, the implementer can specify up to 10 fields (standard or custom) from the Quote object.
  7. Click Request Quote.

You will see a success confirmation popup. To see more information about the quote, click VIEW YOUR QUOTE. This opens the Quote details page.