Contribution Mode

Since version 3.2

Contribution Mode is the core of the Magic Button tool. When Contribution Mode is enabled for a user, your storefront displays a set of tools created for content creators.

API Reference

The ContributionMode instance is exposed in the user context, see app.user.contributionMode for more information.

How to activate Contribution Mode

The Magic Button is only visible when the Contribution Mode is active.

One can force the contribution mode by using Front-Commerce's contributionMode.force configuration. In a default Front-Commerce application, this is achieved using the FRONT_COMMERCE_CONTRIBUTION_MODE_FORCE environment variable in the app/config/contributionMode.ts configuration file, but you can implement your own logic.

warning

This should only be used for development purposes.

The ContributionMode state should be updated using the setContributionMode function.

user.contributionMode.setContributionMode({
  enabled: true,
  previewMode: true, // optional and will only change if contribution mode is enabled
  xRayMode: true, // optional and will only change if contribution mode is enabled
});

Here are some examples of how to activate the Contribution Mode.

From a Remix Action

An action can be used, for example to activate from a user interface.

app/routes/enable-contribution-mode.ts

export const action = ({ context, request }: ActionFunctionArgs) => {
  const app = new FrontCommerceApp(context.frontCommerce);
  const contributionMode = app.user.contributionMode;

  if (!contributionMode) {
    throw new Response("Not Found", {
      status: 404,
      statusText: "Not Found",
    });
  }

  const formData = await request.formData();
  context.user.contributionMode.setContributionMode({
    enabled: true,
    previewMode: formData.get("previewMode") === "on",
    xRayMode: formData.get("xRayMode") === "on",
  });

  return json({
    contributionMode: contributionMode.current(),
  });
};

From a Remix Loader

This is also possible via remix loaders, for example a custom preview route.

app/routes/preview.ts

export const loader = ({ context, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);

  if (url.searchParams.get("token") !== "MySuperSecretToken") {
    throw new Response("Invalid token", { status: 401 });
  }

  app.user.contributionMode.setContributionMode({
    enabled: true,
    previewMode: true,
  });

  return redirect("/");
};

From GraphQL

This is also possible via GraphQL, for example a custom mutation or from a GraphQL loader.

export default {
  namespace:"MyModule"
  dependencies:["Front-Commerce/Contribution-Mode"]
  resolvers:{
    Mutation:{
      enableContributionMode: async (root, args, context) => {
        context.user.contributionMode.setContributionMode({enabled: true})
        return true
      }
    }
  }
}

Check if Contribution Mode is active

You can check if the Contribution Mode is active by using the enabled field in the ContributionMode instance.

if (user.contributionMode.enabled) {
  // Contribution Mode is active
}

alternatively you can get the full state of contribution mode using the current method

const contributionMode = user.contributionMode.current();

// contributionMode.enabled - true if contribution mode is active
// contributionMode.previewMode - true if contribution mode is active and preview mode is enabled
// contributionMode.xRayMode - true if contribution mode is active and xRay mode is enabled