wprox

Hi Nicolas,

I turned off this setting in iThemes, and I think it fixed it:
X Filter Long URL Strings
Limits the number of characters that can be sent in the URL. Hackers often take advantage of long URLs to try to inject information into your database.

Makes sense? I’m new to JS Console errors, but I guess it tried to post that crazy long url with all the button settings, which iThemes then limited / chopped down, hence your plugin hanging with spinner…

Hi Nicolas,

I am running it on my hosting company’s server, just pasted in errors from JS Console.

I deactivated plugins, and it appears to be iThemes that is causing this issue.

Any ideas on which / types of settings might be causing this?

Thank you ??

Thank you Nicolas for your detailed answers!

1. Errors in JS Console after entering button name and clicking Create Button:

POST https://myurl.com/wp-json/direct-stripe/v1/buttons?id=ds-numbers-here&data={%22text%22:%22Cheapest%22,%22value%22:%22ds-1538402120424%22,%22type%22:%22Payment%22,%22amount%22:1000,%22button_id%22:%22MyButton%22,%22name%22:%22Company%20Name%22,%22description%22:%22Description%22,%22label%22:%22Payment%22,%22panellabel%22:%22Confirm%20payment%22,%22coupon%22:%22%22,%22setup_fee%22:%22%22,%22zero_decimal%22:false,%22capture%22:true,%22billing%22:false,%22shipping%22:false,%22tc%22:false,%22rememberme%22:false,%22display_amount%22:false,%22currency%22:%22USD%22,%22custom_role%22:%22%22,%22success_query%22:%22%22,%22error_query%22:%22%22,%22success_url%22:%22%22,%22error_url%22:%22%22}&_dsnonce=numbers-here 414

Error: Request failed with status code 414
at t.exports (createError.js:16)
at t.exports (settle.js:18)
at XMLHttpRequest.f.(/wp-admin/anonymous function) (https://myurl.com/wp-content/plugins/direct-stripe/admin-app/dist/build.js?ver=0.0.1:6:34728)

buttonsSettings.vue:634 Uncaught (in promise) TypeError: Cannot read property ‘message’ of undefined
at buttonsSettings.vue:634

What happens when you refresh the page after creating a button ?
No buttons there

Is the new button listed in the Edit button dropdown option ? No

2. Got it. Still waiting to hear from my theme on how best to do this in their pricing table module.

3. Very cool, when do you think you might push this to the plugin?

Thanks again ??

Interesting, thanks!

Thanks so much for the quick response Florian!

That worked.

Interesting, it seemed like everything in the picture element is controlled in the img section, so hadn’t added any attributes to the picture tag before…

Thank you ??

Thanks a lot Florian ?? Seems to work for my picture element in js and nojs.

Hi Florian,

With the second beta version that I downloaded, I just noticed that WITH js enabled, it automatically downloads 2 images: Index first downloads the src file inside img (not the matching width srcset file inside img), and then lazysizes downloads the correct source image that it should actually download.

I’m assuming once you fix the code, it should fix this…

I do have srcset inside my img tag, but like you said, it does not include the images defined in the source elements above.

Not sure if this is helpful, but looks like he was trying to do something similar:
https://stackoverflow.com/questions/29145354/dry-lazy-loaded-images-with-noscript-fallback

Thanks!

Thanks Florian!

The data-sizes is gone, which is good.

The noscript wrapping around the entire picture element is causing 2 images from the picture element to get downloaded: the first source srcset and the img src. It would be nice if the picture element logic could still be used in noscript, but I’m not sure how to do that…

Take a look at any of the images on this page, they are using lazysizes:
https://images.guide/#jpeg-compression-modes

They just wrap the noscript tag around the img in the picture element…

Thanks!

Thank you Florian ??

Thank you Florian ??

The data- is appended nicely in source, but couple of questions:

1. I am getting a <noscript> element PER SOURCE (I have 3 source elements) + another with img. Is it supposed to be like that (4 <noscript> elements) OR just 1 <noscript> element for the entire picture element? When I block js, the img <noscript> is the one that is highlighted in chrome dev tools, NOT the source <noscript> element with the matching media query.

2. In the img element: in addition to my sizes attribute, it adds a matching data-sizes attribute. I never use data-sizes=”auto”. According to lazysizes github:
lazySizesConfig.sizesAttr (default: “data-sizes”): The attribute, which should be transformed to sizes. Makes almost only makes sense with the value “auto”. Otherwise the sizes attribute should be used directly.
I also have a sizes attribute in one of the sources, but the plugin does NOT add a data-sizes in there.

Thanks again!

Sounds great Florian, thank you!

Thanks Florian. Unfortunately, I’m not advanced enough in php / js currently to make those changes with a decent understanding of what I’m doing… Hope to check out some tutorials at some point to have a better sense of what is happening in code like this…

Thanks for the quick response Florian ??

Any suggestions of code solutions that might take care of this for me, that I can implement along with the plugin, perhaps something I can put into functions.php?

Or is it way more complicated than that / really needs to be integrated into the overall plugin functionality php?

I tried to think of different solutions before opening this ticket, like using jquery to change attribute name to data-, but then when I looked at your plugin code, figured I’d follow up with you for better solutions…

Thanks again ??

Thanks Gerd ??

I’m using another solution, but might test speed differences at some point so good to know.