How to make ajax request to add products in the cart ?

[mcmorriscoc925]

So what i want to do is make request from my chatbot when we click add to cart it should add the products and i want to know how we can do that i am adding chatbot through admin panel design config add html in footer a script and div script is hosted on our side which will have all the code to show chatbot. I tried the rest api method but it wont work well as there will be csp and cors error and also auth token would be required. i came across this code , but its not working in the console. How to do it any ideas?

var productId = 'BU10006275'; // Replace with the actual product ID
var qty = '1'; // Desired quantity
var formKey = 'dz5mIn1nsQ4dK1ue'

// Perform the AJAX request
jQuery.ajax({
    url: '/checkout/cart/add', // Magento endpoint for adding products to the cart
    type: 'POST',
    dataType: 'json',
    data: {
        product: productId,
        qty: qty,
        form_key: formKey
    },
    success: function(data) {
        // Handle success response
        console.log('Product added to cart!', data);
    },
    error: function(xhr, status, error) {
        // Handle error response
        console.error('Error adding product to cart:', error);
    }
});

[listinglev1264]

I guess for implementing AJAX requests to add products to the cart via a chatbot, you will want to make sure that your requests are properly authenticated and that CORS and CSP errors are addressed. Typically, you will need to use a combination of front-end AJAX to send data to the back-end, using your platform’s API like REST or GraphQL. You need to make sure the correct headers are set for cross-origin requests.

I have experienced this for one of my client in the context of an e-commerce site, he is running an online clothing store which you can find here , I have implemented these strategies to make the cart-based process more smooth and seamless. I find it out a game-changer for his customer experience. Integrating a chatbot that interacts with the cart in real time. This truly allows customers to add items without leaving the conversation. It can really help in increasing conversions and streamline the shopping experience.

If you are also encountering issues with authentication or API calls, try using session tokens or implementing OAuth for secure API access. Hopefully you find this one helpful!

[consultant07db]

Hi,

I think this is a CORS issue. You are using a chatbot from another domain with the Magento site domain.

If that's the case, you must set Access-Control-Allow-Origin in the Magento server.

For Nginx (nginx.conf):

server { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With'; }

[recipewhizce79]

To add products to the cart via AJAX in Magento 2, consider using an extension like Tigren's Free Magento 2 Ajax Add To Cart. This tool enables customers to add items without page reloads, enhancing user experience. It supports various product types and displays related products in a confirmation popup. Alternatively, Amasty's Magento 2 AJAX Shopping Cart offers similar functionality, allowing for a smoother add-to-cart process. These extensions can help you implement AJAX-based cart additions without dealing with CSP, CORS, or authentication token issues.