Hi,
I’m trying to create and observe a cart in POS. I used the shopify-cli to create an app and followed the tutorial and doc to fetch a cart but it seems that doesn’t work.
import React, { useState } from "react";
import createApp from "@shopify/app-bridge/development";
import { Features, Cart, Group, Toast } from "@shopify/app-bridge/actions";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";
import "@shopify/polaris/styles.css";
function App() {
const [isLoading, setIsLoading] = useState(false);
const [isCartAvailable, setIsCartAvailable] = useState(false);
const [fetchResponse, setFetchResponse] = useState("Loading status");
const [payloadResponse, setPayloadResponse] = useState("Loading payload");
const [debugString, setDebugString] = useState("Debug String");
const app = createApp({
apiKey: API_KEY,
shopOrigin: Cookies.get("shopOrigin"),
});
const config = {
apiKey: API_KEY,
shopOrigin: Cookies.get("shopOrigin"),
};
const unsubscribe = app.subscribe(Features.ActionType.UPDATE, function () {
app.featuresAvailable(Group.Cart).then((features) => {
const hasFetchCart = features.Cart[Cart.Action.FETCH];
setFetchResponse(JSON.stringify(features));
if (hasFetchCart) {
unsubscribe();
var lineItemPayload = {
price: 20,
quantity: 1,
title: "Bab Low - Blue Jay // White Soles",
};
const cart = Cart.create(app);
setPayloadResponse("not ok");
cart.subscribe(Cart.Action.UPDATE, (payload) => {
setPayloadResponse("ok");
setPayloadResponse(JSON.stringify(payload));
});
setIsCartAvailable(true);
setDebugString("before dispatch");
cart.dispatch(Cart.Action.ADD_LINE_ITEM, {
data: lineItemPayload,
});
setDebugString("after dispatch");
} else {
setIsCartAvailable(false);
var toastOptions = {
message: "Cart is not available",
duration: 5000,
isError: true,
};
var toastError = Toast.create(app, toastOptions);
toastError.dispatch(Toast.Action.SHOW);
}
setIsLoading(true);
});
});
return (
<>
{isLoading ? (
) : (
# Loading
)}
## {fetchResponse}
## {payloadResponse}
## {debugString}
);
}
export default App;
This is my index.js. I embedded the app and use the link to make the app appear in the cart page of the POS app and it does. The problem are the results:
in the admin it shows this:
Loading
Loading status
Loading payload
Debug String
as expected but in the POS app it shows this:
Cart Available
{“Cart”:{“ADD_CUSTOMER_ADDRESS”:{“Dispatch”:false,“Subscribe”:false},“ADD_LINE_ITEM”:{“Dispatch”:false,“Subscribe”:false},“CLEAR”:{“Dispatch”:false,“Subscribe”:false},“FETCH”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_CUSTOMER”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_DISCOUNT”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_LINE_ITEM”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_LINE_ITEM_DISCOUNT”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_LINE_ITEM_PROPERTIES”:{“Dispatch”:false,“Subscribe”:false},“REMOVE_PROPERTIES”:{“Dispatch”:false,“Subscribe”:false},“SET_CUSTOMER”:{“Dispatch”:false,“Subscribe”:false},“SET_DISCOUNT”:{“Dispatch”:false,“Subscribe”:false},“SET_LINE_ITEM_DISCOUNT”:{“Dispatch”:false,“Subscribe”:false},“SET_LINE_ITEM_PROPERTIES”:{“Dispatch”:false,“Subscribe”:false},“SET_PROPERTIES”:{“Dispatch”:false,“Subscribe”:false},“UPDATE”:{“Dispatch”:false,“Subscribe”:false},“UPDATE_CUSTOMER_ADDRESS”:{“Dispatch”:false,“Subscribe”:false},“UPDATE_LINE_ITEM”:{“Dispatch”:false,“Subscribe”:false}}}
not ok
after dispatch
the “not ok” shows that the dispatch didn’t work and the permission are all false for the cart. I tried to watch other similar questions but I didn’t find anything.
I am currently using a Shopify POS app for android ver: 3.53.0
