Have your say in Community Polls: What was/is your greatest motivation to start your own business?
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.

Unable to Subscribe to Cart events under App Bridge

Solved

Unable to Subscribe to Cart events under App Bridge

runTimeZero
Shopify Partner
20 0 0

After following the App Bridge tutorial here : https://help.shopify.com/en/api/embedded-apps/app-bridge/oauth ,

I am able to authenticate my application in Shopify Admin section.

 

After instantiating App Bridge object, when I check featuresAvailable() on this object, it seems most are disabled.

 

See code below:

 

 

 

var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;

//const apiKey = 'foobar';
const redirectUri = 'https://foo.ngrok.io' + '/shopify/authorization/callback';
const scope = 'read_products, write_products, read_inventory, write_inventory, read_locations, read_orders, read_all_orders, read_draft_orders, write_draft_orders, write_orders, write_customers, write_orders, write_checkouts, read_collection_listings, unauthenticated_read_product_listings, unauthenticated_read_product_tags, unauthenticated_write_checkouts, unauthenticated_write_customers, unauthenticated_read_content, read_users, write_users';
const permissionUrl = '/oauth/authorize?client_id=' + apiKey + '&scope=' + scope + '&redirect_uri=' + redirectUri;

// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
    window.location.assign('https://' + shopOrigin + '/admin' + permissionUrl);

    // If the current window is the 'child', change the parent's URL with Shopify App Bridge's Redirect action
} else {
    const app = createApp({
        apiKey: apiKey,
        shopOrigin: shopOrigin,
    });
    app.featuresAvailable().then(function (state) {
        $("#container").html(JSON.stringify(state)); // see output below
    });

}

 

 

The state returns the below output:

{"Scanner":{"OPEN::NFC":{"Subscribe":false,"Dispatch":false},"CAPTURE":{"Subscribe":true,"Dispatch":false},"OPEN::CAMERA":{"Subscribe":true,"Dispatch":true}},"Cart":{"UPDATE":{"Subscribe":false,"Dispatch":false},"REMOVE_LINE_ITEM_DISCOUNT":{"Subscribe":false,"Dispatch":false},"FETCH":{"Subscribe":false,"Dispatch":false},"REMOVE_PROPERTIES":{"Subscribe":false,"Dispatch":false},"ADD_LINE_ITEM":{"Subscribe":false,"Dispatch":false},"REMOVE_LINE_ITEM_PROPERTIES":{"Subscribe":false,"Dispatch":false},"REMOVE_DISCOUNT":{"Subscribe":false,"Dispatch":false},"REMOVE_LINE_ITEM":{"Subscribe":false,"Dispatch":false},"SET_LINE_ITEM_PROPERTIES":{"Subscribe":false,"Dispatch":false},"ADD_CUSTOMER_ADDRESS":{"Subscribe":false,"Dispatch":false},"CLEAR":{"Subscribe":false,"Dispatch":false},"SET_DISCOUNT":{"Subscribe":false,"Dispatch":false},"SET_PROPERTIES":{"Subscribe":false,"Dispatch":false},"UPDATE_LINE_ITEM":{"Subscribe":false,"Dispatch":false},"SET_CUSTOMER":{"Subscribe":false,"Dispatch":false},"REMOVE_CUSTOMER":{"Subscribe":false,"Dispatch":false},"SET_LINE_ITEM_DISCOUNT":{"Subscribe":false,"Dispatch":false},"UPDATE_CUSTOMER_ADDRESS":{"Subscribe":false,"Dispatch":false}},"Share":{"SHOW":{"Subscribe":true,"Dispatch":true},"CLOSE":{"Subscribe":true,"Dispatch":false}}

 

 

As you can see pretty much all properties are set to FALSE.  How do I enable them ?

 

Accepted Solution (1)

Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

Hi @runTimeZero 

 

We recently added a notice when accessing cart features https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/features#cart. You could subscribe to Features.ActionType.UPDATE in your use case.

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 4 (4)

David_Muzi
Shopify Staff (Retired)
95 3 9

To help narrow down the issue, what version of POS, and on what platform is being used when App Bridge gives you that response?

To learn more visit the Shopify Help Center or the Community Blog.

runTimeZero
Shopify Partner
20 0 0

Shopify App version: 5.35.0

IOS Version 12.3.1

Device: IPAD

David_Muzi
Shopify Staff (Retired)
95 3 9

Great, that exceeds the minimum version.  Can you verify when launching the app via the cart screen?  Ie, tap the ... on the Cart screen where the dropdown shows the available apps.  Note, access to the cart is only available from this screen.

To learn more visit the Shopify Help Center or the Community Blog.

Henry_Tao
Shopify Staff
91 28 15

This is an accepted solution.

Hi @runTimeZero 

 

We recently added a notice when accessing cart features https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/features#cart. You could subscribe to Features.ActionType.UPDATE in your use case.

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog