Liquid, JavaScript, themes, sales channels
Hi,
I've been trying to add cart attributes to the checkout with Dawn, the Shopify Online Store 2.0 theme. However, no matter what I try, it will not save them.
The docs here and here suggest that it is still possible to add attributes directly to the checkout, as long as they are within the <form> tags. However, in the Dawn theme, the closing </form> tag is above the cart__footer, which contains the order notes and check out button.
If you add the cart attribute code into the <form> it throws an error on the check out validation. The order notes work fine, even though they are not within the <form> tags:
{%- if section.settings.show_cart_note -%}
<div class="cart-attribute__field field">
<input required class="required field__input " id="cardesc" type="text" name="attributes[CarDesc]" value="{{ cart.attributes["CarDesc"] }}">
<label class="field__label" for="cardesc">Car Description</label>
</div>
<cart-note class="cart__note field">
<label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
<textarea class="text-area text-area--resize-vertical field__input" name="note" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
</cart-note>
{%- endif -%}
I'm a bit unsure what else to try! Any ideas would be gratefully received!
Thanks,
Ben
Hi,
I'm very curious if you got it working. I'm having the same issue that the values are coming through. Contacted Shopify for support but they just referred to the pages you mentioned as well.
I found the answer. You need to add the following attribute to the input field:
form="cart"
The generator apparently hasn't be updated to do this automatically.
As far as I am aware, the easiest way to achieve this is using line item properties. The added data will also show up on the checkout page
Here's a tool that helps you generating and adding line item properties to your theme:
https://ui-elements-generator.myshopify.com/pages/line-item-property
Kind regards,
Diego
I managed to do it in the end, not with the exact layout as I wanted but it worked. The line items wouldn't have worked here unfortunately. But in the end it worked but placing the code in the item part instead of the footer.
Thanks, yes, have used Line item properties in the past, but as they are attached directly to each product it doesn't work in the way I need it to. For the previous version of the themes, you could add cart attributes like the ones listed in a tutorial here. However, it seems that the functionality isn't the same for the Online Store 2.0 themes.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024