Shopify themes, liquid, logos, and UX
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
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
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!
Thank you!
Is this solution still valid in 2024 or do cart attributes now work for all payment methods?
Did you try the solution from above with onblur="this.form.submit();"?
In case payment by Google Pay, PayPal, .... doesn't get rid of the custom cart note, I think this should still work.
But I couldn't figure out yet which mechanism they use for the custom cart note and whether it's still the onblur thing.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024