Hello ,
I am developing an app with app-bridge that invloves adding customer to cart in Shopify POS App. I followed the documentation in :https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/cart#set-customer.
However, after serveal hours of attempts I am still unable to add one cusomter to cart. Can anyone offer some helps or hints or examples of how to do it?
Hers is my .ejs file, which is rendered with nodejs and express. Many thanks in advance!
<!doctype html>
<html lang="en">
<head>
<title>Shopify App Bridge</title>
<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<script>
var createApp = window['app-bridge']['default'];
var getShopOrigin = window['app-bridge']['getShopOrigin'];
var app = createApp({
apiKey: 'myapikey',
shopOrigin: getShopOrigin()
});
</script>
</head>
<body>
<p>
Flash and title bar test
</p>
<div id='container1'></div>
<div id='container2'></div>
<div id='container3'></div>
<script>
var actions = window['app-bridge']['actions'];
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Flash = actions.Flash;
var Scanner = actions.Scanner;
var Features = actions.Features;
var Group = actions.Group;
var Cart = actions.Cart;
var Toast = actions.Toast;
var button = Button.create(app, { label: 'Trigger flash' });
var flashOptions = {
message: 'Flash message triggered',
duration: 5000,
isDismissible: true,
};
var flash = Flash.create(app, flashOptions)
TitleBar.create(app, {
title: 'This is a test title bar',
buttons: {
primary: button,
},
});
var features = Features.create(app);
// scanner functions -- work, don't worry
features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
if (available) {
// scanner.dispatch(Scanner.Action.OPEN_CAMERA)
}
}
});
// Dispatch an action to request access to Scanner actions
features.dispatch(Features.Action.REQUEST, {
feature: Group.Scanner,
action: Scanner.Action.OPEN_CAMERA
});
var scanner = Scanner.create(app);
scanner.subscribe(Scanner.Action.CAPTURE, payload => {
// alert(JSON.stringify(payload))
});
button.subscribe(Button.Action.CLICK, data => {
flash.dispatch(Flash.Action.SHOW);
});
//end of scanner functions
//cart functions
var cart = Cart.create(app);
//fetch work
cart.subscribe(Cart.Action.UPDATE, function (payload) {
$("#container2").html(JSON.stringify(payload));
});
cart.dispatch(Cart.Action.FETCH);
//double-checked this customer id is available
var customerPayload = {
id: 1853024862292
};
var unsubscriber = cart.subscribe(Cart.Action.UPDATE, function (payload) {
console.log('[Client] setCustomer', payload);
unsubscriber();
});
// no such function when alert(Cart.setCustomer)
cart.dispatch(
Cart.setCustomer(customerPayload),
);
// don't work either
cart.dispatch(
Cart.Action.SET_CUSTOMER, customerPayload
)
</script>
</body>
</html>
