Reaction Commerce integration with Vue Storefront

Reaction Commerce

Reaction is a headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes.

For a 'How to setup Reaction Commerce', please have a look at the Readme in the Reaction repository.

Vue Storefront

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backends.

Vue Storefront uses its library storefront ui as component library. For documentation on Vue Storefront, please have a look at thier documentation.

Usage

Follow the documentation to install Reaction Commerce locally.

Start Reaction Commerce (locally)

1. Clone the Reaction Commerce repositories (api, admin, hydra, identity)
2. Setup Reaction Commerce according to the documentation

Setting up a Storefront

1. Create a basic vue application or clone the template from Vue Storefront
2. Install the integration plugin packages. Note this does not require a global installation. Note we recommend using the latest version

NPM:

npm install --save @kali604/reactioncommerce-api
npm install --save @pondigitalsolutions/rc-storefront-composables

Yarn:

yarn add @kali604/reactioncommerce-api
yarn add @pondigitalsolutions/rc-storefront-composables

3. Include the plugins into the configuration file nuxt.config.js:

buildModules: [
    [
      "@vue-storefront/nuxt",
      {
        coreDevelopment: true,
        useRawSource: {
          dev: ["@pondigitalsolutions/rc-storefront-composables"],
          prod: ["@pondigitalsolutions/rc-storefront-composables"],
        },
      },
    ],
  ]

4. Set the RuntimeConfig for the api url:

// nuxt.config.js

publicRuntimeConfig: {
    RC_API_URL: process.env.RC_API_URL,
}

5. Initialize the ApolloClient with the correct config settings. Optional: Create a separate configuration file for configuration such as default language etc.

// nuxt.config.js

import { setup } from "@pondigitalsolutions/reactioncommerce-api";
import { config } from "./reactioncommerce-config";
const { ...others } = config;

export default function ({ $config }) {
  setup({
    api: {
      uri: $config.RC_API_URL,
    },
    ...others,
  });
}

6. Implement a subsection of the integration. For example the CatalogItem overview page:

import {
  usePrimaryShop,
  useCatalogItems,
  onSSR
} from "@pondigitalsolutions/reactioncommerce-composables";

export default {
  name: "ProductOverview",
  setup(props, context) {
    const { primaryShopId, getPrimaryShopId } = usePrimaryShop("primaryShop");
    const {
        products,
        totalProducts,
        search,
        loading,
    } = useCatalogItems("products");

    onSSR(async () => {
      await getPrimaryShopId();
      await search({
        shopId: primaryShopId.value,
        searchstring: searchParam.value,
        perPage: 20,
        page: 1
      });
    });
  }
}

Developer Certificate of Origin

We use the Developer Certificate of Origin (DCO) in lieu of a Contributor License Agreement for all contributions to Pon Digital Solutions open source projects. We request that contributors agree to the terms of the DCO and indicate that agreement by signing-off all commits made to Pon Digital Solutions projects by adding a line with your name and email address to every Git commit message contributed:

Signed-off-by: Jane Doe <[email protected]>

You can sign-off your commit automatically with Git by using git commit -s if you have your user.name and user.email set as part of your Git configuration.

We ask that you use your real full name (please no anonymous contributions or pseudonyms) and a real email address. By signing-off your commit you are certifying that you have the right to submit it under the GNU AGPLv3 License.

We use the Probot DCO GitHub app to check for DCO sign-offs of every commit.

If you forget to sign-off your commits, the DCO bot will remind you and give you detailed instructions for how to amend your commits to add a signature.

Thanks

Many thanks to Reaction Commerce, Vue Storefront and Home Assistent for being a inspiration for the issue templates and docs!

License

This integration is build by Pon Digital Solutions and is GNU AGPLv3 Licensed