1

When using XMLHttpRequest to update cart like the following, I get a 500 error for 'lineItems': {[lineitem]: {'qty': value}} (and also {[lineitem]: {'remove': true}}, any other submission works);

var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

atomic(url, {
    method: 'POST',
    data: data,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest',
        'Accept': 'application/json'
    }
}).then(function(response) {
    console.log(response.data);
    console.log(response.xhr);
}).catch(function(error) {
    console.log(error.status);
    console.log(error.statusText);
});

(The code above uses atomic, which is just a small library to wrap XMLHttpRequest into a promise structure similar to using fetch).

The submitted data is (and looks) exactly the same as what I pass through JQuery Ajax, which works;

var url = document.querySelector('form#cart-form input[name="action"]').value;
var data = {
    'action': 'commerce/cart/update-cart',
    'lineItems': {[lineitem]: {'qty': value}}
}
data[csrfname] = csrfvalue;

$.ajax({
    type: "POST",
    dataType: 'json',
    url: '',
    data: data,
    success: function(response){
        console.log(response);
        }
    }
}).fail(function(error) {
    console.log('Error: ' + error);
});

I can't seem to figure out what the issue is, as the POST data being submitted looks EXACTLY the same. Changing the Content-Type to application/json doesn't work either. Anyone run into this issue?

  • 1
    The requests are not identical. You are passing an url with atomic but leave the url (as it is correct) blank in your query. That might cause issues sometimes in certain cases (I doubt this is the issue this time but other requests might fail). You might want to dump your $_POST array and see if it's empty. Axios with vue and Angular requests aren't accepted by Craft without changes too, chances are high its the same for atomic – Robin Schambach Feb 20 at 20:02
  • Well, I should have added that I've tried both ways. Passing the action and/or passing the url. Same problem. The $_POST array looks exactly the same, as far as I can tell. And the issue persists if I try to pass along a serialized encoded form string. It's that specific line 'lineItems': {[lineitem]: {'qty': value}} causing issues for some reason. Headache inducing stuff. – Anders Feb 20 at 20:58
  • Actually, $_POST has 'lineItems' => '[object Object]' for the XMLHttpRequest (atomic) post... While the $.ajax versions just shows $_POST = [] – Anders Feb 21 at 3:09
  • There is actually no real way your web server would ever contain an object in your $_POST array. Not even an StdClass. There is no setting that would allow that to happen. And if the ajax version was empty you wouldn't receive a response at all for your request. Are you really sure you didn't miss something? – Robin Schambach Feb 21 at 6:32
  • I copied your code and changed the action url and everything works fine. So there is no error during sending the request and there are no issues with atomic – Robin Schambach Feb 21 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.