## Reaction Commerce [Reaction](http://reactioncommerce.com) is a headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes.
npm install @kali604/reactioncommerce-composablesFor a 'How to setup Reaction Commerce', please have a look at the Readme in the Reaction repository.
Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backends.
!Vue Storefront - Headless Architecture
Vue Storefront uses its library storefront ui as component library.
For documentation on Vue Storefront, please have a look at thier documentation.
1. Clone the Reaction Commerce repositories (api, admin, hydra, identity)
2. Setup Reaction Commerce according to the documentation
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
});
});
}
}
`
`
Signed-off-by: Jane Doe
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.