Adding an extension that can send cart data

Hi,

I'd like to create an extension that interacts with carts. Essentially, I want to be able to make API calls out to an external service when a user adds or removes items from a cart.

I've noticed that there are no APIs in SquareSpace to interact with carts before orders are placed. I'd like to find a way to get this information. Does anyone know if there is any possible way to do this?

At this point, I'm pretty new to SquareSpace, so I don't know even what I don't know. I think I want to build an extension that can somehow interact with cart data, but I don't even see much documentation about building extensions. Is there any info out there about extension development?

Thanks for any help you can give!

3 hours ago, JoeyS said:

Hi,

I'd like to create an extension that interacts with carts. Essentially, I want to be able to make API calls out to an external service when a user adds or removes items from a cart.

I've noticed that there are no APIs in SquareSpace to interact with carts before orders are placed. I'd like to find a way to get this information. Does anyone know if there is any possible way to do this?

 

At this point, I'm pretty new to SquareSpace, so I don't know even what I don't know. I think I want to build an extension that can somehow interact with cart data, but I don't even see much documentation about building extensions. Is there any info out there about extension development?

 

Thanks for any help you can give!

There is no public api for this

There is some development expectation to work with carts in the future, I am very interested.
Is there an alternative via javascript?

I was thinking of a javascript solution, but it just feels like it would be very fragile and probably not work universally across all themes. I'm probably not going down that road.

Although a Javascript solution would be fragile it shouldn't be to much of problem as far as v7.0, v7.1, and themes go.

I'm pretty sure the cart uses the same inner structure across versions. Makes sense from SS standpoint. One cart to rule them all! 🙂

<div id="sqs-cart-root">
</div>

Hello @JoeyS,

Thanks for posting your question!

We do not currently offer an API to retrieve or add items to the cart. Since we're unable to offer this functionality currently, what I can do is submit this as a feature request to our Product and Development teams. 

Although we can't guarantee feature implementations, all requests are reviewed and we always appreciate the feedback.
 

Thanks,
Alex

@AlexD,

That would be really cool. This would be a really nice piece of functionality.

@AlexD

I could have used such an API a while back for a project I did. I needed to get the cart information and send it formatted for use in an email to the site owner before the site user had finished checkout.

Hello @creedon,

Thanks for sharing your use case!

I confirm that I have submitted a feature request to our engineering teams. Have a great rest of the week!
 

Stumbled across this and thought I'd throw something into the mix. I suppose you could try to find all the places that interact with the cart and attach listeners to those but I think that sounds fragile. I think if you were really trying to do this (and you probably shouldn't), then you'd need to listen to the cart API calls.

To be clear, I don't think you should do this, even though there's nothing fundamentally wrong with it, so I'll put this here "for educational purposes".

😀

So... you could monkey-patch the open method on the XmlHttpRequest prototype, then inside that you could add an event listener and then you'd have a hook to do whatever you wanted.

For example, you could inject this to your cart page (or any page for that matter) and open up the console and see all the requests that squarespace are making. 

<script>
((open)=>{ 
  XMLHttpRequest.prototype.open = function() { 
    this.addEventListener("readystatechange", ()=>{ 
      console.log("look at this!", this.readyState, arguments); 
    }); 
    open.apply(this, arguments); 
  }; 
})(XMLHttpRequest.prototype.open)
</script>

obviously you would check arguments[0] for the method and arguments[1] for the api url. If you were doing this properly you would probably want to monkey-patch the fetch api too, but we wont go into that.

you could extend this and wrap the send method of the prototype and see what they're sending etc etc. (open up the Network tab of the developer tools and you can see that the request payload has the ItemID, sku and quantity in it for example). 

You're also inside the page, with all the cookies you need, so you could also send your own request to get the carts contents and then forward it out and off to your own API if you really wanted...

Again, I'm not saying you should do this, I'm just saying it's javascript and you can do what you want, so you could do this.... for educational purposes... 

the right answer is obviously to vote up the feature request for a signed webhook for cart items.