Cart attributes on Dawn checkout

beneb
Visitor
2 0 1

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

 

Replies 5 (5)

Vulpis
New Member
4 0 0

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. 

lpaulsen
Tourist
3 0 2

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.

 

See: https://community.shopify.com/c/online-store-2-0/dawn-theme-add-custom-fields-in-cart-page-and-show-...

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Vulpis
New Member
4 0 0

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.

beneb
Visitor
2 0 1

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.