Shopify Question posted in
The Shopify help center can be found here.

Uncaught TypeError: Cannot read property 'checkoutLineItemsAdd' of undefined in shopify-buy library

I’m using The Shopify Buy plugin in my react-native application for guest checkout

But I’m facing the issue (see the image below)

issue

I also refered https://github.com/Shopify/js-buy-sdk/issues/518 for solution but I dont have this type of problem in my code.

Please any help is appreciated.

My Code 

import Client from 'shopify-buy';

const client = Client.buildClient({
    storefrontAccessToken: my_token,
    domain: my_domain
});
export default class App extends Component {
   componentWillMount() {
      client.checkout.create().then((res) => {
         this.setState({
            checkout: res,
         });
      });
  }
  _handleAddToBagBtn = (variantID) => {  
      const checkoutId = this.state.checkout.id;  
      const lineItemsToAdd = [{'variantID': variantID, quantity: 1}];  
      client.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) => { 
        console.warn(checkout.lineItems);  
     });  
  }
}
render() {
   return (
      <TouchableOpacity onPress={() => this._handleAddToBagBtn(variantID)} >Click Here</TouchableOpacity>
   );
}
Tags:

2

Answers


  1. 0

    What seems to me is that Client.buildClient() is returning a promise. You should do something like this:

    const client = Client.buildClient({
    storefrontAccessToken: my_token,
    domain: my_domain
})
.then((res) => {
  console.log(res);
})
.catch((err) => {
  console.log(err);
})

    You can check if you are getting a valid response or an error and go ahead accordingly.

    Login or Signup to reply.
  2. 0

    I was facing this problem today using the Storefont API, but solved it as follows.

    Instead of using the variantId numeric value directly, you need to use a Base64 encoded string of the graphql_api_id property which is associated with the variant.

    Unencoded, these look like this: gid://shopify/ProductVariant/12434084921391. You can get these from product objects, but you can also create them directly from your numeric variantId.

    In your code, change this function:

    _handleAddToBagBtn = (variantId) => {  
  const checkoutId = this.state.checkout.id;
  const lineItemsToAdd = [{
    variantId: window.btoa(`gid://shopify/ProductVariant/${variantId}`),
    quantity: 1
  }];  
  client.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) = { 
    console.warn(checkout.lineItems);  
 });

    }

    Note I also changed variantID to variantId as this is the identifier used by Shopify, not variantID.

    In my case, this got rid of the error and returned a GraphQL model. Hope that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search