momentvm-headless

Momentvm-headless is a library that supports for building PWA SFCC storefront by taking advantage of MOMENTVM headless CMS.

Installation

In PWA, you need to install that:

npm install @momentvm/headless

MVMProvider

Momentvm-headless exports one provider that works in two modes: production and preview. You need to wrap the app with this provider.

Usage

<MVMProvider origin={origin} clientId={clientId}>
    <App />
</MVMProvider>

You need pass the client id of OCAPI and target origin of SFCC into MVMProvider so it can access to content assets.

1. Production Mode

The provider works in production mode by default. In production mode, it will take the contents from SFCC using OCAPI which are used in building storefront. For this, Momentvm-headless exports a hook named useContent. It is passed by content id and returns loading, error and content. Wherever in PWA codebase you want to fetch any contents from SFCC with content id, you can call this hook to get the result. But you make sure that the app is already wrapped with the MVMProvider.

Usage

import { useContent } from "@momentvm/headless";
...

const { content, loading, error } = useContent('cart'); // cart is content id here

if (loading) return <div>Loading...</div>
if (error) return <div>{error}</div>

// Now, content is available
...

2. Preview mode

The PWA wrapped with MVMProvider would be automatically converted into preview mode when it is used in preview of MOMENTVM Headless CMS. In preview of MOMENTVM Headless CMS, we will replace the existing section with PWA on the right side. When PWA is used in the preview of CMS, it helps users to see how they are updating the page. It interacts with the render app to get the rendered preview. You don't need to do any other things in PWA to make that used for preview mode but just set wrapper url and selector in team settings of the Headless CMS.