Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Problems with the "app bridge" pos cart

Solved

Problems with the "app bridge" pos cart

hashi_ws
Tourist
5 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
Tourist
5 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
Tourist
5 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})
		}
	}