Custom cart attributes issues with Apple Pay, Google Pay, Shop Pay

spingary
Visitor
2 0 2

We use custom cart attributes for one of my clients. They're very important.  We found out that if a customer uses Apple Pay, Google Pay, or Shop Pay, the cart attributes do not come through at all.

The problem is that when users click on one of those quick payment buttons, the cart form is not submitted like if they clicked on the standard Check Out button.

That means if the user fills out or edits the custom cart attributes, they were never saved first.

The "order notes" come through fine, because if you watch carefully, any changes to that field triggers a form submit action (you can see the page update as soon as you leave that field).

The solution, we found, is to mimmic the order notes field and trigger a form update whenever the custom cart attributes change, like this:

 

<input onblur="this.form.submit();" id="my-custom-cart-attribute-1" type="text" name="attributes[My-Custom-Cart-Attribute-1]" value="{{ cart.attributes["My-Custom-Cart-Attribute-1"] }}">

 

 

That leaves one more problem. If the user does not change any of your custom cart attributes, then our form.submit() is not issued.  This might be a problem if you depend on the default custom cart attributes and their respective default values to be added to the order.  To get those default custom cart attributes to always come through, we add this JS hack to cart-template.liquid which I'm not too crazy about but it works:

 

{%- if cart.attributes["My-Custom-Cart-Attribute-1"] == blank -%}
<script>
  window.onload = function(e) {
    console.log('Submitting cart form for first and only time ');    
    document.querySelectorAll('form.cart')[0].submit();
  }
</script>
{%- endif -%}

 

The idea is that if the custom form attribute has not been set, then submit the form right away on page load so they are registered.  USE THIS WITH CAUTION and test or you might suffer an infinite loop.

I hope Shopify fixes the problem with the quick-pay buttons - the form should be submitted first those button are clicked to register those custom cart attributes.  Looks like they knew about the problem so they force the order notes to save on change. But that seems to be a dirty / unfinished fix.

Gary

Replies 3 (3)

Fidelma
Visitor
2 0 0

This is really useful thank you. 

I have the same problem and in fact even the 'order notes' do not always come through.

My knowledge of coding is pretty basic - could you tell me where the first bit of code you refer to above is/should go?

Also - have you come across any updates of fixes since reporting this?

Many thanks

Fidelma

spingary
Visitor
2 0 2

You can add the code to your custom attribute INPUT fields. The code to add is simply:

onblur="this.form.submit();"

 

So if you have a custom cart attribute like this (most likely in cart-liquid.template):

<input id="my-custom-attribute" type="text" name="attributes[My-Custom-Attribute]" value="{{ cart.attributes["My-Custom-Attribute"] }}"  >

 

then you would change to be like this:

<input id="my-custom-attribute" type="text" name="attributes[My-Custom-Attribute]" value="{{ cart.attributes["My-Custom-Attribute"] }}" onblur="this.form.submit();" >

 

I hope that helps!

Fidelma
Visitor
2 0 0

Thank you!