Hey there, I’ve used this API in the past and when I am using this API today, it shows an error on the browser console.
I tried to debug and went through docs multiple times, but it seems like there’s some issue with the API because even the extension I built earlier, when I try it today on the dev server, it shows the same error which is odd because I made no change to it and it’s still working on production.
Here’s the code I am using:
await applyCartLinesChange({
type: "addCartLine",
merchandiseId: e, //e is the product variant ID
quantity: 1,
});
Here’s a screenshot of the error I am getting on my browser console:
Quick update, after thinking it through, I thought it could be the API version, the project config, or something messed up my end which caused this issue so I went ahead, created a fresh project and fresh extension, the problem still continues.
Here’s the entire code from the new extension.
import {
reactExtension,
BlockStack,
Button,
useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";
// 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (
<Extension />
));
function Extension() {
const applyCartLinesChange = useApplyCartLinesChange();
async function handleAddToCard() {
console.log("Adding to the cart")
await applyCartLinesChange({
type: "addCartLine",
quantity: 1,
merchandiseId: "gid://shopify/ProductVariant/45352591458516"
})
console.log('added to the cart')
}
return (
<BlockStack>
Add the product to the cart from here
<Button onPress={handleAddToCard}>Sample button</Button>
</BlockStack>
)
}