How to pass a value from the client to the cart line item on Add To Cart click? (Shopify Hydrogen)

Question

I'm looking for a solution example based on npm create @shopify/hydrogen@latest scaffolded project.

I want to pass a uniquely generated attribute from the client to the cart line item. In the end it should look like this:

I'm able to generate a random id on the server side in cart.tsx like this:

...
  switch (action) {
    case CartForm.ACTIONS.LinesAdd:
      // Add a unique attribute to each line being added to the cart
      const linesWithUniqueId = inputs.lines.map((line: any) => ({
        ...line,
        attributes: [
          ...(line.attributes || []),
          {
            key: "someUniqueId",
            value: `${someUniqueId }-${new Date().getTime()}`, // Unique identifier based on timestamp
          },
        ],
      }));
      result = await cart.addLines(linesWithUniqueId);
      break;
...

I can see that it's possible and Shopify treats this as a unique line item which is exactly what I need. Problem is that I'm struggling to pass it over from the client. In my application there's a requirement due to some libraries we use to generate an ID on the client side and pass it over to the shopping cart item, it needs to happen on Add To Cart button click.

Code for generating this ID is below, it's essentially an API call

const someUniqueId = await session.createUniqueId();

My goal is to change the Shopify Hydrogen App code so that when the user clicks Add To Cart, the API call is fired on the client side, once the ID is returned, the line item should be added to the cart with the returned ID as an attribute.

So far, I tried changing the <AddToCartButton/> component by adding a useEffect hook that intercepts fetcher.state and overrides lines object. This has somewhat worked but but doesn't work every time. I believe I could improve my solution but that seems overengineered. I believe there must be a 'cleaner' way to achieve this.

Jason Loeve · Accepted Answer · 2025-05-15 00:50:10Z

Not sure if you solved this yet, i wouldnt change your cart actions, you can pass line attributes via the demo add to cart component like this

<AddToCartButton
    product={product}
    lines={[
      {
        merchandiseId: selectedVariant.id,
        quantity: 1,
        attributes: 'RANDOMGENID',
      },
    ]}
>
    Add To Bag
</AddToCartButton>

If multiple lines are added in a session the will all have the same id so what be unique ? not sure if this is what you looking for ? if this is what youre wanting then why not give the cart an attribute and not every product, also unsure if this data would possibly be persistent, if you trying to track products added to cart in a single session, that attribute may presist and remain unchanged, if a user starts a new session you may have an order completed with multiple products having different session id's ?

Collectives™ on Stack Overflow

How to pass a value from the client to the cart line item on Add To Cart click? (Shopify Hydrogen)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related