Re: How do I capture Cart Line Item Properties using the Storefront API?

Solved

How do I capture Cart Line Item Properties using the Storefront API?

WadeA
Tourist
5 1 2

I am working on a headless redesign of a client's store. 


The current Liquid Cart Form is capturing custom data using line_item.properties . These properties get displayed on both the cart screen and the checkout page

I do not see line_item.properties listed for the Cart or Checkout objects in the Storefront API. However both of these objects allow adding custom attributes to Checkout and Cart line items. 

Are custom attributes the Storefront API-way of capturing line_item properties?

I built a page that captured custom attributes in the cart, and those attributes are viewable with the Order object in the Shopify Admin. 


However I did not see the custom attributes displayed on the Checkout page, but  line_item.properties do appear to be displayed on the Checkout page. 

Is there a way to make custom attributes appear on the Checkout page, without the store being on the Plus plan and having a custom checkout template?

 

Thank You

Accepted Solution (1)
WadeA
Tourist
5 1 2

This is an accepted solution.

I was adding my  attributes to the Cart and not the Cart Line Items. Once I added attributes to the Cart Lines, they showed up on the checkout page underneath the Product Variant name

View solution in original post

Replies 7 (7)

WadeA
Tourist
5 1 2

After working on my test app some more, it seems like I misread the API docs and the custom attributes are applied to the cart as a whole and not the individual cart line items. I was hopping to find a way to attach custom information to each item in the cart, much like you can do with custom properties in the liquid cart. The example return data is showing custom attributes for each line items. So I must be writing the mutation wrong.

WadeA
Tourist
5 1 2

This is an accepted solution.

I was adding my  attributes to the Cart and not the Cart Line Items. Once I added attributes to the Cart Lines, they showed up on the checkout page underneath the Product Variant name

benbr3
Visitor
2 0 0

@WadeA  Would you be so kind and share how you did this?

I'm trying to add a custom property to products (that is not a variant/option) and display it in the cart and checkout. I can't find a way to add this to the items in the cart object.

Any help hugely appreciated.

HunkyBill
Shopify Partner
4853 60 562

A cart in Shopify has attributes. cart attributes. An attribute is a key:value pair. You can easily POST to the cart with these key:values and store them for later use with the order, since in the order they show up nicely as order attributes. So unlike using the line item properties of the product, which you said you do not want to use, just use the cart object itself.

Custom Shopify Apps built just for you! [email protected] http://www.resistorsoftware.com
benbr3
Visitor
2 0 0

@HunkyBill as @WadeA mentions:

I was hopping to find a way to attach custom information to each item in the cart, much like you can do with custom properties in the liquid cart

This is what's needed, it seems like cart attributes apply to the cart as a whole, right? So it does't sound like it is what's needed, but could be wrong.
In my mind it'll be something like:

 

cart: [
   {
      handle: "the-original-kit",
      id: "xxxx",
      options:  {Color: "Dark", Frame: "Frame" },
      title: "The Original Kit",
      variantPrice: "59.9",
      variantQuantity: 1,
      variantTitle: "Dark / Frame",
      lineItem: {
            label: "engraving"
            value: "Jim"
      }
   }
]

 

Don't know if would be like that, but basically asking for a way to pass a custom option for a certain product (e.g. "your name", "gift message", etc) with the Storefront API

HunkyBill
Shopify Partner
4853 60 562

I setup custom engraving for products in 2006, 2007, and on. Earliest hacks on Shopify. Once Shopify introduced line item properties, it became rub-a-dub-dub three men in a tub easy. Just do that. It is a no brainer. Capture an engraving data set, assign it the line item you send to the cart, and you're good to go. This pattern applies to capturing dimensions for items that have unit prices and lengths and widths, or initials on a monogram for a baby bottle, or just about any kind of collected data. Has zero to do with Storefront API, this is built in to Shopify. When you POST an item to cart, those captured data points are saved. You can do a lot with that pattern, including connecting different products. For example, selling a picture frame, with a custom matte, color, and size of border, and whether to use anti-reflective glass or not. The sky is the limit.

LINE ITEM PROPERTIES FTW... easiest and best update Shopify gave us way back.

Custom Shopify Apps built just for you! [email protected] http://www.resistorsoftware.com
WadeA
Tourist
5 1 2

@benbr3 I think your code example is similar to mine.  My code is from a hardcoded example I was building in NuxtJS. I am passing a variantID, quantity, and a custom attributes to the AddToCart mutation.  Those line item attributes show up on both the cart and checkout page below the product.

You can also pass cart level name/value pair attributes. That is what I was doing wrong with my first test.

 

 

 

   const myCartInput = {
            lines: [
                {
                    quantity: 1,
                    merchandiseId: variantId,
                    attributes: [
                        {
                            key: 'line-item-attribute',
                            value: 'this is the line item attribute'
                        }
                    ]
                }
            ],
            attributes: [{
                key: 'cart_attribute',
                value: 'this is my cart attribute',
            }],
        };
        const shopifyClient = this.app.apolloProvider.clients.shopify;
        const result = await shopifyClient.mutate({ 
            mutation: AddToCart, 
            variables: {
                cartInput: myCartInput,
            },
        });