App-bridge Cannot add customer to cart

Solved
Highlighted
New Member
6 0 0

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>

 

0 Likes

Success.

Shopify Staff
Shopify Staff
20 8 1

Hi @tomchan 

 

Sorry about the confusion. The help page is a little out of date. We will update it as soon as possible. To dispatch a cart action, you need to wrap your payload under data key as below:

 

  var unsubscriber = cart.subscribe(Cart.Action.UPDATE, function (payload) {
      console.log('[Client] setCustomer', payload);
      unsubscriber();
 });
  cart.dispatch(Cart.Action.SET_CUSTOMER, { data: customerPayload });

 

Thanks for reporting this issue.

1 Like
Shopify Staff
Shopify Staff
20 8 1

The docs has been updated. Please see https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/cart

 

Let us know if you see any issues. 

0 Likes
New Member
6 0 0

In the customerPayload object, I found that I can use the customer's id or email (which is not mentioned in the docs) to find an existing customer and set it in the cart. Is there more options (other than id / email) that is available but not yet mentioned in the docs?

0 Likes
Shopify Staff
Shopify Staff
20 8 1

Hi @tomchan ,

 

Can you clarify what do you mean by "customer's id or email (which is not mentioned in the docs)"? They are mentioned in the docs here https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/cart#set-customer. Also, set customer by id or email are two options that we recommend, however if you want to set customer with just first name and last name, it is also possible. 

0 Likes