Integration for Google AMP Format

We have been looking into converting our product pages to Google's AMP format for mobile users. Currently, any AMP webpage cannot include Javascript or anything in a <script> tag unless it is in JSON (at least, that's how I understood this). When I try to implement loader.js, the page doesn't work and I get an error on the line for the script in AMP's validator: Custom JavaScript is not allowed.

I admit to being very new to AMP and not at all experienced wtih JSON or Javascript, so maybe I'm just missing something. Is there a way to use Foxycart in AMP, or is this beyond the cart's current capabilities?
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @crystalimagesinc,

    Thanks for posting - good question! AMP doesn't allow custom javascript as you've found - I believe it's simply a condition to ensure that these pages can load as fast as possible for the readers, as loading external javascript references will only slow the page down.

    The good news here is that your add to cart links/forms will still work for customers on the AMP based pages without loader.js being included. Instead of showing the cart in the sidecart display, it will load the full-page cart with the product added. Depending on the types of products you're selling here and the interaction you want the customer to have - you could also direct the customer straight to the checkout for these AMP based pages, skipping the cart entirely. To do that, you would add a &cart=checkout attribute to your URL's, or a hidden input like this to your forms:
    <input type="hidden" name="cart" value="checkout">
    I hope that helps!
  • edited July 23
    I implemented the hidden input that you suggested, but clicking the Submit/add to cart button has no effect: no redirect, no additions to the cart itself if I manually navigate to the page to check. It seems the error was just a validation issue in AMP, and not directly related to my problem.

    I opened up the console in Chrome and noticed that I got these two errors every time I clicked the Submit button:

    Failed to load https://crystalimagesinc.foxycart.com/cart?__amp_source_origin=https%3A%2F%2Fwww.crystalimagesinc.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.crystalimagesinc.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

    and

    Form submission failed: Error: XHR Failed fetching (https://crystalimagesinc.foxycart.com/...): Failed to fetch​​​

    I think it has to do with the fact that AMP requires that any form that is using POST method use action-xhr instead of action in order to work (or maybe I'm just guessing because adding those three letters gets me one less AMP error and two new errors).

    Edit: not sure if this is related to the problem, but on my AMP pages, the inputs are not signed like they usually are with pages that run the foxycart HMAC validation script.
  • fc_adamfc_adam FoxyCart Team
    @crystalimagesinc,

    Oh sorry about that, I didn't realise that AMP handled form POST's differently. It looks like you need to include a component on your page and adjust the form set up slightly as shown on this page for POST's: https://www.ampproject.org/docs/reference/components/amp-form

    That said - to be able to send the customer on to the cart, it requires a header in the response which we don't currently support - but I've ticketed as something for us to look at moving forward.

    For now - you could instead switch the form to a method of GET, and leave the cart URL as the form's target, and also specify an attribute of target="_top" on the form element. That should hopefully get it loading the form for the cart.

    You mentioned about the link/form signing not being present on the AMP page. If link/form signing is enabled for your site, you will need to make sure that the forms are correctly signed. If you've changed the form action attribute to be instead action-xhr, that would cause our link/form signing script to ignore that particular form. Switching back to the GET approach I mentioned above should get that working again.
Sign In or Register to comment.