Gift cards - Recipients & Deliver dates

[emiliekmartinez]

Last summer the gift card functionality was rolled out in most all non-headless themes. Does this exist via the Storefront API? I can't seem to find it anywhere, and I'd love to implement it if it does!

https://shopify.dev/docs/themes/product-merchandising/gift-cards

[blittle]

@emiliekmartinez what are you trying to accomplish?

[emiliekmartinez]

Using something like this? https://shopify.dev/docs/custom-storefronts/hydrogen/cart/notes

[blittle]

They are line item properties, so probably like: https://shopify.dev/docs/custom-storefronts/hydrogen/cart/attributes

[emiliekmartinez]

Hey @blittle,

I was trying to implement this and it's failing when I try to pass through the data, but when I try to pass the true value it fails.

const attributes = [
    {key: 'Recipient Email', value: giftData.recipient_email}, 
    {key: 'Recipient Name', value: giftData.recipient_name},
    {key: 'Message', value: giftData.message},
    {key: 'Send On', value: giftData.send_on},
    {key: '__shopify_send_gift_card_to_recipient', value: true}

Everything comes through aside from the __shopify_send_gift_card_to_recipient. When we try to pass that, we're getting a weird error. Any recs? I'm sure I'm missing something 🙈

[emiliekmartinez]

For anyone else watching this, the answer is to pass on into the field 🙈

{key: '__shopify_send_gift_card_to_recipient', value: 'on'}

These docs should be updated: https://shopify.dev/docs/themes/product-merchandising/gift-cards

[araskavakli]

They are line item properties, so probably like: https://shopify.dev/docs/custom-storefronts/hydrogen/cart/attributes

I'm experiencing a similar problem. I'm trying to set cart line item attributes for the gift card field.
This is the line item I'm trying to add to the cart:

  {
    merchandiseId: "gid://shopify/ProductVariant/46254082883741",
    quantity: 1,
    attributes: [
      {
        key: "Recipient Name",
        value: "Test User"
      },
      {
        key: "Recipient Email",
        value: "test@test.com"
      },
      {
        key: "Message",
        value: "Test Message"
      },
      {
        key: "__shopify_send_gift_card_to_recipient",
        value: "on"
      }
    ]
  }

So{key: '__shopify_send_gift_card_to_recipient', value: 'on'} returns this as response:

When I try it with {key: '__shopify_send_gift_card_to_recipient', value: true} it throws the following error:

@emiliekmartinez said she could solve it with value: 'on' I'm not able to. Is this at all possible with the Storefront API?

[larister]

Hey folks, bit late to the party on this one but @araskavakli I just noticed that you have "Recipient Name" and "Recipient Email" specified as the keys; they need to be "Recipient name" and "Recipient email" - the casing is significant.

[araskavakli]

Hey folks, bit late to the party on this one but @araskavakli I just noticed that you have "Recipient Name" and "Recipient Email" specified as the keys; they need to be "Recipient name" and "Recipient email" - the casing is significant.

Thanks, yes that's also how I solved it :) Should have updated the thread.

[meisbellajack]

I ran into this same wall recently. The Storefront API is still lagging behind the native Liquid implementation for those specific gift card recipient fields.

If you don't want to wait for a Shopify update, a solid workaround is to handle these as Line Item Properties. I actually use an app I've been working on called Misk Smart Product Options to solve this. It lets you add Recipient Name and Delivery Date (with a date picker) as custom fields right on the product page.

The best part is that it passes that data into the order notes/properties automatically, which works perfectly with the Storefront API without needing a custom headless schema. Might save you the headache of building a custom metadata solution from scratch!