Checkout UI extension line item is not updating properly

Shopify Apps
1

Recently ive started working on shopify apps rights now i am developing a checkout ui extension which lets the merchant to upsell products in checkout page. Last time ive checked everything was working fine but today iam facing some issues while i add up sell products to the cart line items when i add a product it was supposed to update the cart with updated line items but it works as expected when i click on add product 1st time the second time when i click it was supposed to check whether the product is already added in cart if yes it should only update the quantity + 1 this was working fine last week but today its not working and also if i add a new product its not appended to the line items instead it just simply replaces the product which was previously added.

documentation: https://shopify.dev/apps/checkout/product-offers/add-product-offer

App.jsx

import {useEffect, useState} from 'react';
import {
  BlockStack,
  useShop,
  useCartLines,
  useApplyCartLinesChange,
} from '@shopify/checkout-ui-extensions-react';

import {getRecommendations} from './services/recommendations.service.js';
import Loader from './components/Loader.jsx';
import {Divider, Heading} from '@shopify/checkout-ui-extensions';
import ProductCard from './components/ProductCard.jsx';

function App() {
  const storeUrl = useShop().myshopifyDomain;
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const lineItems = useCartLines();
  const applyCartLinesChange = useApplyCartLinesChange();
  const recommendationLimit = 2;
  console.log(lineItems, 'line items');
  const lineItemsId = lineItems.map((l) =>
    l.merchandise.product.id.substring(
      l.merchandise.product.id.lastIndexOf('/') + 1
    )
  );

  useEffect(async () => {
    try {
      setLoading(true);
      let resp = await getRecommendations(
        lineItemsId.toString(),
        recommendationLimit,
        storeUrl
      );
      setProducts(resp.data);
      setLoading(false);
      console.log(products, 'api response');
    } catch (error) {
      console.error(error);
    }
  }, []);

  if (loading) return
2

Same issue here, even with sample code it is not working for me

3

Hey @skipper17 were you able to find a solution for this? Facing a similar issue :disappointed_face:

4

I can confirm the issue.

const cartLines = useCartLines()
const lineChanger = useApplyCartLinesChange()
useEffect( () => {
  if (!cartLines) return
  lineChanger({
                type: 'removeCartLine',
                id: cartLines [0].id,
                quantity: cartLines [0].quantity
              })}
}, [cartLines])

This will not as expected empty the whole cart, but only run once, because the subscription does not trigger as one would expect.
Maybe @Shopify_77 could give us an Idea of how these two interact.

I tested this and the checkout page updates the contents of the cart, but does not retrigger this.

5

Sooo,
I found the issue and a workaround:

The problem is that it seems they both run in the same step (react hooks) and the update is not set properly this way. My hotfix was to just create a dummy state to handle this:

const cartLines = useCartLines()
const lineChanger = useApplyCartLinesChange()
// we create a dummy State variable to update everything when we want to
const [ useless, setUseless ] = useState(0)
useEffect( () => { // do something with cartLines here }
  , [useless]) // will trigger on any change to the dummy

// for example, this will empty the cart one by one, reloading once inbetween

useEffect( () => {
  lineChanger( { /*change*/ }).then( () => {
    setUseless( (i) => i+1 ) // set the useless State so the component will update
  })
}, [useless] )