Development discussions around Shopify APIs
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;
Solved! Go to the solution
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})
}
}
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})
}
}
User | RANK |
---|---|
8 | |
7 | |
3 | |
3 | |
3 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By