@arianee/shopify-app

v0.6.0

Published

2 months ago

This package is a React bundle built for the Arianee's Shopify app. It supports claiming and displaying Arianee digital product passports on headless Shopify stores.

Downloads

0High
0Medium
0Low

Arianee : Shopify app bundle

This package is a React bundle built for the Arianee's Shopify app. It supports claiming and displaying Arianee digital product passports on headless Shopify stores.

Requirements

You need a headless Shopify store with the Arianee's Shopify app installed for that store.

Install

You can install this as a package with npm:

npm install @arianee/shopify-app

or directly inject it in your HTML file:

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <script src="https://cdn.jsdelivr.net/npm//@arianee/shopify-app/dist-npm/arianee_bundle.js"></script>
  </body>
</html>

How it works

This React bundle displays modals on top of your website's UI. When an Arianee digital product passport is detected, it is displayed to the user. The user can then claim the passport directly in their store account. All the UIs and communication with the Arianee's Shopify app are handled by the bundle.

Setup

The bundle must be injected in your front either by importing it in your app or by adding the script tag in your HTML file.

import "@arianee/shopify-app";

<script src="https://cdn.jsdelivr.net/npm//@arianee/shopify-app/dist-npm/arianee_bundle.js"></script>

Once the script is loaded, you must call the window.arianee.init method.

window.arianee.init({
  shopify: {
    url: "<your shopify store url>",
    headless: {
      /** A method that returns the current customer access token (or null if none / not logged in) */
      getCustomerAccessToken: async () => '<customer-access-token>',
      /** A method that returns the public storefront access token of your store */
      getStorefrontAccessToken: async () => '<storefront access token>'
    };
  },
  settings: {
    appContainer: {
      id: "arianee-root", /** id of the html container to use for the modals (will be created if it doesn't exist) */
    },
    /** optional method, if set, the not logged in modal will display a "login" call to action that will call this method on click */
    onLoginClick: () => window.location.href = "/my-login-route",
  },
});

There are also optional parameters, for a full list of parameters, see the TypeScript declaration file (arianee_bundle.d.ts).

Customization

The modals exist in the same DOM as your front, therefore they will inherit most of your front's style (font, color etc.) by default. If you want to further customize the look and feel of the modals, use the settings parameter of the window.arianee.init method as well as custom css (all elements of the modals are easy to access with class selectors).

Example to modify the style of the header:

/** Start from body selector for css specifity reasons (to override the default style) */
body .arianee-modal-root .arianee-modal-container div.arianee-modal-header {
  background: black;
  margin-bottom: 32px;
}

body
  .arianee-modal-root
  .arianee-modal-container
  .arianee-modal-header
  .arianee-modal-header-title {
  color: white;
  padding: 0;
  margin: 0;
}

Translation

The app comes with a default translation in English. If you want to translate the modals in another language or if you want to modify the english translation, you can pass a translations parameter to the init method. You can see all the translation keys in the arianee_bundle.d.ts file.

The provided translations will be merged with the existing translations, so you can modify only the keys you want to change.

window.arianee.init({
  shopify: {
    url: "https://example.myshopify.com/",
  },
  settings: {
    ...,
    translations: {
      en: {
        translation: {
          app: {
            modals: {
              claimStatus: {
                messages: {
                  success: "A custom claim success message.",
                },
              },
            },
          },
        },
      },
    },
  },
});

Usage

You can test the integration by accessing this URL:

https://yourwebsite.com/?arianee=7231272,qqt4k6r7zql3,testnet

If the integration is successful, you should see a modal displaying the Arianee digital product passport (if you are logged in, otherwise you should see a modal asking you to login).

Show owned nfts

You can open a modal that displays the owned NFTs of the current user by calling the following method:

window.arianee.getInstance().showOwnedNfts();

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme