Shopify App Development

Balashanmugam
Tourist
6 0 0

Hi,

We have installed the Shopify application in our store. When trying to get the cart data from the app, the code below retrieves the data, and it does not execute the app.subscribe function. 

index.html

 

1. Shopify App Development
We have installed the shopify application in our store. When trying to get the cart data from the app, the code below retrieves the data, and it does not execute the app.subscribe function. @hannachen Can you please help us on this?

index.html
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
 </head>
 <body>
	<div id="container"></div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://unpkg.com/@shopify/app-bridge"></script>
	<script>
		//alert();
		const AppBridge = window['app-bridge'];
		const actions = window['app-bridge'].actions;
		const createApp = AppBridge.createApp;
		const Cart = actions.Cart;
		console.log(Cart);
		console.log(createApp);
		console.log(actions);
		console.log(AppBridge);

		const app = createApp({
		  apiKey: '{{api_key}}',  
		  shopOrigin: '{{shop_origin}}'
		});
		console.log(app);
		console.log(actions.Features.ActionType.UPDATE);
	     


   // Not executing after this
const unsubscribe = app.subscribe(actions.Features.ActionType.UPDATE, function () { 
		console.log("true");
		  app.featuresAvailable(Group.Cart).then((features) => { 
			const hasFetchCart = features.Cart[Cart.Action.FETCH]; 
			console.log(features);
			console.log(hasFetchCart);
			if (hasFetchCart) { 
			  unsubscribe(); 
			  const cart = Cart.create(app); 
			  cart.subscribe(AppBridge.Cart.Action.UPDATE, payload => { 
				console.log({cart: { payload }}); 
				$("#container2").html(JSON.stringify(payload));
			  });
			  cart.dispatch(Cart.Action.FETCH);
			} 
		  }); 
		});
		console.log(unsubscribe);

	</script>
 </body>
</html>

 

We are getting like the below console image.

Balashanmugam_0-1610685274378.png

Thanks,

0 Likes
hannachen
Shopify Staff
Shopify Staff
49 8 14

Hi there, at a quick glance, the debugging console looks to be in Chrome.

I am curious, what are you using to test out cart actions? I am wondering because cart features are only available in the POS apps.