Javascript not loading until refresh, Tried Ajax and mercury workarounds

Hello everyone!

Thanks for taking the time to look over my post.

There is a fair amount to the question that I have, so bear with me and I'll get to the point.

I'm working on a website for an author, she knows I'm learning a lot as I go, but has seemed extremely pleased with the work I've done so far.  To sell the rights to her plays, she's had an agreement put together that she wants to add before the purchase.  My idea is to have a small form appear to get the appropriate information for placeholders for the agreement, the agreement to appear with that information, and a downloadable PDF be available with that agreement.  Ideally, I'd like this to happen prior to the purchase so that there is no way they can say they didn't see the agreement.  I've done a bit of research on the legality and issues of online agreements and the most prominent caveat is thay agreements HAVE to be available and required and easy to find.  

We've talked about getting e-signatures as well, but that's still up in the air based on availability, price, and ability.  

I'm 90% sure this is all possible, but I would need to have the code on each play's page with a hidden value for the play name.  I'm not SUPER familiar with JS, but I am comfortable with PHP, C++, and Python (and of course HTML and CSS.  Beyond syntax, all JS concepts seem to be the same or comparable to the other languages, my only fear here is lacking knowledge of security features. 

Otherwise, have you come up with a similar solution?  Any advice or ideas?  Whay are your thoughts?

Thanks!

- Mack

For product page? or which page?

Hey, all!

I'll go ahead and give the preface that I am very new to JS.  I'm familiar with other OOP languages and I'm comfortable with them.  JS is giving me some issues due to the nuances of the DOM and Ajax etc, I believe

Anyways, I'm running into the issue where the page I'm working on's code will not run until after a refresh.  I've tried placing the code within the

window.Squarespace.onInitialize(Y, function() { });

block and run the mercury load event listener.

window.addEventListener("mercury:load", myFunction);

I'm at a major loss here as to why it's not working at this point and any direction would be GREATLY appreciated. 

Edit:  To be a little more elaborate, this is all in a code block on an item's inventory page.  Each item will have the same thing with a few variables changed to match the items.

Edit 2:  Forgot to include the link, my apologies:   https://www.shoestringtheatrecompany.com/store/i-aint-made-that-way

On 7/21/2023 at 7:08 AM, tuanphan said:

For product page? or which page?

Hey there!  I just happened to see this response, I apologize.  Still new to these forums and I forgot to follow the topic to see responses.  I've made some progress on it, it's just the product page I'm working on.  Each product will have a slightly different variation, just based on the product name.

The only issue that I'm having is the one I most recently mentioned where the JS is not loading on the initial page landing.  I've tried the ajax workarounds that I've found online, but they've not worked.  I'm sort of stumped.

To determine if you are having an Ajax issue, you can turn off Ajax loading in Design > Site Styles.

If you reload several times and the issue has gone away then you know for sure you are dealing with an Ajax loading issue.

At that point you can attempt to address the issue or just leave Ajax Loading off. Read what Ajax does and decide if that is the right option for you needs.

1 hour ago, creedon said:

To determine if you are having an Ajax issue, you can turn off Ajax loading in Design > Site Styles.

If you reload several times and the issue has gone away then you know for sure you are dealing with an Ajax loading issue.

At that point you can attempt to address the issue or just leave Ajax Loading off. Read what Ajax does and decide if that is the right option for you needs.

Thank you!

I was able to disable the Ajax and it's working as intended now.  I get into a habit of trying to tackle challenges instead of removing them if I can forgetting that sometimes it's just extra work, especially where I'm wet behind the ears with JS.  I will come back to it in the future and try to work it out.

I don't think it will be a necessary feature for the site, but I'm working for someone else and always want the best for them.  It's not a huge site with a ton of items or anything.  I don't think the loading times will be greatly affected either way, just consider me a perfectionist. 

I suggest leveraging SS's product forms feature.

The upside to this method is that the entered information rides along with the order.

The downside is that you will have to customize the form with JavaScript to add a link into it that downloads the PDF and that requires writing a MutationObserver to watch for the form to come onto the DOM and then make the mods.

As you are discovering JavaScript itself is pretty straight forward as a language. It is all the web API stuff and how to use it is the harder part.

21 minutes ago, creedon said:

I suggest leveraging SS's product forms feature.

 

 

 

The upside to this method is that the entered information rides along with the order.

The downside is that you will have to customize the form with JavaScript to add a link into it that downloads the PDF and that requires writing a MutationObserver to watch for the form to come onto the DOM and then make the mods.

As you are discovering JavaScript itself is pretty straight forward as a language. It is all the web API stuff and how to use it is the harder part.

I had thought about using the custom form as well, I just wasn't confident enough that I'd be able to work with an additional pop-up.  Still learning to delve through the dev tools, though, I gotta say, I've enjoyed the mind-shattering stress of being pushed to learn something new, too bad I'm not the brightest tool in the chandelier.   There is a form attached to it, what I was going to attempt to do is pass the values from this form to that one, rather than that one to another screen to save the buyer some typing.  Thank you, so much, though for your input and advice. 

As for learning JavaScript, that seems to be legitimately the case, not to mention the sheer amount of tools handy for it to look through.

On 7/22/2023 at 3:55 PM, creedon said:

To determine if you are having an Ajax issue, you can turn off Ajax loading in Design > Site Styles.

If you reload several times and the issue has gone away then you know for sure you are dealing with an Ajax loading issue.

At that point you can attempt to address the issue or just leave Ajax Loading off. Read what Ajax does and decide if that is the right option for you needs.

Hey, there!

I just wanted to let you know I got it working the way we all wanted it done.

https://www.shoestringtheatrecompany.com/store/i-aint-made-that-way

We have it set up this way for the different plays.  I'm not asking for a review or anything, but I know I always like to see people who I've helped make progress, and thought you might enjoy the same.  Hope all is well!