The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

adding item to cart using JSONP call and viewing cart

I'm trying to add an item to the cart using a JSONP call following the syntax presented here (using v2.0):
https://wiki.foxycart.com/v/2.0/json

The code is on my local machine, so I'm posting it below.
If I add an item to the cart and view the cart at the same time, on the first click of 'add to cart', the cart opens and displays as empty. All subsequent clicks seem to work fine, and add an item each time and display the cart.

If I replace the form action with "#", and click the view cart link below after clicking 'add to cart', it seems to work fine every time.

How can I successfully both add items to the cart using JSONP and have the cart view?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.foxycart.com/precisionteststore/loader.js" async defer></script>
<script src="jsonp_submit.js"></script>
</head>
<body>
<form action="https://precisionteststore.foxycart.com/cart?cart=view">
<input type="submit" value="add to cart" />
</form>
<a href="https://precisionteststore.foxycart.com/cart?cart=view">View cart</a>
</body>
</html>


and the javascript:
var FC = FC || {};
FC.onLoad = function () {
FC.client.on('ready.done', function () {
$('form').submit(function(event) {
FC.client.request('https://'+FC.settings.storedomain+'/cart?name=My+Product&price=3');
console.log('submit clicked!');
});
});
};


thanks
Comments
  • fc_adamfc_adam FoxyCart Team
    @zestysauce,

    Thanks for including the code. The issue you're running into is that the cart view completed by clicking the form is happening before the add to cart happens, which you're doing via the submit jQuery event hook.

    Can I ask why you're approaching it like that? We'd recommend just having your actual product as the add to cart link or form, and then our normal javascript will also show the cart automatically. That would simply look like this:
    <a href="https://precisionteststore.foxycart.com/cart?name=My+Product&price=3">Buy My Product</a>
    To answer your question though - to make your approach work you would need to stop the actual form from submitting, and instead trigger the view cart manually after the add to cart has completed.
  • ok, thanks. well, I was doing it that way because I don't really have something as simple as "My Product" with a price of $3, but something with a bunch of different options that affect product pricing and weight. the customer selects a few options, enters a few numeric dimensions, and that gets sent to a php script that calculates pricing and weight. I was then using the customer inputs and the php outputs to put together the product configuration and submit it to the cart using FC.client.request.

    I suppose I could do the same using what you suggest above, and just use jquery to update the product configuration. would that be better?

    thanks!
  • fc_adamfc_adam FoxyCart Team
    @zestysauce,

    Ah cool - thanks for explaining what you're looking to do.

    There are certainly a few ways you could go about it. One option would be to return the customer to a confirmation page that shows the product they entered, and render an add to cart form with all the final calculated values that they can add to cart. If the final price isn't actually known until you do your calculations - that might be the better approach.

    If the calculations are pretty standard - you could also do them within javascript directly on the page to skip the confirmation step.

    You could also add the product directly from your PHP script by making a HTTP request to the cart. You could then simply include #fc-sidecart on the resulting page your PHP script loads, which our javascript you include on your page will pick up and show the Sidecart when the page completes loading. To make the call from the PHP script - you'd load the URL just like you would when making a javascript request - you'd just need to make sure you have the customers current cart session ID though, so you can add the product to their correct cart session. With that in mind you'd probably want to pass that ID to your PHP script so you can utilise it.

    One other thing I'll mention is our product option modifiers, which you can read about at the bottom of this page: http://wiki.foxycart.com/static/redirect/add_to_cart. If you just need to change the weight and price based on selections the customers make to radio inputs, checkboxes or select elements - that would cover your needs. If you need to perform maths based on text inputs though - that won't be what you need.

    Hopefully that helps give you some direction - let us know if anything needs further clarification though.
  • ok, thanks! I'm sure I can get something working with what you've suggested.
Sign In or Register to comment.