How can I add cart attributes to Dawn checkout in Shopify 2.0?

[beneb]

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

[Vulpis]

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]

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]

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

[Vulpis]

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]

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. 

[DB160]

Adding a checkbox cart attribute to Dawn 15.0.0

I have recently upgraded the old 1.0 theme of our store to Dawn 15.0.0. While testing it appeared sometimes the cart attributes would be visisble on the order page under Notes - Additional information, but mainly the info was missing. After several test orders it was unclear what specific actions would result in the cart attributes appearing, or not. Looking at cart.json would also show the cart attributes appearing sometimes and others times not.

This is what I did to fix it.

1. Shopify says certain settings are not compatible with cart attributes. I switched off dynamic cart buttons (setting available in theme customiser product settings page > Buy Buttons. Also in theme settings > cart > cart type  selected pop up notification or page. Shopify says they do not work for Drawer.

Code for adding cart attribute - i added mine to a custom section that I can add or remove as necessary but you can add them to main-cart-items.liquid or main-cart-footer.liquid. remember to include form="cart" to mak it work

 <cart-attibutes-checkbox class="checkbox-wrapper"> 
<div class="cart-attribute__field>
<input type="hidden" name="attributes[You Attribute Name]" value="No">
<input type="checkbox" name="attributes[You Attribute Name]" value="Yes"{% if cart.attributes["You Attribute Name"] == "Yes" %} checked{% endif %} form="cart">
<label>Attribute Label</label>
</div>
</cart-attibutes-checkbox>

3. I added the following code to the bottom of  assets > cart.js to make cart-attibutes-checkbox a javascript component. This adds an event lister to the checkboxes and updates the cart via cart/update.js. (see https://shopify.dev/docs/api/ajax/reference/cart#post-locale-cart-update-js) This has the advantage of updating the settings if the checkbox us unchecked later.

class CartAttibutesCheckbox extends HTMLElement {
constructor() {
super();

this.addEventListener('change', (event) => {
event.preventDefault();
const checkbox = this.querySelector('input[type="checkbox"]');
const attributeDefault = this.querySelector('input[type="hidden"]').value;

var formData = new FormData();

if (checkbox.checked) {
formData.append(checkbox.name, checkbox.value);
} else {
formData.append(checkbox.name, attributeDefault);
}

fetch(window.Shopify.routes.root + 'cart/update.js', {
method: 'POST',
body: formData
})

});
}
}

customElements.define('cart-attibutes-checkbox', CartAttibutesCheckbox);

I am not a javascript wizz so I am sure the above could be simplified if someone wants to have a go. It would also be fairly straight forward to adapt the above for other input fields. If I get time I may have a look at creating a master cart-attribute component that could work with any input type.

I hpe this helps anyone having problems with cart attributes in the 2.0 themes.

Cheers