how to clear cart after successful checkout?

True_Primal
New Member
19 0 0

I can't find any help pages that even mention this topic.

The user is sent from https://trueprimal.com to the Buy SDK's CartModel's checkoutUrl, and proceeds to go through the https://checkout.shopify.com steps. The final confirmation step on the shopify webpage would seemingly need to redirect back to https://trueprimal.com so as to remove the items from the cart after checkout. Otherwise the cart continues to have the items in it after the checkout is successful.

What is the SDK's recommended way to handle this?

0 Likes
True_Primal
New Member
19 0 0

Can anyone give an example here of what is expected?  Surely it's not intended for the cart to simply remain there, even after checkout?

0 Likes
True_Primal
New Member
19 0 0

It turns out this is a known issue with the Shopify platform, and is discussed here: https://github.com/Shopify/js-buy-sdk/issues/98

The short answer is that if you want to create your own JavaScript solution, you can start by adding code to the /admin/settings/checkout page.  There is a section "Additional scripts" under "Order processing".

0 Likes
Thomas13
Tourist
8 0 3

Did you ever find a solution for this? I have run into the same issue. I also found the same Github discussion while searching for answers, but the solution there – redirecting automatically after the checkout is complete – is not ideal.

When I go back to my website after checkout is successful (order receipt email received, etc) the cart contents are still present. Attempting to change item quantities, etc results in this JS console error:

shopify_umd.js:969 Uncaught (in promise) Error: [{"message":"Checkout is already completed.","locations":[{"line":1,"column":1446}],"path":["checkoutLineItemsUpdate"]}]

It seems that a solution would involve evaluating the CheckoutId on each page load to see if it's still unfinished. I'm not sure how to run this query however... will keep searching but let me know if you ever discovered a resolution.

0 Likes
KarlOffenberger
Shopify Partner
1867 182 777

Hi Thomas,

A little more info would be very helpful to understand your setup - I am assuming you are using the JS Buy SDK but since that doesn't ship with anything like a cart object, I am not sure how exactly this relates. Therefore, I am assuming again, that you are using some kind of cart JS component or have written one and the issue is that the cart state isn't being reset upon successful checkout. Should latter be the case, it really isn't an issue with the SDK, but I'd be glad to check it out if you can provide more info as I mentioned before.

Happy NYE!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Thomas13
Tourist
8 0 3

Karl to the rescue again... I may need to contribute to your "coffee to code" fund ;)

Correct, I am using the JS Buy SDK. Currently the CheckoutId is stored in a cookie, which I've called _checkoutid in my code.

After a little more hacking away at this I have figured out a solution, and it's basically what was discussed on the Github link posted above, but the process is not fully documented so I will outline the steps required.

1. In the "Additional Scripts" section of /admin/settings/checkout you can enter the following (example.com should obviously be replaced with one's own domain). The line with the <h2> tag is just for user convenience... but the iframe is required. You could add some inline styles to set the iframe dimensions or assign CSS properties such as display:none to make it invisible on the Shopify checkout page.

<h2><a href="https://example.com/">Return to Example.com</a></h2>
<iframe src="https://example.com/clear.htm"></iframe>

2. On your own website, create the file that you're loading into the iframe above. I have used clear.htm as the filename but you can use whatever you'd like, as long as it matches what's being loaded into the iframe above. The code shown below is the most basic HTML page that will validate but the line with document.cookie is what really matters here. The cookie I'm using is called _checkoutid but that should be replaced with whatever cookie name you might be using. The date and time are arbitrary, this can be any date/time in the past. Assigning a date from the past will cause the cookie to expire, and it will be removed from the user's browser. Note that you can't delete a cookie directly, so changing the expiration date is the typical method of removing a cookie.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>reset cookies</title>
<script>
document.cookie = '_checkoutid' +'=; Path=/; Domain=.example.com; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
</script>
</head>
<body>
</body>
</html>

So once a customer checks out successfully: the iframe is loaded, the script runs, the cookie's expiration date is changed to a date in the past, the cookie is removed, and the cart on the website will no longer contain what the user just purchased.

This is all pretty basic in retrospect but without understanding that you can inject "Additional Scripts" into the checkout page, the solution for this was not at all obvious.

 

PaulNewton
Shopify Partner
2588 134 445

Hottake untested driveby comment

What about hitting? /cart/clear that then directs to /cart i know not ideal

Then with if accounts require then check customer.orders and do redirect|logic from there for new purchases in cart.liquid 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Thomas13
Tourist
8 0 3

Interesting, that trick does work on Shopify-hosted sites but this thread is about the JS Buy SDK which is for self-hosted sites. No guaranteed /cart URL and no cart.liquid either. But I will keep this in mind for some of the Shopify-hosted sites that I'm involved with.

0 Likes
PaulNewton
Shopify Partner
2588 134 445

Figured but was curious if calling /cart/clear in the additional scripts did anything

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
jeremykp
New Member
2 0 0

For those of you looking for more clarity on clearing the cart manually in Shopify see my comment here for an approach we found that worked (-:

https://gist.github.com/bmodena/a405144cf1f292ac8039796e1686bd13

0 Likes