Soliciting pointers on how to submit checkoutForm through AJAX request

[SGreshka]

Hi! I'm hoping someone finds this interesting enough to give me some pointers, as I am both stuck and not very experienced...

I have the below mentioned tutorial working as a standalone without problems, but hit a wall when trying to slap it (with my limited skills/knowledge) onto Polymer Shop:

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/221

As I tried to have it working with the checkout:

https://github.com/Polymer/shop/blob/master/src/shop-checkout.html#L120

I have uncommented L522 and taken out L508-520, as per the instruction at L504:

https://github.com/Polymer/shop/blob/master/src/shop-checkout.html#L504

I have also set L109 in /bower_components/iron-form/iron-form.html to false as per the instructions right above that same line:

  <script>

    Polymer({

      is: 'iron-form',
      properties: {
        /*
         * Set this to true if you don't want the form to be submitted through an
         * ajax request, and you want the page to redirect to the action URL
         * after the form has been submitted.
         */
        allowRedirect: {
          type: Boolean,
          value: false

Although the below (contrary to the instructions in the above file itself) states that:

Dependencies are stored in the bower_components directory. You should never manually alter the contents of this directory.

https://www.polymer-project.org/1.0/docs/tools/polymer-cli#dependencies

I'm specifically at a loss with:

1. what form ID to use in the tutorial's form-submission-handler.js:

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#10-submit-the-form-using-javascript-ajax

I've tried in vein both "helper" and "checkoutForm", but then my problems are also probably connected to the fact that I don't know:

2.1. how to point to form-submission-handler.js?

2.2. and I'm also not sure whether to point to it from within shop-checkout.html or from within iron-form.html or elsewhere?

3. and also where to place form-submission-handler.js within the Polymer Shop file structure?

All this is obviously beyond my knowledge, but I'm trying to learn while doing. If no one would be interested to give me some pointers, I would like to apologize for the noise here and I would then take my hopes to Stack Overflow or elsewhere...

Many thanks for looking!

[keanulee]

Some general pointers since I don't want to dive too deep into this:

• Don't modify /bower_components/iron-form/iron-form.html. Instead, set this via attribute where it's used in shop-checkout.html

<iron-form allow-redirect>

• form-submission-handler.js can just be a script included by shop-checkout.html (<script src="...">). It'll need to be modified to get a reference to the form within shop-checkout's shadow root instead of document-level document.querySelector() (see: shadow DOM concepts).
  • Alternatively, consider copying the code in form-submission-handler.js to shop-checkout.html where you can read the values you want to send in _willSendRequest(). This is essentially the same step as getFormData().

[SGreshka]

Many, many thanks, @keanulee ! I'll now go see how far I get with that new info...