Js-buy-sdk: Custom line item attributes

[manV]

Is there any way to pass custom line item attributes, like we can pass attributes array in query when using permalinks?

[minasmart]

I'm not sure what you mean. Are you referring to line item properties? Could you show me an example of the type of permalink you're referring to?

[manV]

for example https://someshop.myshopify.com/cart/11759080577:1?attributes[carving]=demo
this permalink passes carving attribute along with order that will be available in the order admin page. I am not sure exactly what this feature is called though.

[minasmart]

We don't have a mechanism to apply those attributes through the SDK, but checkoutUrl is a checkout permalink, and all standard shopify rules apply to that, so you can definitely apply whatever query or extra params you like.

Making the checkoutUrl function have more options to support all of Shopify's capabilities is definitely on our road map, we just haven't found a clean way to do it yet.

[manV]

Good to know that all the features will be available in the Sdk, hopefully someday I will be able to close my shopify frontend and sell only through other channels. :smiley:

[dictions]

@minasmart regarding the checkout URL, is there any documentation available for that /cart endpoint?

I know the SDK doesn't support this yet, but are you implying that it can be done on the Buy Button endpoint with the query itself? The reason I ask is that I'm trying to implement a subscription page (that uses a few meta properties) without having to go through the /cart/add.js endpoint provided by the AJAX API.

Edit: I'm trying to avoid this suggestion here.

[minasmart]

The link returned by checkoutUrl is a cart permalink, like documented here: https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart

I'm not sure this doc tells you everything you can attach to a checkout, but if you scroll through the examples, you can see a lot of what's available.

Let me know if this helps!

[dictions]

@minasmart ah cool! Thanks! I think I need line item properties, which I see you're working on already.

Final question, can line item properties be changed via that cart permalink? Sorry this Q became unrelated to the thread 😶

[manV]

"Cart attributes" and "line item properties" seems to be different things. "Cart attributes" that we pass through permalink applies to the whole order while "line item properties" applies to individual items in the order. I couldn't find a way to pass "line item properties" through permalink though.

[minasmart]

That's correct. Getting properties in through permalinks is roadmapped. The code actually exists in the SDK, but our permalinks don't support it yet. I'll keep this open and update when that changes.

[tom-james-watson]

Hi @minasmart - do you have some kind of ETA on line items properties via permalinks? The project I am building is dependent on this functionality.

Alternatively - is it possible to make cart attributes be visible to the user on the actual checkout page? If I limit purchases to 1 item and this is possible, then this could be a workaround for now. Or some other property I can pass on the checkoutUrl to set a name or description, for example?

Thanks!

[minasmart]

It looks like there is a way to show those extra attributes on the cart/checkout: https://help.shopify.com/themes/customization/cart/get-more-information-with-cart-attributes

As for line item properties, we're probably about a month or two out.

[awongh]

hi, any word on this feature? thanks.

[minasmart]

At the moment no. We're working out a timeline right now on getting a new checkout API out that supports this. I'll update here when we know more. Sorry about that.

[manV]

Hi @minasmart, Sorry to bother you with this again, but any updates on this?

[iamgoddog]

Hi @minasmart, this feature would help my clients solution alot. Any word on when you're planning on releasing this feature?

[minasmart]

I can't specify exact release dates, but hopefully some time in the first few months of the new year 😄

[felixLam]

Hey there. It's the new year. Any updates?

[minasmart]

@felixLam None, other than this will be a feature available in the first few months of this year.

[Andriy-Kulak]

@minasmart Are there any other way to pass custom line item properties via javascript SDK to the checkout Page if permalinks is not an option?

I am creating an app where a person will be able to uniquely customize their product using their uploaded images. I need to pass the customizations to checkout and be able to access it once the person makes a purchase.

[youanden]

@minasmart Just checking in to see if there is any update. I'm considering implementing image upload through an alternative method (file picker api), but it would be nice if this could be supported at the sdk level.

[Dynamo6]

@Andriy-Kulak This may not help in your situation, but I'm using the attributes parameter added to the checkout URL to pass custom data for the order as a whole.

e.g. https://checkout.shopify.com/xxx/checkouts/xxx?_fd=0&access_token=xxx&attributes[Name]=mike&attributes[Message]=Happy+Birthday

Its not ideal but its a viable workaround (in my case at least) until support for customer order line properties arrives.

[minasmart]

This feature is available in the v1.0alpha release. If you npm install shopify-buy@alpha, you'll get this functionality. I recommend checking out the README.md on that branch to get started. There is also a migration guide that goes over the differences in this new version. This build is an alpha, not due to code quality, but because there may still be some changes to the SDK's interface. That said, the API it's connected to is fairly stable, so it should work for a while.

As for image uploads, I'm not sure what role they would play in the SDK? Line item attributes support key/value pairs and text data. There's no support to render out an image, even if it's a data uri, in the admin.

[awongh]

@minasmart can you be more specific about what parts of the interface you expect to change in beta and/or production code?

I'm specifically only interested in fetchCart, createCart, fetchProduct and addLineItems

[agos]

@minasmart I tried implementing this today but it resulted in an opaque server error. I opened a new relevant issue (#362), any feedback would be very appreciated.

[jamiechong]

@minasmart Can I use shopify-buy@alpha on the client side? Or is this only possible server-side in a NodeJS app?

If I can use client side (in the browser), how do I build for dist?

Update: I just need a way to add variants to the cart _and_ specify custom properties like this:

      data: {
        properties: {
          Country: 'Canada     CAN'
        },
        id: 1233456789,
        quantity: 1
      },

[Dynamo6]

@jamiechong We've used it solely on the client side. Have a look at the docs for examples - https://shopify.github.io/js-buy-sdk/

To add to a variant to the cart I'm doing the following:

objCart.createLineItemsFromVariants({
variant: 123456789,
quantity: 1,
properties: { 'Title' : 'Test' , 'Message' : 'Hi' }
})

[jamiechong]

@Dynamo6 I tried this, but it doesn't add the properties.

[agos]

the correct syntax would be:

client.addLineItems(cart.id, [{
  variantId: 123456789,
  quantity: 1,
  customAttributes: [{
    key: 'Country',
    value: 'Canada    CAN'
  }]
}]);

this is not (yet) documented as far as I know, but should definitely work.
Custom attributes will be visible inside the order detail after the order is submitted.

[Dynamo6]

Thanks @agos - I've not actually upgraded to the 1.0a version yet but I will try your approach when I do

[juniorheptachords]

Hi there,

I'm facing the exact same problem.

I'm doing this:

shopClient.fetchProduct(1234).then(function (fetchedProduct) {
    product = fetchedProduct;
    variant = product.variants[0];

    shopUi.components.cart[0].model.createLineItemsFromVariants({ variant: variant, quantity: 1, 
    properties: {"title":"Un super titre", "message":"YOUPI"} }).then(function (cart) {
      shopUi.components.cart[0].view.render();
      shopUi.components.cart[0].toggles.forEach(function (toggle) {
        return toggle.view.render();
      });
      shopUi.components.cart[0].view.setFocus();
      return cart;
    });
});

If I inspect the items in the cart from the console, I can see the properties are correctly added to it. But then I don't see any of them into the Checkout, Shopify, and neither also in the Webhook order/create.

Also I tried with your code @agos but I had the same result...

Am I missing something?

[agos]

@christophejourdan some questions

• what version of the sdk are you using?
• what is the code for the createLineItemsFromVariants function? it's hard to tell
• what is the output of the grapql call?

[juniorheptachords]

Thank you for your quick answer!

• I work on an external site where I load the Buy Button SDK from https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js, so right now it is 1.0.76
• createLineItemsFromVariants is a function provided by the SDK, @jamiechong was trying to use it in this thread for example
• I'm not sure what you mean by grapql?

[agos]

@christophejourdan I'm sorry for the misunderstanding! This issue and the respective repository are about the JS Buy SDK, while you are using the Buy Button. While they are similarly named and the Buy Button uses the Buy SDK behind the scenes, I fear that the latest version of the buy button might not be yet using the alpha Buy SDK.

Maybe @minasmart can chime in, but in any case I would encourage you to open a new issue in the relevant repository, where you'll have higher chances of success.

[juniorheptachords]

Ah alright I see, sorry for posting here.
I just created an Issue #391 on the Buy Button repository.

Thank you!

[hamisor]

Hi,

I am looking at the v1.0alpha branch of the JavaScript Buy SDK - My aim is to add the custom attribute in the lineitem with v1.0alpha. However, I noticed that product ids/variant ids/cart ids/etc are no longer integers, but alphanumeric (using GraphQL).

My questions are:
1) Is this a path that Shopify is looking to go down in the future?
2) Will the REST API also move to alphanumeric identifiers?
3) Is there a way to map the current integer-based identifiers to the new alphanumeric types?

Thanks

[youanden]

@hamisor

The alphanumerics in the documentation are really just base64 encoded unique ids (that look kinda like protocol uris).

https://github.com/Shopify/js-buy-sdk/tree/v1.0alpha

Take this ID from the documentation as an example:

Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yOTEwNjAyMjc5Mg==

If you base64 decode it it becomes:

gid://shopify/ProductVariant/29106022792

So to convert your ProductVariants or Products, you would just make a gid string that matches the aforementioned format!

[minasmart]

That's incidental, and I wouldn't rely on being able to exploit that behaviour. There are instances where GIDs contain expiring key values or other instance specific data. ultimately, the GID format is not a public API, and we can not make any guarantees around it. Please only trust the IDs that the API delivers.

The documented way to obtain a GID for a product is using the productByHandle field through curl (I understand this is less than ideal).

ex:

curl -X POST -H "Content-Type: application/graphql" -d 'query { shop { productByHandle(handle: "some-product-handle") { id } } }' "https://<storefront-access-token>@<shop>.myshopify.com/api/graphql.json"

subbing out "some-product-handle", <storefront-access-token> and <shop> for their appropriate values.

[agos]

@minasmart I can understand the point about the format being internal, but isn't there at least a guarantee that existing IDs will not change?

[minasmart]

it depends on the resource. resources with access control like checkouts and customers have ephemeral ids.

[daveadotdev]

Sorry to drag this up again. I posted a solution for this issue here which involves a custom checkout button handler that will serialize cart data and send it to a JS handler on the shopify-hosted cart page, which will then populate the Shopify cart with the custom attributes:

https://github.com/Shopify/js-buy-sdk/issues/238#issuecomment-291759531

[minasmart]

This is fully addressed in the beta and upcoming release of v1 through a completely new APi.

[napter]

@minasmart Hi, can you please link to where this functionality is documented? Is it now possible to add custom attributes to a product (not the whole cart) using the permalink and the buy now SDK? Is it also possible via the buy now button?
Thanks