I am using Snipcart version v3.3.0 as a shopping cart on my site I built in MVC using C#. The shopping cart works fine and I am able to complete transactions.
The problem I am having is that I would like to navigate the user to my own thank you page on my site once they complete their transaction. Currently when you complete checkout using Snipcart, by default it just displays their thank you page in the side cart checkout modal.
I have read a few posts on how to accomplish what I want but none have worked. I keep getting this browser console error that says Uncaught TypeError: Snipcart.subscribe is not a function
<script>
document.addEventListener('snipcart.ready', function () {
Snipcart.subscribe('order.completed', function (order) {
var url = '/thankyou?order=' + order.token;
window.location.href = url;
});
});
I have even tried using the .execute method as one of the posts suggests but that did not work either. Uncaught TypeError: Snipcart.execute is not a function
<script>
document.addEventListener('snipcart.ready', function () {
Snipcart.execute('order.completed', function (order) {
var url = '/thankyou?order=' + order.token;
window.location.href = url;
});
});
My guess was that I was missing a reference or something to the snipcart.js. But after double checking multiple times I came to the conclusion that I am not missing the snipcart.js reference at all, I am in fact calling it before I call these 2 snippets above. Also, the cart is working because it's referencing the snipcart.js , so I know for a fact I am not missing that reference.
Another thought is that since I am using version 3.0.0, some of the JavaScript might be different for this implementation to work on this version. The documentation page on their site where the info would be is empty. Click here
Whereas the documentation for version 2.x shows the code that I was trying out. Click here
Can anyone guide me through this? This is where I got the information on Redirecting The User to A Custom Thank You Page You have to scroll to the bottom where they talk about taking the user to your own thank you page.
This one also shows a snippet of code that I tried but did not work for me
It seems that you are using v3, however, the events that you are listening to are for v2. You would need to listen to this event https://docs.snipcart.com/v3/sdk/events#cartconfirmed for v3.
You could listen to the cart.confirmed event and redirect the customer to the page of your choice using native browser API (location.href).
You have 2 problems here. One is using Snipcart object, and second is redirecting to custom page.
In order to use Snipcart object, you should use window global object. So you would access Snipcart like this:
window.Snipcart.events.on('cart.confirmed', async (cartConfirmResponse) => {
// Your logic
})
In example above, we subscribed to cart.confirmed event. That will fire whenever a purchase is finished. Snipcart will by default open it's own Order Summary page. So you can just add a logic that will instead close the cart and redirect to some other page. You can do it like this:
window.Snipcart.events.on('cart.confirmed', async (cartConfirmResponse) => {
await window.Snipcart.api.theme.cart.close();
window.location.replace("http://example.com/custom_page");
})