Re: Abandoned Carts Increase - Valid checkout form not found error

Solved

Abandoned Carts Increase - Valid checkout form not found error

ttander32
Excursionist
30 0 3

I've noticed over the last few weeks an increase in my abandoned carts. In the console, when a customer clicks proceed to checkout I'm noticing an error message 'Valid checkout form not found. mask v. 17.02.

 

Has anyone else experienced this issue and if so, what's the solution?

 

Thanks

 
Accepted Solution (1)
Geist
Shopify Partner
77 7 8

This is an accepted solution.

Hi Toni,

 

We took a look at the code, there is a mess to say the least. This is going to take some real digging. What I would recommend is that you duplicate your original theme and only install the apps you absolutely need.

 

It's super important for any site that the javascript is kept clean and organized and in your theme there are minified inline scripts thrown all over the place. The order of the scripts is important and one of your scripts is dependent on jquery and the theme does not have jquery installed.

 

I seen an inline script tag with defer on it and defer does not work on inline tags. The apps you have installed (there is quite a few) have generated all kinds of js files and it's unmanageable. You need to take a step back, get a clean version of your theme and reinstall one app at a time and see where the problem begins.

 

An additional problem is a lot of the generated scripts are minified already so it's not possible to even know what they do.

 

We created a debugging theme which we already removed. In the debugging theme we removed some of the script tags and a lot of the errors in the console went away. You scripts that are conflicting with each other and a lot of theme seem unnecessary. 

- Shopify Headless Ecommerce Experts
- Site speed optimization
- Composable Commerce
Geist - Headless Shopify Ecommerce Expert

View solution in original post

Replies 13 (13)

Geist
Shopify Partner
77 7 8

If you look we can take a look at the code, do you have any scripts or apps that you included in your theme?

- Shopify Headless Ecommerce Experts
- Site speed optimization
- Composable Commerce
Geist - Headless Shopify Ecommerce Expert
ttander32
Excursionist
30 0 3

Hello, thanks for taking a look at this. In my video recordings, when a customer clicks proceed to checkout I'm noticing an error message 'Valid checkout form not found. mask v. 17.02" is thrown and then the customer abandons checkout. I haven't made any changes to checkout so I'm not certain what this error is related to.  Attached is a CSV file that shows 2 recordings where the customer clicks 'Proceed to Checkout' and the "valid checkout form mask v.17.02 error message shows. 

 

I reviewed the Google Console errors on my home page (www.ubgclothing.com) and located the "valid checkout form not found" error message (file attached). It looks like it's happening in the Printful application CDN file in their product customization module, but I'm not certain.  

 

This is the file that may be causing the error from Google console,  https://cdn.shopify.com/proxy/4246c4914a97444b0f4d5479fe82dbaf0d4f3224311cd4d8ec0ec26383ab5677/stati.... This is the file that points to the "valid checkout form not found" in the Google console. Whenever a customer clicks on Proceed to Checkout, this "valid checkout form not found" error is showing up on my recording and the cart is then abandoned. 

 

Any help provided would be greatly appreciated.

 

Thanks

Geist
Shopify Partner
77 7 8

I just looked at your link, you seem to have quite a few errors in your console, and the file you sent is minified js, it's not human readable. Would you like us to take a look and send a request to your store?

 

I also noticed on the product page that the change country keeps popping up and disappearing and you have an error that jquery is not defined. We are in Germany so maybe you don't even see the change country banner if you are in the United States.

 

- Shopify Headless Ecommerce Experts
- Site speed optimization
- Composable Commerce
Geist - Headless Shopify Ecommerce Expert
ttander32
Excursionist
30 0 3

Hi, yes please take a look and send a collaborator request to our store. I've never seen the change country pop-up. It's probably related to the customer location. Is the error preventing the customer from moving forward in the journey?

 

Thanks, Toni

Geist
Shopify Partner
77 7 8

Alright we sent a request over

- Shopify Headless Ecommerce Experts
- Site speed optimization
- Composable Commerce
Geist - Headless Shopify Ecommerce Expert
Geist
Shopify Partner
77 7 8

This is an accepted solution.

Hi Toni,

 

We took a look at the code, there is a mess to say the least. This is going to take some real digging. What I would recommend is that you duplicate your original theme and only install the apps you absolutely need.

 

It's super important for any site that the javascript is kept clean and organized and in your theme there are minified inline scripts thrown all over the place. The order of the scripts is important and one of your scripts is dependent on jquery and the theme does not have jquery installed.

 

I seen an inline script tag with defer on it and defer does not work on inline tags. The apps you have installed (there is quite a few) have generated all kinds of js files and it's unmanageable. You need to take a step back, get a clean version of your theme and reinstall one app at a time and see where the problem begins.

 

An additional problem is a lot of the generated scripts are minified already so it's not possible to even know what they do.

 

We created a debugging theme which we already removed. In the debugging theme we removed some of the script tags and a lot of the errors in the console went away. You scripts that are conflicting with each other and a lot of theme seem unnecessary. 

- Shopify Headless Ecommerce Experts
- Site speed optimization
- Composable Commerce
Geist - Headless Shopify Ecommerce Expert
ttander32
Excursionist
30 0 3

Thank you. I appreciate your feedback and support. 

cooncesean
Tourist
4 0 1

I'm running into the exact same issue: 

Valid checkout form not found

 

My store' details:

  • Theme: Studio version 9.0.0
  • Third Party Apps of Note: Printful

What I notice, however, is that this error is thrown from one of Printful's script's:

https://cdn.shopify.com/proxy/47cf9d0b5dbe10eee752ac94d56cb89eda4e1d84b4ca58eb2dc2444b4bc0254e/static.cdn.printful.com/static/js/external/shopify-product-customizer.js?v=0.28&shop=moderntravelart.myshopify.com&sp-cache-control=cHVibGljLCBtYXgtYWdlPTkwMA

 

I'm still debugging ... but wanted to share this data point to see if helps others as they debug on their own. 

 

Question to the original post author, @ttander32 - are you using Printful as well (or another third party app) to handle order fulfillment?

ttander32
Excursionist
30 0 3

Yes, I'm using Printful. I went back and forth with Printful regarding this issue and their only solution was to update my theme. I'm certain that this error has to do with their personalization tool which isn't enabled on my store. 

cooncesean
Tourist
4 0 1

Interesting - ok, so there is definitely some overlap between our two stores .... that's good we're tracking this down.

So, which theme did you have to change to (theme + version) in order to resolve the issue?

ttander32
Excursionist
30 0 3

We're moving from Prestige 4.12.0 to Prestige 7.0.1. I also sent this thread to Printful and Shopify so that Printful doesn't think that this is an isolated issue. I started noticing it when Printful pushed their order permission changes about a month ago. 

cooncesean
Tourist
4 0 1

I was able to track down the root cause (in my particular case - Theme: Studio v9.0.0 and App: Printful). 

 

Here's the deal: 

  1. Shopify + Printful loads a third party javascript called `shopify-product-customizer.js`. 
  2. That code is minified, but if you set a breakpoint in the code and step through it line by line, eventually you come across this line -- which looks to be Printful targeting the correct `form` element in the page in order to act on it:

 

var t = document.querySelectorAll('form[action$="/cart/add"]');​

 

  • The theme I'm using (Studio v9.0.0) does not have a form element in the page with that specific `action`. As such, Printful fails to target that element and raises the "Valid checkout form not found" error.
  • However, my Shopify page does have a `form` with the action: 

 

form[action$="/cart"]​

 

The difference being that Shopify has a form element with the `action = "/cart"` and Printify's script is trying to target a form element with the `action = "/cart/add/"` -- which doesn't exist. 

 

.......

 

I don't know how to solve this yet (though I am looking through Theme > Customize > Edit Code > product-form.js to figure out how to change `{{ routes.cart_url }}` to what Printful expects), but wanted to post root cause in the case that this potentially helps others.

ttander32
Excursionist
30 0 3

After I upgraded my theme, the error went away and my conversion rate went back to normal. I noticed this again with Shopify Inbox and once I deleted the app the error went away. I'm struggling to find an acceptable chat provider. I'm going back to Shopify Inbox and will monitor for this error.