App Bridge - Add line item properties to line item failure

Solved
Highlighted
Shopify Partner
10 3 7

I'm attempting to make use of the app bridge functionality in the latest POS version for my app and I'm seeing some strange behavior.

 

Steps that I'm taking.

- Add customer to cart (works great)

protected setCustomer = (data: CustomerPayload): void => {
  this.cart.dispatch(Cart.Action.SET_CUSTOMER, { data });
}

- Add a list of line items to the cart (works great)

protected addLineItemToCart = (data: AddLineItemData): void => {
  this.cart.dispatch(Cart.Action.ADD_LINE_ITEM, { data });
}

- For each line item add custom properties to the line item (randomly adds properties to one or more line items but does not consistently add the properties to all line items)

protected addLineItemProperties = (data: CartPropertiesData, index?: number): void => {
  this.cart.dispatch(Cart.Action.SET_LINE_ITEM_PROPERTIES, { index, data });
}

I am also subscribed to the cart updates and the cart errors. The updates show me that the customer and line items are all added in the correct order but the properties rarely make it on to all the line items and are not throwing any errors.

onCartUpdated = async (payload) => {
  console.log("UPDATED CART: ", payload);
  this.setState({cart: payload});
}

onCartError = (e) => {
  console.error(e);
  this.flashToast("Failed to accurately update cart: ", e);
}

I've tried calling these dispatch functions with timeouts, and closures to ensure that the index is correct and the line item has been added correctly and am at a bit of a loss as to why the properties call seems to have inconsistent behavior. Would greatly appreciate if anyone has insight into this issue.

The code where these dispatch functions are being called is below:

try {
  this.props.shopify.setCustomer({
    id: selectedCustomer.shopifyCustomerId,
    email: selectedCustomer.email,
    firstName: selectedCustomer.firstName,
    lastName: selectedCustomer.lastName,
  });
} catch(err) {
  window.bugsnag.logInfo(`Failed to add customer to cart: ${err}.`);
  this.props.shopify.flashToast(`Failed to add customer to cart. ${JSON.stringify(err)}`,5000, true);
}

try {
  // For each line item in our data, queue it for addition to cart
  for (let i = 0; i < items.length; i++) {
    ((index) => {
      this.props.shopify.addLineItemToCart(items[index]);
      setTimeout(() => this.props.shopify.addLineItemProperties(properties, index), 3000);
    })(i);
  }
} catch(err) {
  window.bugsnag.logInfo(`Failed to add line items to cart: ${err}.`);
  this.props.shopify.flashToast("Failed to add line items to cart.", 5000, true);
}
0 Likes
Highlighted
Shopify Partner
10 3 7

This is an accepted solution.

Duplicate but responding here for completion.

 

So I believe I was able to solve this issue by doing a rolling release of the events even by just 1ms. Seems the App Bridge event receiver was throttling or skipping events if they came in too quick succession. Using the following code snippet for emitting events seems to have made the cart update reliably. Would love to get some feed back from an actual Shopify developer to confirm this is reliable.

 

let operations: Function[] = []
items.forEach((item, i) => {
  operations.push(() => this.props.shopify.addLineItemToCart(item));
  operations.push(() => this.props.shopify.addLineItemProperties(properties, i));
});

// For each line item in our data, queue it for addition to cart
await new Promise((resolve, reject) => {
  const timer = setInterval(() => {
    const operation = operations.shift();
    if(operation) {
      operation();
    } else {
      clearInterval(timer);
      resolve();
    }
  }, 1);
});

 

1 Like