Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.
Solved

Problems with the "app bridge" pos cart

hashi_ws
Visitor
3 1 0

Cart data acquisition process does not stop from POS
So it takes a lot of time for the button click to be executed.
How can I stop the cart data acquisition process?

import React from 'react';
import ReactDOM from 'react-dom';

import createApp from "@shopify/app-bridge/development";
import { Features, Cart, Group, Toast, Pos } from "@shopify/app-bridge/actions";
import { Provider, TitleBar } from "@shopify/app-bridge-react";

import "@shopify/polaris/dist/styles.css";

class Testpoint extends React.Component {
    constructor(props) {
		super(props);
		console.log("data from component", JSON.parse(this.props.data));

		this.closeApp = this.closeApp.bind(this);
		this.getCartData = this.getCartData.bind(this);
		this.setCartData = this.setCartData.bind(this);

		this.state = {
			res: "",
		}
	}

	closeApp() {
		console.log("function: closeApp");

		const data = JSON.parse(this.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
	
		const app = createApp({
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		});
		const pos = Pos.create(app);
		pos.dispatch(Pos.ActionType.CLOSE);
	}

	getCartData() {
		let vm = this;

		console.log("function: getCartData");

		const data = JSON.parse(vm.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
	
		const app = createApp({
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		});

		var cart = Cart.create(app);
		console.log('Cart.Action.UPDATE');
		
		var unsubscriber = cart.subscribe(Cart.Action.UPDATE, function (payload) {
			console.log('[Client] fetchCart', payload);
			unsubscriber();
			vm.setCartData(payload.data);
		});

		app.featuresAvailable(Group.Cart).then(function (state) {
			var _ref = state.Cart && state.Cart[Cart.Action.FETCH],
				Dispatch = _ref.Dispatch;
			if (Dispatch) {
				console.log("Dispatch: cart.dispatch(Cart.Action.FETCH)")
				cart.dispatch(Cart.Action.FETCH);
			} else {
				var toastOptions = {
					message: 'Cart is not available',
					duration: 5000,
					isError: true
				};
				var toastError = Toast.create(app, toastOptions);
				toastError.dispatch(Toast.Action.SHOW);
			}
		});
	}

	setCartData(data) {
		console.log("function: setCartData");
		this.setState({res: JSON.stringify(data.customer)})
	}


    render() {
		let vm = this;
		const data = JSON.parse(this.props.data);
		const apiKey = data["apiKey"];
		const shopOrigin = data["shop"];
		const config = {
			apiKey: apiKey,
			shopOrigin: shopOrigin,
		};

		this.getCartData();

		return (
			<Provider config={config}>
				<h2>{this.state.res}</h2>
				<button onClick={() => this.closeApp()}>close</button>
		  	</Provider>
		);
	}
}


export default Testpoint;

 

Accepted Solution (1)

hashi_ws
Visitor
3 1 0

This is an accepted solution.

I'm sorry, I solved it
It worked correctly by setting the state to once.
Thank you.

	setCartData(data) {
		if (this.state.isConfigured==false) {
			console.log("function: setCartData");
			this.setState({res: JSON.stringify(data.customer)})
			this.setState({isConfigured: true})
		}
	}

View solution in original post

Reply 1 (1)

hashi_ws
Visitor
3 1 0

This is an accepted solution.

I'm sorry, I solved it
It worked correctly by setting the state to once.
Thank you.

	setCartData(data) {
		if (this.state.isConfigured==false) {
			console.log("function: setCartData");
			this.setState({res: JSON.stringify(data.customer)})
			this.setState({isConfigured: true})
		}
	}