Skip to content
This repository has been archived by the owner on Apr 3, 2020. It is now read-only.

Sync history in Shopify embedded apps

License

Notifications You must be signed in to change notification settings

SatelCreative/shopify-app-history

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deprecation Notice

Use Shopify's react-shopify-app-route-propagator instead

Shopify App History

While attempting to use react-router to handle routing in embedded Shopify apps we noticed that window.top.location was not staying in sync with window.location. This package attempts to solve that problem.

While it may work with other routing solutions, it is specifically targeting react-router.

Usage

Install:

$ npm install --save @satel/shopify-app-history

$ yarn add @satel/shopify-app-history

Import:

import { createBrowserHistory } from 'history';
import syncHistory from '@satel/shopify-app-history';

Initialize:

const history = createHistory({
  easdk,
  history: createBrowserHistory(),
});

Polaris Example

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { Router } from 'react-router-dom';
import { AppProvider } from '@shopify/polaris';
import syncHistory from '@satel/shopify-app-history';
import history from './path/to/custom/history';
import App from './App';

const ShopifyRouter = (({ children }, { easdk }) => {
  const history = syncHistory({
    easdk,
    history,
  });
  return (
    <Router history={history}>
      {children}
    </Router>
  );
});

// This tells react to bind the context
ShopifyRouter.contextTypes = { easdk: PropTypes.any.isRequired };

ReactDOM.render(
  <AppProvider
    apiKey="shh"
    shopOrigin="https://example.myshopify.com"
  >
    <ShopifyRouter>
      <App />
    </ShopifyRouter>
  </AppProvider>,
  document.getElementById('root'),
);

EASDK Example

<!-- Include the EASDK -->
<script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import syncHistory from '@satel/shopify-app-history';
import history from './path/to/custom/history';
import App from './App';

syncHistory({
  easdk: window.ShopifyApp,
  history,
});

window.ShopifyApp.init({
  apiKey: "shh",
  shopOrigin: "https://example.myshopify.com",
});

window.ShopifyApp.ready(() => {
  ReactDOM.render(
    <Router history={history}>
      <App />
    </Router>,
    document.getElementById('root'),
  );
});

Implementation

It is just tiny wrapper around history that makes calls to easdk.replaceState() or easdk.messenger.send() depending on which library is used.