Adding line items with custom attributes / line item properties

napter commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

hyunilmmt commented 5 years ago

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

Dave84c commented 5 years ago

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 commented 4 years ago

any update on this?

mizujin commented 4 years ago

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 commented 4 years ago

Would love to see this as well!

hunterwebsiteservices commented 4 years ago

Really needing this as well.

jbwhaley commented 4 years ago

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

hunterwebsiteservices commented 4 years ago

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.