Adding line items with custom attributes / line item properties

[napter]

The JS buy SDK has a way to add custom attributes. I cannot find an equivalent way to add those to line items in the cart when using the JS buy button. I have tried to add them items to the cart manually following the instructions linked above - but cannot find any documentation on how to get the checkout ID. "client.checkout.id" is unassigned.

`

	ui.createComponent('product', {
		id: 2461692624960,
		node: document.getElementById('shopifynode'),
		options: {
			product: {
			buttonDestination: 'cart',
			},
			cart: {
				startOpen: true,
				'events': {
				}
			}
		}
	}).then((c) => {

    const lineItem = {variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yMjkyOTcwMjU4NDM4NA==', quantity: 1};
    client.checkout.addLineItems(client.checkout.id, [lineItem]).then((updatedCheckout) => {
      //checkoutWindow.location = updatedCheckout.webUrl;
	  console.log(checkout.lineItems);
    });
	}

`

[napter]

I have looked through the code and It does not appear that there is any way to add custom attributes using the buy button SDK. Can this be added? I have found a way to update the cart using ui.components.cart[0]..props.client.checkout.addLineItems(cart.model.id, [lineItem]) but then the cart doesn't refresh.

[rebeccajfriedman]

We are tracking this issue in our backlog. We will follow up here when we have an update.

[hyunilmmt]

This would be a great feature to add to the Buy Button.

[Dave84c]

In the meantime, if it's urgent, you can grab it here. Made a fork with custom attributes working. See index files for examples: https://github.com/Dave84c/buy-button-js

[reigelgallarde]

any update on this?

[mizujin]

In the meantime, if it's urgent, you can grab it here. Made a fork with custom attributes working. See index files for examples: https://github.com/Dave84c/buy-button-js

Hello, I did try this, but needed to add a similar config inside a modalProduct object, unfortunately it doesn't appear in the cart. Could you explain how the field is added as a lineItem ?

@rebeccajfriedman Is there any ETA concerning this ? I believe It's quite necessary to add this feature to Buy Button.

[arobbins]

Would love to see this as well!

[hunterwebsiteservices]

Really needing this as well.

[jbwhaley]

Yes, please. This is a huge no-brainer.

[hunterwebsiteservices]

I have been able to use Dave84c's work to build my own solution. Really odd that the Shopify backend supports this, but the buy-button-js code is lacking a few lines of code to pass the data through to the backend.

Here is a link to the compiled JS file to embed on your project. Use it instead of the regular JS file provided by Shopify:
https://gist.github.com/feltoar/14125f1138fc44deb4217fc416c3a35d

That won't be enough to get it to work. Since you need to edit your template HTML. However at least you won't need to do any compiling.

So to edit your template HTML, just follow the Shopify Buy Now Button documentation:
http://shopify.github.io/buy-button-js/advanced/

For example inside the createComponent object.

options: {
	lineItem: {
		templates: {
			customAttributes: '{{#data.customAttributes}}<div><small>{{key}}: {{value}}</small></div>{{/data.customAttributes}}'
		},
		contents: {
			customAttributes: true
		},
		order: [
			'image',
			'title',
			'variantTitle',
			'customAttributes',
			'price',
			'priceWithDiscounts',
			'quantity',
		],
	},
	product: {
		contents: {
			properties: true,
		},
		templates: {
			properties: '<input type="text" id="engraving" name="properties[Engraving]" />'
		},
		order: [
			'img',
			'title',
			'price',
			'quantity',
			'options',
			'properties',
			'button',
		],
	},
},

What this code does is it adds a new template called "properties" to the product template. Customise the HTML as needed. It will look strange without additional styles. Plus you will likely want to add a label, or change the input to select.

Make sure the form fields are all name="properties[PropertyName]" as this is what the compiled code looks for. It only looks for properties.

The second step changes the cart template shows the properties. {{#data.customAttributes}} is a Mustache.js loop that goes through all of the properties[] on the previous template. So you can add as many as you want.

[gracinwjohnson]

We tried this method but kept receiving the error "ShopifyBuy.UI.onReady is not a function." Did you work off our Dave84c's repository to create this?

Desperate to get something to work - it's so frustrating that Shopify doesn't allow an easier way.

[hunterwebsiteservices]

@gracinwjohnson It sounds like your code is not complete. The code I provided is only what goes into the options parameter for ui.createComponent. You still need to do all the other code as per Shopify documentation. Which will be different for every store. See their example file: https://github.com/Shopify/buy-button-js/blob/master/index.example.html

[gracinwjohnson]

I was able to customize the line items in the product page. However, now I'm needing to pass those input to the cart view and I want it to be passed to the backend for order details, emails, etc.

[hunterwebsiteservices]

The code provided should show line item properties in the cart as well as the Shopify back end.

I am in the middle of building a solution for a client, and just discovered there is an extra step to get line item properties to also appear in the email templates. I have yet to do it yet. But these instructions should work: https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503#toc-hId-287417639

But you will need the buy now button successfully adding line item properties to the cart and order first before bothering to get them appearing in emails.