stimulus-shopify-app-bridge v0.1.2
A Stimulus Controller to setup the Shopify App Bridge
Warning
This is in no way production ready, please help make it so ;)
Getting started
This assumes that you have Stimulus already installed.
In your project just add the stimulus-shopify-app-bridge
package.
$ yarn add stimulus-shopify-app-bridge
or
$ npm i stimulus-shopify-app-bridge
Define your html
Make sure to include
<div data-controller="home">
...page content here
</div>
Somewhere on every page, also include:
<div id="shopify-app-init" data-api-key="<YOUR-SHOPIFY-API-KEY>" data-shop-origin="<SOMESHOP.MYSHOPIFY.COM>"></div>
Define your page controllers by extending stimulus-shopify-app-bridge
// ./controllers/home_controller.js
import AppBridgeController from "stimulus-shopify-app-bridge";
import { Button } from '@shopify/app-bridge/actions'
// create a parent controller by extending stimulus-conductor controller
export default class extends AppBridgeController {
initialize() {
super.initialize();
// if you overwrite initialize you must call super first!!!!
// const app = this.appBridge
// const flashButton = Button.create(app, { label: 'Show flash' })
// const titleBarOptions = {
// title: 'Show',
// buttons: {
// primary: [flashButton]
// }
// }
// flashButton.subscribe(Button.Action.CLICK, data => {
// this.flashNotice('Hello World!')
// })
// this.appTitleBar = this.createAppTitleBar(app, titleBarOptions)
}
connect() {
super.connect();
// if you overwrite connect you must call super!!!!
// this.appBridge is availble here
}
disconnect() {
super.disconnect();
// if you overwrite disconnect you must call super!!!!
// this.appBridge is availble here
}
}
Conventions
The app bridge controller creates the app and sets up the following helpers:
this.appBridge
This is the actual app instance, which can be passed to actions etc.this.appHistory
this.appRedirect
this.appLoading
this.createAppTitleBar(this.appBridge, titleBarOptions)
this.flashNotice(message)
this.flashError(message)
Limitations
Currently it only works with inherited controllers, and Turbolinks events are not handled for loading indicators.
Contributing
Bug reports and pull requests are welcome.
To contribute:
Fork the project.
Install dependencies
$ yarn install
You can test locally also the results with the playground project (yarn start
)
Then :
š Write some tests
šŖ Add your feature
š Send a PR
License
This package is available as open source under the terms of the MIT License.