Add To Cart via JavaScript / AJAX

    Hey folks,


    I'm a bit confused on how to dynamically add a product into a cart.


    I've found that snipped:


    Code
    1. $.ajax({
    2. method: "POST",
    3. url: "/shop/add-to-cart",
    4. data: { productID: 26,productQty: 1 }
    5. });


    And despite I receive 200, the product does not land in the cart... Perhaps I've misconfigured either payload or the URL?


    Another workaround would be to display a hidden form and submit it via JavaScript with correct properties however that seems to be a bit of a streatch.


    Thanks in advance.
    Damian

    Hi Damian,


    What does your /shop/add-to-cart do?


    Quote from damiandrozdowicz

    Another workaround would be to display a hidden form and submit it via JavaScript with correct properties however that seems to be a bit of a streatch.


    Your add to cart button probably should be a form regardless of whether you are submitting it via Javascript or not. See: Why use a form element when submitting fields with JavaScript?

    Thanks for a prompt reply @hus_md.


    As far as my investigation went I realised that sending an AJAX POST request by triggering a perch form submission adds one more data param to the payload:


    cms-form: YWRkX3RvX2NhcnQ6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvL2NhcnQvYWRkX3RvX2NhcnQuaHRtbDoxNTg1MzIyNzY1

    Otherwise, sending the following:


    qty: 1

    product: 12


    Results in 200 but the cart does not update.


    Perhaps thats the way forward to always create a simple hidden form instead relaying purely on JavaScript as that article suggests.


    Damian

    There are multiple things to consider.


    (A) Use a HTML form. It is semantic. It is accessible. And the FormData API makes it easy to grab the form field values. The form does not have to be hidden. You normally display a button for the user to add an item to the cart. That button should be inside a form.




    (B) Use a Perch-templated form as Perch adds a hidden field which it needs to handle the form submission





    (C) Normally you don't just submit a form and assume things went ok. Ideally you'd get some feedback. There are 2 problems with this:

    1. Perch doesn't natively respond with a feedback for submitted forms in a way that is useful for submitting forms with Javascript
    2. The add to cart form for Perch Shop never throws an error even if it couldn't add the item to the cart

    For (1), the Pipit app has a function for sending back a response: pipit_form_response(). However, because of (2) it is probably not very helpful in this case.



    What you can do instead is submit the form via Javascript to an endpoint (or even to the same page), get the items of the cart to determine whether the item you wanted to add has been added and send back an appropriate response:




    The Pipit app v0.5 has a utility function for sending back a JSON response pipit_respond() which can be useful here:


    PHP
    1. pipit_respond($status_code, $response);