Magento – Add to Cart Not Working – Magento 2

Having the same form key doesn't seem to cause me issues on chrome. (We're not using Turpentine but instead using some custom varnish configuration)

Having said that we have a pass rule setup in varnish for anything on the checkout You could add something similar on a wilcard of checkout/cart/add which might do the trick.

So I finally was able to add a product to the current customers cart.

Steps

• Get the "add to cart" url from the product which you want to add to the cart (PHP needed)
• Add the form key to the url
• Add your custom options to the body of the POST call via FormData

Code

Product id (NOT the sku), custom option id and the redirect url must be replaced with your values. The custom option id can be found by:

• trial and error (they start at 1 and increment for each new option)
• REST call How can i get custom options from product in magento 2?
• Put a product with custom options into the cart and checkout the network tab in chrome, there you can see the ids of the custom options in the request body

Place this code into any *.phtml file.

<script type="application/javascript">
function AddToMagentoCart() {
    var addToCartUrl = "<?php
    $productId = 1; // <--- set correct product id (e.g. 1)
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $product = $objectManager->create('Magento\Catalog\Model\Product')->load($productId);
    $addToCartUrl = $objectManager->get('Magento\Checkout\Helper\Cart')->getAddUrl($product);
    echo $addToCartUrl.'form_key/'; ?>";

    // add form key
    var formKey = jQuery.cookie("form_key");
    addToCartUrl += formKey;

    // add options
    var formData = new FormData();
    formData.append("product", <?php echo $productId ?>);
    formData.append("selected_configurable_option", "");
    formData.append("related_product", "");
    formData.append("form_key", formKey);
    formData.append("options[2]", "Some custom data, foo bar"); // <--- set correct optionId (e.g. 2)
    formData.append("qty", cp.Menge);

    // make POST call with the custom options as body element
    var request = jQuery.ajax({
        url: addToCartUrl,
        method: "POST",
        processData: false,
        contentType: false,
        data: formData
    }).done(function( response ) { // redirect to cart if call was successful
        window.location = "http://example.com/checkout/cart"; // <--- set correct redirect link
    }).fail(function( jqXHR, textStatus ) {
        console.log("Couldn't add product to cart. " + textStatus);
    });
};
</script>

Note

I have not found a solution on how to set the price of an item. I guess it's not possible at all, because it would pose a security risk. The client should never tell the server how much an item should cost.

Thanks to those questions/answers/comments

• https://stackoverflow.com/questions/37705549/magento-2-how-to-generate-add-to-cart-url
• How to retrieve product add to cart url in phtml file
• https://stackoverflow.com/questions/32788960/ajax-sending-formdata-without-webkitboundary