POS Cart problem

Solved
Turco
New Member
5 0 0

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 ? (
        <Provider config={config}>
          {isCartAvailable ? (
            <h1>Cart Available</h1>
          ) : (
            <h1>Cart is not Available</h1>
          )}
        </Provider>
      ) : (
        <h1>Loading</h1>
      )}
      <h2>{fetchResponse}</h2>
      <h2>{payloadResponse}</h2>
      <h2>{debugString}</h2>
    </>
  );
}

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

 

0 Likes
policenauts1
Trailblazer
173 13 32

This is an accepted solution.

I've done a lot of stuff with Cart before, but I wasn't aware a tutorial existed - I just followed the App Bridge documentation examples here: https://shopify.dev/tools/app-bridge/actions/cart. The best thing I can suggest to get it working is to first start with a bare bones add line item payload to cart action (you can already assume hasFetchCart is true on your Android device running POS). And after that, then add in the check for whether it has a cart - and then after that, add in a subscribe for cart update, so on and so forth. And also make sure your app has write_orders scope permission. Good luck. 

 

0 Likes
Turco
New Member
5 0 0

Thanks! I was missing the right permission, thank you very much

0 Likes
Ruzen
New Member
5 0 0

Hey ,
 Could you please tell me how you solved the issue? That would be very great of you. Thank you

0 Likes